HEX, RGB, HSL and OKLCH: A Designer's Guide to Color Spaces

#F42C2C, rgb(244, 44, 44), hsl(0, 90%, 56%), oklch(0.6 0.23 27) — four ways to write the same red. They look like trivia, but each notation organises color differently, and choosing the right one changes how easy your design system is to maintain. Here’s what each actually represents and when to reach for it.

HEX and RGB: the same thing in different clothes

A HEX code like #F42C2C is just three bytes — red, green, blue — written in hexadecimal. F4 = 244, 2C = 44, 2C = 44. So HEX and RGB are identical information: both describe how much of each colored light to mix.

#F42C2C  →  rgb(244, 44, 44)

RGB is how screens physically work, which makes it perfect for storage and terrible for reasoning. Quick — make rgb(244, 44, 44) 20% darker. You can’t, not in your head, because brightness is smeared across all three channels. That’s the problem the next two notations solve.

HSL: human-friendly, but it lies about brightness

HSL (Hue, Saturation, Lightness) re-organises color into dimensions people actually think in:

• Hue — position on the color wheel (0–360°). Red is 0, green 120, blue 240.
• Saturation — how vivid vs. grey.
• Lightness — how light vs. dark.

This is wonderful for generating variations: keep hue and saturation, change lightness, and you get a tint ramp. But HSL has a notorious flaw — its “lightness” is not perceptual. hsl(60, 100%, 50%) (yellow) and hsl(240, 100%, 50%) (blue) claim the same 50% lightness, yet the yellow looks blindingly brighter than the blue. Build a UI palette on HSL and your “same lightness” colors will look wildly uneven.

OKLCH: perceptual color for the modern web

OKLCH (Lightness, Chroma, Hue) fixes exactly that. It’s built on the OKLab perceptual color model, so its lightness value corresponds to how bright a color looks to human eyes:

oklch(0.6 0.23 27)   /* L = perceived lightness, C = chroma, H = hue */

The payoff: pick a lightness, sweep the hue, and every color in the ramp looks equally bright. That makes OKLCH ideal for accessible, consistent design systems — your buttons, badges and charts stay legible across hues. It’s now supported in all modern browsers, and it can describe colors outside the old sRGB gamut for wide-gamut displays.

Which should you use?

Use case	Best notation
Storing a brand color	HEX / RGB
Quick tints and shades	HSL (or OKLCH)
Accessible, even palettes	OKLCH
Wide-gamut / P3 displays	OKLCH

A practical workflow: keep your brand colors as HEX for portability, then generate UI ramps in OKLCH so lightness stays honest. The Color Converter translates any color between all four notations instantly, so you can author in whichever space fits the task and export to whichever your codebase needs.

It’s part of a system

Color rarely travels alone. A coherent interface also needs consistent type sizing — the Typography Scale calculator builds a modular scale so your headings and body text relate harmoniously. And when you’re exporting hero images or social cards, the Aspect Ratio resizer keeps dimensions clean across breakpoints.

Frequently asked questions

Is OKLCH always better than HSL? For perceptual consistency, yes. HSL is still convenient and fine for casual tweaks, but for a palette where colors must feel balanced, OKLCH wins.

Will OKLCH break in older browsers? Provide a HEX/RGB fallback for very old browsers, but support is now broad across current Chrome, Safari, Firefox and Edge.

Do HEX and RGB ever differ? No — they encode identical sRGB values. HEX is just a compact text form of the same three numbers.

Try converting your brand color across every space on the Color Converter and see how much easier OKLCH makes building an even palette.