Hex, RGB, HSL — and the Contrast Ratio Your Text Needs

One colour, three notations

Hex, RGB and HSL aren't rival colour systems. They're three ways of writing down the same colour, aimed at three different readers: hex for code, RGB for machines, HSL for humans. Take the burnt orange used as an example throughout the converter below: #FF5733.

Converting hex to RGB is just base-16 to base-10 arithmetic, done three times. Converting back is the same trip in reverse, each result padded to two digits — which is why RGB values under 16 produce hex pairs starting with 0. Nothing is gained or lost either way; these are exact translations, not approximations. A three-digit hex like #F00 is shorthand, not a fourth format: each digit doubles, giving #FF0000.

RGB: the machine's view

Screens mix light, so RGB describes a colour as three intensities — how much red, green and blue light, each from 0 to 255. Zeroes across the board make black; 255s make white; equal mid values make greys.

RGB is precise and miserable to adjust by hand. Asked to make a colour "a bit darker", which of the three numbers do you touch, and by how much? All three, proportionally — and you'll guess, check the preview, and guess again. That friction is what the third notation exists to remove.

HSL: the human's view

HSL re-sorts the same information around how people talk about colour. Hue is a position on a wheel, 0 to 360 degrees: red at 0, green at 120, blue at 240. Saturation runs from grey (0%) to vivid (100%). Lightness runs from black (0%) through the full-strength colour (50%) to white (100%).

Now the everyday tweaks become single-number edits. Our orange, hsl(11, 100%, 60%), turns into a hover state by raising lightness, and into a muted version by lowering saturation. The site's own indigo, #4F46E5, is rgb(79, 70, 229) — and hsl(243, 75%, 59%). Design tools hand you HSL for variants because nobody thinks in channel arithmetic.

One warning, and it sets up everything after it: HSL lightness is not brightness as your eye sees it. A yellow and a blue can both sit at 50% lightness while the yellow looks blazing and the blue looks deep. HSL tells you how a colour was specified — never whether text in it will be readable. For readability there's a separate calculation, and it doesn't use HSL at all.

Contrast: the ratio your text actually needs

WCAG — the Web Content Accessibility Guidelines — measures readability with a contrast ratio built from relative luminance, a brightness score that weights the channels the way eyes do. Each RGB channel is first linearised (undone from its screen encoding), then combined: luminance = 0.2126 × red + 0.7152 × green + 0.0722 × blue. Look at those weights. Green counts for almost ten times as much as blue — that's why the yellow in the last section looked so bright.

The ratio itself is simple: (lighter luminance + 0.05) ÷ (darker luminance + 0.05). It runs from 1:1, identical colours and invisible text, to 21:1 for pure black on pure white. The thresholds that matter:

Large text means at least 24 px, or about 19 px if it's bold. Icons and interface elements that carry meaning sit under a separate 3:1 rule against their background. AA is the level most regulations and procurement rules point at.

Three pairs, worked honestly

Abstract thresholds persuade nobody, so let's run real pairs through the formula.

White text on #FF5733: 3.15:1. Our cheerful orange, the example colour itself. As a button with big bold text it scrapes through AA's large-text 3:1. As normal-sized text it fails AA outright. Bright brand colours betray you exactly like this: vivid is not the same as dark, and white type on vivid mid-tones is the classic failure.

#777777 on white: 4.48:1. #767676 on white: 4.54:1. The most famous near-miss in web design. Two greys, one imperceptible step apart, straddling the AA line for normal text — the first fails by a hair, the second passes. If your body text is a "soft, friendly grey", you're probably designing within a point or two of this cliff edge. Check it; don't eyeball it.

White text on #4F46E5: 6.29:1. The indigo in this site's palette passes AA for any text size comfortably, then misses AAA's 7:1. That's a typical honest result for a real brand colour.

Check your own pair, step by step

1. Write down the two hex values: the text colour and the background it actually sits on — not the one in the design file if a gradient, photo or overlay intervenes.
2. Convert both to RGB — the converter below does this — since that's the input the luminance formula needs.
3. Linearise each channel and apply the weights (0.2126, 0.7152, 0.0722), or hand the pair to any WCAG checker — the arithmetic is standardised, so honest tools agree.
4. Compare against the right row: 4.5:1 for normal text at AA, 3:1 only if the text genuinely qualifies as large.
5. Failing? Adjust in HSL, where the fix is one number: lower the text colour's lightness (or raise the background's) in small steps, convert back, and re-check. Contrast problems are fixed in pairs — never by changing one colour and hoping.

And keep the limit of the number in view. A passing ratio doesn't rescue tiny type, a hairline font weight, or text laid over the busy part of a photograph, where the "background" changes under every word. The ratio is a floor, not a guarantee. But it's a floor with a formula — one of the few design arguments you can settle with arithmetic instead of taste.