Every color on your screen is represented by a number — but depending on who needs to work with that number, different notations make more or less sense. A brand designer hands you a hex code. A developer reads an RGB value from a design specification. An accessibility checker outputs a contrast ratio. Understanding HEX, RGB, and HSL — and when to use each — is a foundational skill for anyone building or designing for the web.
How Screens Produce Color
Every pixel on an LCD or OLED screen contains three sub-pixels: one red, one green, one blue. By varying the brightness of each sub-pixel independently, any of roughly 16.7 million colors can be produced. This is the additive color model — different from subtractive color (ink on paper) where mixing colors together creates darker results. All three color formats covered in this guide — HEX, RGB, and HSL — ultimately describe how much red, green, and blue to activate, just in different ways.
HEX: The Web Standard
Hexadecimal color codes are the dominant format in web design. A hex color like #6C63FF is read as three pairs of hexadecimal digits: 6C (red), 63 (green), FF (blue). Hexadecimal uses base 16, so digits run 0–9 then A–F, giving 16 possible values per digit. Two hex digits together give 16 × 16 = 256 possible values (0–255) — the same range as each RGB channel.
HEX is compact and universally supported. It's the format you'll most often see in design tools like Figma and Sketch, in brand guidelines, and in CSS. Its weakness: it's not intuitive. It's not easy to look at #6C63FF and mentally visualize the color or adjust it by feel — you need a color picker or a formula.
RGB: The Explicit Channel Model
RGB writes the red, green, and blue channel values as integers from 0 to 255, or as percentages. The syntax in CSS is rgb(R, G, B) or the newer space-separated syntax rgb(R G B):
RGB is more readable than HEX in the sense that you can understand the relative contribution of each channel — rgb(108, 99, 255) clearly has a dominant blue channel. It's the format used in many design specifications, canvas and WebGL contexts, and when doing color math programmatically.
RGBA: Adding Transparency
The fourth channel in RGBA is alpha — opacity, ranging from 0 (fully transparent) to 1 (fully opaque). This is how you create translucent overlays, semi-transparent shadows, and glass-effect UI components:
HSL: The Designer's Format
HSL stands for Hue, Saturation, and Lightness. It was designed to be intuitive for human perception rather than for hardware: instead of describing how much of each light channel to activate, you describe the color in terms humans naturally think about.
- Hue is the color itself, expressed as a degree on the color wheel: 0° = red, 120° = green, 240° = blue, and all the blends in between.
- Saturation is how vivid the color is, from 0% (pure gray) to 100% (full color).
- Lightness is how light or dark, from 0% (black) to 100% (white), with 50% being the pure color.
HSL is enormously useful when building design systems. If your primary brand color is hsl(244, 100%, 63%), you can generate hover states, disabled states, and background tints by simply adjusting the lightness value — keeping hue and saturation constant. This is far more intuitive than doing the same manipulation in hex or RGB.
HSLA: HSL with Transparency
Just as RGBA adds an alpha channel to RGB, HSLA adds one to HSL. The syntax is hsla(H, S%, L%, A). This is particularly useful when creating consistent translucent tints of a brand color:
CSS Color Usage: Modern Best Practices
Modern CSS allows all three formats freely. Using CSS custom properties (variables) for your color palette is the cleanest approach — define your colors once in :root and reference them throughout:
Accessibility: Contrast Ratios
Color choice isn't just aesthetic — it's a legal and ethical requirement for accessible design. The Web Content Accessibility Guidelines (WCAG) specify minimum contrast ratios between text and its background. For normal text, WCAG 2.1 Level AA requires a ratio of at least 4.5:1. For large text (18pt+ or 14pt+ bold), the minimum is 3:1. The strictest level, AAA, requires 7:1 for normal text.
White text on a medium-blue button might look fine to you but fail the contrast requirement for users with low vision or color vision deficiency. Always verify your color combinations with a contrast checker before shipping. A good color picker tool shows you the contrast ratio in real-time as you adjust colors, making it easy to find accessible combinations without guesswork.
Conclusion
HEX, RGB, and HSL all describe the same color space — they're just different lenses for the same information. HEX is compact and universally expected in CSS and design tools. RGB makes channel values explicit and is natural for mathematical color operations. HSL maps to human perception, making it the most intuitive format for systematically varying colors in a design system. Mastering all three and knowing when to reach for each is a skill that separates designers who fight with colors from those who control them deliberately.