Colour Formats 101: HEX, RGB, HSL and Accessible Contrast

Three notations, one colour

• HEX (#6366F1): compact and easy to copy — the CSS default;
• RGB (rgb(99, 102, 241)): 0–255 per channel, convenient for computation and interpolation;
• HSL (hsl(239, 84%, 67%)): hue / saturation / lightness, closest to human intuition — best for designing palettes.

Reference colours

Why contrast is not optional

WCAG requires a contrast ratio of at least 4.5:1 for body text, 3:1 for text at 18pt+ or bold headings, and 3:1 for non-text elements such as icons and borders. Light grey text on white looks elegant but often lands under 3:1 — effectively invisible outdoors or for older users.

Practical advice

1. Build scales with HSL: keep H and S fixed and vary only L (95% / 85% / 70% / 50%) for a harmonious ramp;
2. Pick dark-mode colours separately: inverting a light theme overexposes or muddies it — choose background and foreground deliberately;
3. Interactive states count too: hover, disabled and input borders all affect readability;
4. Do not eyeball it: run a contrast checker — the cost is near zero.

Common questions

Why can #FFF be shortened? Only when both digits of all three channels match (#FFFFFF → #FFF); #F0F0F0 cannot. What is 8-digit HEX? The last two digits are alpha, so #6366F180 is roughly 50% opaque.

A practical palette workflow

1. Pick the primary hue: choose one hue in HSL and keep saturation fixed (say 70%);
2. Build the levels: vary only lightness L — page background (97%), card (99%), primary (55%), accent (45%), body text (25%);
3. Check contrast: confirm text against its background reaches 4.5:1; if not, widen the L gap;
4. Then the functional colours: one hue each for success, warning and error, each with a light and a dark variant so dark mode can reuse them.

Three common mistakes

• Light grey text on white: looks refined, but contrast is often under 3:1 and readability suffers;
• Inverting colours for dark mode: it blows out or muddies the palette — choose lightness per level instead;
• Judging by eye: eyes are poor at judging luminance ratios, so verify with a contrast calculator.

Real-world cases: three color pitfalls

1. "The mockup color looks off on the web": the mockup used the wide-gamut Display P3 while the web shows sRGB. Fix: export sRGB from the design tool, or map key colors.
2. "Changed the color but contrast is insufficient": body text against its background should hit WCAG AA (4.5:1). Fix: check contrast and adjust lightness rather than forcing the hue.
3. "Hover shade is hard to tell apart": simply changing opacity behaves inconsistently over different backgrounds. Fix: use a lightness scale of the same hue instead of translucent overlays.

FAQ

#rgb vs #rrggbb? #rgb is shorthand; #f00 expands to #ff0000 — same depth, lossless both ways. Is HSL's L a percentage? Yes; writing 0–255 is a common mistake. How do I express translucency? Use rgba(r,g,b,a) or 8-digit HEX (#rrggbbaa). How do I get a harmonious set quickly? Fix the hue and vary only lightness/saturation for a monochrome scale.

Try them: color converter, base converter

Colour vision deficiency and alternative encoding

• Do not signal state with red/green alone: it is the most common confusion pair — pair error and success with icons or text;
• Grey-scale self-check: convert the UI to grey and see whether the information still reads — the cheapest test available;
• Check both themes: passing in light mode does not imply dark mode passes; validate both token sets;
• Chart palettes: differentiate series by lightness as well as hue, and label the data.

Opacity and contrast

Compute contrast against the effective rendered colour, not the declared value of a translucent one. White text at 80% opacity over a light image can fall far below 4.5:1 — add a scrim or solid background, then re-check.

Focus states must stay visible

Keyboard users navigate by the focus ring; removing it with outline: none requires an equivalent visible replacement, such as a custom outline in a contrasting colour. Focus indicators need 3:1 contrast too, or keyboard users are locked out — one of the most frequently flagged accessibility issues.