Color spaces: hex, RGB, HSL, OKLCH and when each fits

Apr 26, 2026 2 min read

CSS lets you write the same color as #ff8c42, rgb(255, 140, 66), or hsl(22, 100%, 63%). Modern browsers also accept oklch(70% 0.16 47). Each format exists for a reason — this article walks through the differences and when each fits.

Hex: the traditional HTML/CSS format

#RRGGBB six-digit or #RGB three-digit shorthand.

#ff8c42 — R=255, G=140, B=66 in hexadecimal
#f84 — shorthand for #ff8844

Pros: short, universally supported. Cons: hard to read color intent at a glance.

RGB: explicit channel numbers

rgb(255, 140, 66) or rgb(100%, 55%, 26%). Each channel 0–255 or 0–100%. rgba() for alpha.

CSS Color Module Level 4 also accepts space-separated rgb(255 140 66 / 0.5).

HSL: hue, saturation, lightness

hsl(22, 100%, 63%) — hue (0–360°), saturation (%), lightness (%).

Rotating hue gives related colors → palette design is intuitive.
Adjusting lightness gives darker / brighter versions of the same color.

Catch: HSL “lightness” doesn’t match perceived brightness. hsl(60, 100%, 50%) (yellow) and hsl(240, 100%, 50%) (blue) share L=50%, yet yellow looks dramatically brighter.

OKLCH: a perceptually uniform space

oklch(70% 0.16 47) — lightness (%), chroma (0 to ~0.4), hue (degrees).

OKLab/OKLCH are perceptually uniform — equal L values look equally bright across hues.

Why it matters:

Gradients look natural (HSL gradients have visible mid-band shifts).
Lightness aligns with accessibility calculations (contrast ratios).
Building palettes at “same brightness, different hue” becomes easy.

CSS support: Chrome 111+, Safari 16.4+, Firefox 113+ ship oklch().

Conversion outline

hex → RGB:    parse hex, integers 0–255
RGB → hex:    format as hex
RGB → HSL:    derive from max/min channels
RGB → OKLCH:  sRGB → linear RGB → XYZ → OKLab → polar

OKLCH conversion needs matrix math but pays off in usability.

Picking by use case

Need	Format
Single static color	hex (short, traditional)
Color with transparency	rgba / `rgb()` with alpha
Palette generation	HSL (hue rotation)
Smooth gradients	OKLCH
Light/dark mode pairs	OKLCH (lightness inversion is clean)

Modern CSS systems increasingly use OKLCH internally (e.g. Tailwind CSS v4).

To convert between forms or pick a representation, the color converter on this site shows the same color in hex / RGB / HSL / OKLCH side by side.