HEX, RGB, HSL & OKLCH: Which Colour Code Should You Use?

CSS gives you at least four ways to write the same colour. Four. For a job that sounds like it should need one. If you've ever wondered whether it matters which you pick — it does, but not for the reason most people think.

Here's each format in plain terms, and the one question that tells you which to reach for.

HEX and RGB: the machine's point of view

These two are twins. Both describe a colour as three amounts of light — red, green, blue — each from 0 to 255. #FF6B6B and rgb(255, 107, 107) are the exact same coral; hex just writes the numbers in base 16 to save space.

They're honest about how a screen works, which is also their weakness. Look at rgb(255, 107, 107) and try to guess what it looks like. You can't, not really. The numbers describe hardware, not perception. Great for a computer, awkward for a human trying to make a colour a bit lighter.

HSL: the human's first attempt

HSL was designed to fix exactly that. It describes a colour the way you'd describe it out loud: its hue (which colour, as an angle on the wheel from 0 to 360), its saturation (how vivid, 0–100%), and its lightness (how bright, 0–100%).

Now the numbers mean something. hsl(0, 100%, 71%) is our coral, and you can read it: hue 0 is red, fully saturated, fairly light. Want it darker? Drop the last number. Want it duller? Drop the middle one. For tweaking by intent instead of by trial, HSL is a huge step up — which is why it stuck around for years.

It has one quiet flaw, though, and it's a big one.

OKLCH: the one that actually matches your eye

HSL lies about lightness. In HSL, a yellow at 50% lightness and a blue at 50% lightness are supposedly equally bright. Put them side by side and the yellow glows while the blue sinks. The number says they match; your eye says they're miles apart.

OKLCH fixes this. It uses the same friendly idea — lightness, chroma (its word for saturation), hue — but it's built on a model of how humans actually perceive brightness. When two OKLCH colours share a lightness value, they genuinely look equally bright. That sounds academic until you try to build a set of buttons in five colours that all feel like they belong; in HSL you'll fight it, in OKLCH it falls out for free.

It also reaches colours the older formats can't describe at all, ready for the wider gamuts modern screens can show. The tradeoff is newness — very old browsers don't understand it — but that gap is closing fast.

The one question to ask

Forget memorising four syntaxes. Ask what you're doing:

• Copying a fixed colour into code? HEX. It's compact and every tool speaks it.
• Need transparency? rgba() (or an 8-digit hex).
• Adjusting a colour by feel — lighter, duller, shift the hue? HSL is fine, OKLCH is better.
• Building a system where colours must relate evenly — scales, themes, states? OKLCH, every time.

You don't have to choose blind

The good news: you never have to convert between these in your head. Drop any colour into the Converter and it shows all four formats at once, each a click to copy. If you're mixing or building scales where even steps matter, the Mixer blends in OKLCH so the in-between shades don't turn muddy.

Common questions

Is OKLCH going to replace HEX?

No. HEX will stay the default for pasting a single fixed colour. OKLCH wins where colours need to relate to each other — which is a different job.

Do I need to learn all four?

You need to recognise them. You'll mostly write two: HEX for fixed values, and HSL or OKLCH when you're adjusting. A converter handles the rest.

The formats aren't rivals so much as tools for different moments. Machines like HEX and RGB. Humans like HSL. And when you need colours that behave the way they look, OKLCH is the one to know. See them all lined up for any colour in the Converter.