Color Code Converter

Five notations, one color

• 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 color is from black. It is the model behind most color 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 colors 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 colors 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.

The color codes 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 colors for legibility, take them to the contrast checker.