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.