Tililt

Colour Converter

HEX, RGB, HSL and the contrast ratio against black and white.

How it works

HEX and RGB are the same thing written differently — three bytes, one per channel. HSL rearranges those into hue, saturation and lightness, which is far easier to reason about when you want the same colour a bit darker.

Contrast ratio is the accessibility number, and it is not simple brightness: it weights the channels by how sensitive human vision is to each (green far more than blue) and applies a gamma correction first. WCAG asks for 4.5:1 for body text and 3:1 for large text.

Common questions

Why does my light colour fail contrast on white?

Contrast is a ratio of luminance, and luminance is dominated by the green channel. A vivid yellow has very high luminance and so almost no contrast against white, however saturated it looks.

Related calculators