Colour converter

Five notations, one colour

• HEX writes the red, green and blue channels as three pairs of hexadecimal digits, from 00 to ff. A fourth pair, when present, is the opacity.
• RGB is the same three channels as numbers from 0 to 255. It is how a screen is addressed.
• HSL turns them into a hue angle, a saturation and a lightness, which is easier to adjust by hand.
• HSV, also called HSB, keeps the hue and saturation but measures value: how far the colour is from black. It is the model behind most colour pickers, this one included.
• OKLCH describes lightness, chroma and hue as the eye perceives them. It is part of CSS and understood by every current browser.

Why OKLCH is worth learning

HSL’s lightness is arithmetic, not vision: at 50% lightness its yellow is glaring and its blue is dark. In OKLCH two colours with the same lightness look equally light, whatever their hue. That makes it the notation of choice for building a palette: change the hue and keep the contrast, or step the lightness evenly and get a ramp that looks even.

It can also name colours that the standard sRGB screen cannot show. When a value falls outside, the converter lowers its chroma until it fits, keeping lightness and hue, and says so. Browsers do the same.

What you can paste

Hex codes with or without the #, in three, four, six or eight digits. rgb() and hsl() with commas or spaces, percentages, and an opacity after a comma or a slash. hsv() or hsb() as design tools write them. oklch() with its lightness as a percentage or a number.

To check a pair of colours for legibility, take them to the contrast checker.