HEX, RGB and HSL Colour Converter

Three ways to write the same colour

HEX and RGB say the same thing in two alphabets: how much red, green and blue. HSL instead describes a colour the way a person would — what hue it is, how vivid, how light — which makes it far more convenient when you need a variant: lightening a colour in HSL means changing one number, in HEX it means recomputing three.

The contrast ratio

This is the measure that tells you whether text in one colour is readable on a background of another. Accessibility guidelines ask for at least 4.5 for normal text and 3 for large text; the stricter level asks for 7. It is not an aesthetic detail: below that threshold text becomes tiring for many people and unreadable for some.

Why looking is not enough

The calculation does not average the three channels, it weights them: the eye perceives green far more than blue. A vivid yellow and a vivid blue can both look "bright" and have opposite contrast on white. That is why the ratio has to be computed rather than estimated by eye.

How to use it

Paste the colour in any web notation — HEX, including the shorthand form, rgb() or hsl() — and the others appear immediately, along with the contrast ratio on white and on black and the corresponding WCAG levels.

When it comes in handy

The typical case is an interface palette: the colour arrives in HEX from the designer, the component wants it in HSL to derive the lighter variant, and the text placed on top must pass the required contrast. Another frequent use is an accessibility audit: take a site's actual text/background pairs and check where the threshold is missed.

A quick example

The grey #777777 has a contrast of 4.48:1 on white — just above the AA threshold for normal text — and 4.69:1 on black. Same grey, two different verdicts: that is the weight of the luminance of what lies underneath.