Convert a colour

How to use it#

1. Type a colour in any format, including hsv(), 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, and why colour pickers show a close relative of it, HSV, rather than raw channels.

Converting between HSV and HSL#

HSV and HSL share the same hue, so that number carries over unchanged. The other two do not. HSV, which Photoshop, Figma, and most colour pickers call HSB, measures value: how bright the colour is, where 100 percent is the pure colour at full strength. HSL measures lightness, where 100 percent is white and the pure colour sits at 50.

The conversion is short. Lightness is value times one minus half the saturation, so L = V × (1 − S/2). Saturation is then recomputed as (V − L) divided by the smaller of L and 1 − L, because the two models measure it against different ranges. That is why pure red is hsv(0, 100%, 100%) but hsl(0, 100%, 50%), and why a pale blue at hsv(210, 30%, 100%) becomes hsl(210, 100%, 85%) without the colour moving at all.

The practical reason to convert is that CSS has no hsv() function. A value copied out of a picker has to become HSL, RGB, or hex before it goes in a stylesheet, which is what pasting it here does. Going from HSL to HSV is the reverse errand: matching a colour from your CSS in a design tool whose picker only takes HSB.

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 under the swatch show the colour set as real text on each, 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.