Every color you see on a screen is represented by a code — but there are several different formats for expressing the same color: HEX, RGB, RGBA, HSL, and HSLA. Understanding each format helps you work more confidently in CSS, design tools, and code.
HEX Color Codes
HEX (hexadecimal) is the most widely recognized color format in web design. It uses a #
sign followed by 6 characters representing the red, green, and blue color channels, each from 00 to
FF (0 to 255 in decimal).
- #FF0000 = pure red (R=255, G=0, B=0)
- #00FF00 = pure green
- #0000FF = pure blue
- #FFFFFF = white
- #000000 = black
Shorthand HEX: If both digits in each pair are the same, you can shorten to 3 characters.
#FFCC00 → #FC0. HEX does not natively support transparency.
RGB and RGBA
RGB specifies red, green, blue values from 0 to 255. RGBA adds a 4th value for opacity (0.0 = fully transparent, 1.0 = fully opaque).
| Format | Example | Opacity |
|---|---|---|
| RGB | rgb(255, 99, 71) | No |
| RGBA | rgba(255, 99, 71, 0.5) | Yes (0–1) |
| HEX | #FF6347 | No |
| HEX8 | #FF634780 | Yes (00–FF) |
| HSL | hsl(9, 100%, 64%) | No |
| HSLA | hsla(9, 100%, 64%, 0.5) | Yes (0–1) |
HSL — The Designer's Favorite
HSL stands for Hue, Saturation, Lightness. Unlike HEX and RGB which describe color in terms of light mixtures, HSL describes color the way humans think about it.
- Hue (0–360°): The color wheel position. 0° = red, 120° = green, 240° = blue
- Saturation (0–100%): How intense/vivid the color is. 0% = grey, 100% = fully saturated
- Lightness (0–100%): How light/dark. 0% = black, 50% = normal, 100% = white
HSL is powerful for creating harmonious color palettes. To create a lighter tint of a color, just increase the lightness. To create a dark shade, decrease it — keeping hue and saturation the same.
💡 Pro tip: Modern CSS supports the newer oklch() and
color() functions for even more accurate color representation across different
displays. For everyday web work, HSL remains the most intuitive human-readable option.
Which Format Should You Use?
- HEX: Best for static colors in CSS, design tools, most common in web design
- RGB/RGBA: When you need transparency or are working in JavaScript (canvas API)
- HSL/HSLA: Best for generating palettes programmatically or when you want to easily adjust colors