Convert a colour

How to use it#

1. Type a colour, or use the picker to choose one.
2. Read it back in whichever notation you need and copy that row.
3. Check the contrast figures before using it for text.

Why HSL is easier to think in than HEX#

HEX and RGB describe a colour as amounts of red, green and blue light. That is how a screen works, and it is a poor match for how people reason about colour. Making #1d4ed8 slightly lighter means changing three numbers at once, with no obvious direction to move them in.

HSL splits the same colour into hue, saturation and lightness. Hue is the position on the colour wheel in degrees, saturation how vivid it is, lightness how close to white or black. Making a colour lighter means raising one number, and building a set of shades means keeping the hue fixed while varying lightness.

This is why design systems are usually specified in HSL even when the final CSS is hex. HSV, offered here too, is the model most colour pickers use internally, where value is the brightest the colour gets rather than the midpoint between black and white.

Contrast, and the number that decides it#

The contrast ratio between two colours runs from 1, meaning identical, to 21, which is black on white. WCAG asks for at least 4.5 to 1 for ordinary body text and 3 to 1 for large text, which starts at 18.66px bold or 24px regular.

The figures on this page compare your colour against plain white and plain black, which answers the common question of which of the two to put text on. The samples beside them show the colour set as real text at both sizes, because a ratio is an abstraction and the question behind it is whether you can read the thing. If your background is neither white nor black, the ratio will differ and needs computing against the colour you are actually using.

One thing the ratio does not capture is that it is calculated from relative luminance, not from how vivid a colour looks. A saturated yellow and a saturated blue can have wildly different luminance while looking equally bold, which is why a palette that passes on paper can still read badly.

The eight-digit hex, and what the alpha does#

A hex colour can carry a fourth pair of digits for opacity, so #ff880080 is the same orange at about 50 percent. The three and four digit shorthands work the same way by doubling each digit, making #f80 identical to #ff8800. Every current browser supports both, so the longer form is not something to avoid.

A translucent colour has no contrast ratio on its own, because the answer depends on whatever sits behind it. Against a named background there is no such ambiguity, so the figures here flatten your colour onto the white or the black being measured first. That is why dropping the alpha on a colour changes its ratio, and why the samples above go pale at the same time. For any other background, composite against that colour and check the result.