←Back to all tools

Colour Converter: HEX, RGB, HSL & OKLCH

One colour in, every CSS notation out. Pick with the swatch or paste a hex value and copy whichever format you need.

HEX, RGB, HSL and OKLCH describe the same colours in different ways. Knowing which to reach for makes palettes easier to build and themes easier to maintain.

How to use it

  1. 1Pick a colour with the swatch or paste a HEX value.
  2. 2Read the equivalent RGB, HSL and OKLCH values.
  3. 3Copy whichever notation your stylesheet needs.

The four notations

HEX is the compact form, six hexadecimal digits for red, green and blue, optionally two more for alpha. It's precise and universally supported but completely unreadable: nothing about #4A90D9 tells you it's a mid blue.

RGB is the same numbers in decimal. Easier to script against, still hard to reason about visually. HSL splits colour into hue, saturation and lightness, which is far more intuitive, you can shift a hue by 30 degrees or drop lightness by 10% and predict what happens.

OKLCH is the modern one, and the reason it exists is that HSL lies. In HSL, yellow at 50% lightness and blue at 50% lightness look nothing alike in brightness. OKLCH is built on a perceptually uniform colour space, so equal lightness values genuinely look equally light. It also reaches colours outside sRGB on wide-gamut displays.

Why OKLCH is worth switching to

Perceptual uniformity solves the problems that make palettes tedious. Generating a tint scale by stepping lightness produces evenly spaced steps rather than a scale that bunches up in the mid-tones. Rotating hue at fixed lightness and chroma gives you a set of accent colours that all carry the same visual weight, the thing that usually takes an afternoon of manual nudging.

It's supported across all current major browsers. If you need to support older ones, ship a HEX fallback declaration first and let OKLCH override it.

Contrast and accessibility

Converting a colour tells you what it is, not whether it's usable. WCAG 2.1 asks for a contrast ratio of at least 4.5:1 for normal body text against its background, and 3:1 for large text (18pt, or 14pt bold) and for meaningful interface components. Check the pairing, not the colour on its own.

One practical note: contrast ratio is computed from relative luminance, so two colours with identical OKLCH lightness will have near-identical contrast against a shared background. That makes OKLCH a convenient place to design accessible palettes, because you can fix lightness first and then choose hues freely.

Common questions

Should I use OKLCH or HSL in production CSS?
OKLCH, if you don't need legacy browser support. It behaves predictably when you build scales and variations, which HSL doesn't. Provide a HEX fallback if older browsers matter.
Why does the OKLCH value look nothing like the HSL one?
They use different models. HSL lightness is a simple maths average of the RGB channels; OKLCH lightness models how bright a colour actually appears to a human eye. The colour is the same, the description isn't.
What does the eight-digit HEX form mean?
The last two digits are alpha, 00 is fully transparent, FF fully opaque. So #4A90D980 is that blue at roughly 50% opacity.
Can OKLCH produce colours my monitor can't show?
Yes. High chroma values can fall outside the sRGB gamut. Browsers clamp them to the nearest displayable colour on standard screens, and show the full colour on wide-gamut displays.
Is the conversion done on a server?
No. All four notations are calculated in your browser as you type.