Colour converter: HEX, RGB, HSL, OKLCH

The four formats, briefly

• HEX (#009bf9) is the red, green, and blue channels in base 16. It is compact and universal, and an optional fourth pair adds alpha.
• RGB (rgb(0 155 249)) is the same three channels in decimal. Modern CSS separates them with spaces and writes alpha after a slash.
• HSL (hsl(203 100% 49%)) describes hue, saturation, and lightness. It is easy to reason about, but its lightness does not match what you see.
• OKLCH (oklch(65% 0.18 240)) describes perceptual lightness, chroma, and hue. It is the format Tailwind CSS v4 uses for its default palette.

Why design systems are moving to OKLCH

In OKLCH, changing only the lightness gives you a lighter or darker version of the same colour that still looks like the same hue, and two colours with the same lightness look about equally bright. That makes it a better space for generating shade scales and for predicting contrast than HSL. The trade-off is that OKLCH can describe colours a typical sRGB screen cannot show, so tools have to map them back into gamut. OKLCH colours in CSS for design systems covers this in depth.

How this converter works

Everything runs in your browser; nothing is sent anywhere. The converter parses HEX in all four lengths and the rgb(), hsl(), and oklch() functions in both modern space-separated and legacy comma syntax. OKLCH values use the OKLab definition by Björn Ottosson, and out-of-gamut colours are reduced in chroma at constant lightness and hue. The values are rounded for display: OKLCH to two decimals of lightness and four of chroma, which is far below what the eye can distinguish.

Next steps

Turn a converted colour into a full 50 to 950 scale with the Tailwind colour scale generator, check it against its background with the contrast checker, or see how Aback UI names its colours by role on the colours page.