Toolcedar

Hex, RGB, HSL or OKLCH: Which Should You Use?

Four ways to write the same colour, with different strengths. Why HSL lies about brightness, and what OKLCH fixes that the others cannot.

· 2 min read

All four describe the same colours and differ only in what they make easy. Hex is compact, RGB is explicit, HSL is adjustable, and OKLCH is the only one where the numbers correspond to what your eye actually sees. That last distinction matters more than it sounds, and it is the reason design systems have been migrating.

Hex and RGB are the same thing

A hex colour is three bytes written in base 16, and an RGB triple is the same three bytes in decimal. There is no difference in capability, only in convenience: hex is shorter to type and easier to paste, RGB is easier to read when a channel is being computed. Neither tells you anything useful about the colour without converting it in your head first.

#3b82f6   rgb(59 130 246)   the same colour, two notations

Neither one answers: is this lighter than #22c55e?

HSL is adjustable, and it lies

HSL separates hue, saturation and lightness, which finally makes a colour editable: lower the lightness for a darker variant, keep the hue for a palette. The problem is that its lightness is a geometric construct, not a perceptual one. Yellow at fifty percent lightness looks far brighter than blue at fifty percent lightness, so a palette built by holding lightness constant produces swatches that do not look like a set.

In HSL, two colours with identical lightness can differ by a factor of several in how bright they actually appear.

What OKLCH fixes

OKLCH is built on a model tuned against how human vision responds rather than on how a monitor mixes light. Its lightness axis is perceptual, so two colours with the same L genuinely look equally bright. Change only the hue and the perceived brightness stays put, which is precisely the operation every theme and every palette needs and the one HSL cannot do reliably.

  • Hex: shortest to write, fine for a fixed value, useless for reasoning.
  • RGB: same information, easier when channels are being calculated.
  • HSL: editable, but its lightness does not match perception.
  • OKLCH: perceptually uniform, so palettes and dark themes derive predictably.

The catch with wide gamut

OKLCH can describe colours outside sRGB, which is a feature on a modern display and a hazard when a value has to fall back. A chroma that is perfectly valid in the notation may not be reproducible on an older screen, and the browser will clip it. Keeping chroma moderate keeps the colour predictable everywhere, which is usually what a UI palette wants anyway.

A practical rule

Use OKLCH for anything you intend to derive from — theme tokens, palettes, hover and disabled states, light and dark pairs. Use hex for one-off values pasted from a design file, since converting them buys nothing. The choice only matters where arithmetic happens; a colour that is never adjusted can be written in whatever notation is nearest to hand.

Frequently asked questions

Is OKLCH supported well enough to use?
It is supported across current browsers, and CSS lets you supply a fallback declaration immediately before it. Older engines ignore the rule they cannot parse and keep the previous value.
What is the difference between OKLCH and LCH?
Both are cylindrical perceptual spaces, but OKLCH is based on the newer Oklab model, which fixes a hue shift the older CIE Lab basis shows in blues and purples. For interface work OKLCH behaves more predictably.
Does converting between formats lose information?
Round-tripping through hex or RGB quantises each channel to 256 steps, so repeated conversions can drift. Converting once for display is harmless; storing the derived value and converting again later is what accumulates error.

Related reading