Colour converter: HEX, RGB and HSL

Every design tool speaks a different language: hexadecimal in CSS, RGB in image editors and HSL when you want to shift the hue without losing saturation.

Contrast against white is calculated too, the figure that decides whether text will be readable.

The colour is read in any of the three formats and converted to the other two. Relative luminance follows the formula from the WCAG accessibility guidelines.

Contrast is not a matter of taste

The WCAG accessibility guidelines set a minimum ratio of 4.5 to 1 between text and background for normal text, and 3 to 1 for large text. It is not an aesthetic recommendation: below those values a significant share of the population cannot read comfortably, and in many countries it is a legal requirement for public sector sites.

Why HSL is easier to work with than RGB

In RGB, lightening a colour means adjusting three numbers at once and guessing. In HSL you simply raise the lightness leaving the hue untouched, which lets you build coherent palettes by changing a single value. It is why design systems prefer it for generating variants.

The alpha channel and transparency

A colour with alpha blends with whatever is beneath it, so real contrast depends on the background it sits on. Grey text at fifty per cent may pass on white and fail over an image.

Colour must not be the only signal

Around eight per cent of men have some form of colour blindness. Indicating an error only in red, or a status only in green, excludes those people. Always pair it with text, an icon or a shape.