Color Theory for Developers: HEX, RGB, HSL, and WCAG Contrast

Most developers know HEX. They might know RGB. Few really use HSL — and that's a missed opportunity. HSL is the color model that maps how humans actually think about color, and once you switch to it, building palettes and theming UI becomes dramatically easier.

The four color models, in plain English

HEX (#10b981)

Six hex digits representing red, green, and blue intensities (0–255 each). Compact, but completely opaque to humans. Want a slightly lighter version of #10b981? You'd have to do math in your head.

RGB (16, 185, 129)

Same data as HEX, just in decimal. Three values, 0–255 each, for red, green, and blue light intensity. Add alpha for transparency: rgba(16, 185, 129, 0.5).

HSL (160, 84%, 39%)

Three values: hue (0–360°, the “color” itself), saturation (0–100%, how vibrant), lightness (0–100%, how light or dark). Want a lighter version? Increase the lightness. Want it more muted? Drop the saturation. The model maps to how humans naturally describe colors.

CMYK (Cyan, Magenta, Yellow, Key/Black)

The print world's native color space. Used by printers — RGB doesn't translate directly because screens emit light (additive) while printers absorb light (subtractive). Bright neon colors that look great on screen often flatten significantly in print.

Why HSL changes how you build palettes

A common need: starting from a brand color, generate a full set of tints and shades. In HEX or RGB, this requires real conversion math. In HSL, you just adjust the lightness:

This is exactly what design systems like Tailwind's color palette do under the hood. Each color has 11 shades (50, 100, …, 950), and the differences are mostly lightness adjustments at the same hue.

WCAG contrast: the accessibility standard

Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background:

• AA (legal minimum in many jurisdictions): 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold).
• AAA (best practice): 7:1 for normal text, 4.5:1 for large text.

These ratios are calculated using the relative luminance of the two colors — a perceptual measure of brightness that accounts for the human eye's sensitivity to green vs blue.

Common color mistakes

• Light gray on white: looks elegant in design mockups, fails WCAG. #aaa on #fff has a contrast ratio of 2.85:1.
• Pure black on pure white: 21:1 contrast feels harsh; many designers prefer a slight softening (#1a1a1a on #fafafa is still well over 7:1).
• Color-only signals: green = good, red = bad — a problem for the ~5% of users with red-green colorblindness. Always pair color with an icon, label, or pattern.
• Mid-tone backgrounds: a brand background that's neither very light nor very dark forces text into a contrast trap. Stick to backgrounds at the lightness extremes.

Practical tips

• Pick brand colors in HSL. Your designer can describe them naturally; you can extend them mathematically.
• Always test contrast at design time, not after launch when retrofitting accessibility is expensive.
• Use CSS custom properties for theme colors. Switching to dark mode becomes a matter of swapping a handful of variables.
• Don't forget hover and focus states — they often have weaker contrast than the resting state.