OKLCH for designers: why switch from HSL

# Why HSL was always a lie

In HSL, hsl(0 100% 50%) (pure red) and hsl(120 100% 50%) (pure green) both claim to be "50% lightness." Look at them side by side and they're not even close — the green is much brighter.

That's because HSL is a math convenience, not a perceptual model. The "50%" has nothing to do with how light the color looks to a human eye.

This matters every time you:

• Generate a color scale by varying lightness (primary-100, primary-200, …)
• Pick an accessible text color on a colored background
• Try to make two accent colors "the same brightness"

# What OKLCH actually is

OKLCH has three components:

• L — perceptual lightness, 0 to 1. A color at L=0.5 looks equally light regardless of its hue.
• C — chroma (vividness), 0 and up. 0 is grey. Practical max is around 0.4.
• H — hue angle in degrees, 0–360.

color: oklch(0.7 0.2 285);   /* violet, medium-light */
color: oklch(0.7 0.2 25);    /* orange-red at the same lightness */

Those two colors really look equally light. Try it — paste them into our Color Converter.

# Practical wins

<div class="callout callout-tip" role="note"><div class="callout-title">Tip</div><div class="callout-body"><p>In OKLCH, "50% lightness" actually means 50% lightness. You can generate a color scale just by stepping L from 0.1 to 0.9 and every stop feels right. HSL scales require hand-tuning the L values per hue.</p></div></div>

# 1. Uniform color scales

For a Tailwind-style scale:

--primary-50:  oklch(0.97 0.02 285);
--primary-100: oklch(0.94 0.05 285);
--primary-200: oklch(0.89 0.1 285);
/* … step L from 0.97 → 0.2, keep H fixed */
--primary-900: oklch(0.25 0.15 285);

Perceptually uniform by construction. This site is built on this pattern.

# 2. Accessible contrast by construction

WCAG contrast depends on luminance, which correlates with OKLCH L much better than HSL L. If your background is oklch(0.2 … …) and your text is oklch(0.9 … …), the contrast will be high regardless of hue. With HSL, you'd have to check every hue separately.

Verify any pair in our Contrast Checker.

# 3. Better gradients

HSL gradients often muddy in the middle (the yellow region, specifically). OKLCH interpolates through perceptual space so the midpoint looks like a clean blend.

background: linear-gradient(to right,
  oklch(0.7 0.3 25),   /* red-orange */
  oklch(0.7 0.3 285)); /* violet */

# The 5% catch

OKLCH can describe colors outside the sRGB gamut — colors your screen can't display. When this happens, the browser clamps to the nearest displayable one. You might see a slight shift vs what you typed.

This isn't a bug. It's telling you the color you asked for isn't physically available. Lower the chroma until it fits.

# Fallback for old browsers

.brand {
  color: #7c5cff;                    /* fallback */
  color: oklch(0.65 0.2 285);        /* modern */
}

CSS cascade takes care of the rest. Browsers that don't understand oklch() ignore that line and keep the HEX.

# Tooling

• Color Converter — HEX ↔ RGB ↔ HSL ↔ OKLCH with a live preview
• Contrast Checker — WCAG AA/AAA verification
• Tailwind Color Finder — map any color to the closest Tailwind class

# Related posts

• PNG vs JPG vs WebP