Color Formats & OKLCH

Understand how CSS defines colors, and why OKLCH is the modern standard for perfect palettes.

CSS5 min readConcept 12 of 43

What it is

CSS supports several ways to define colors. Historically, developers used HEX (e.g., #FF5733) and RGB (rgb(255, 87, 51)). While computers understand these perfectly, they are very difficult for humans to adjust.

Modern CSS gives us OKLCH (oklch(lightness chroma hue)). It is a color space designed around human perception, ensuring that colors behave exactly how our eyes expect them to.

Why it matters

If you try to build a design system using HSL (Hue, Saturation, Lightness), you will hit a major flaw: HSL is mathematically uniform, but not visually uniform.

For example, in HSL, yellow at 50% lightness looks incredibly bright, while blue at 50% lightness looks very dark. If you build buttons using these colors, the white text inside them will have inconsistent contrast.

OKLCH fixes this. If you set Lightness to 60%, every single hue (red, green, blue, yellow) will look equally bright to the human eye, guaranteeing consistent contrast.

How it works

The OKLCH syntax is simple and doesn't require commas: oklch(L C H / alpha).

**L (Lightness)**: A percentage from 0% (black) to 100% (white).

**C (Chroma)**: The intensity or purity of the color, usually ranging from 0 (gray) to around 0.37 (vibrant).

**H (Hue)**: An angle from 0 to 360 degrees on the color wheel (e.g., 0 is red, 140 is green, 250 is blue).

Try it

Use the sliders to adjust Lightness, Chroma, and Hue, and see how perceptually uniform OKLCH is compared to HSL.

Live Color

oklch(65% 0.2 250)
Lightness (L)65%

0% (Black)100% (White)

Chroma (C)0.20

0 (Gray)0.37 (Vibrant)

Hue (H)250

0 (Red)360 (Red)

Why OKLCH? Perceptual Uniformity

In HSL, "50% Lightness" means something mathematically, but our eyes see yellow as much brighter than blue. OKLCH fixes this: if you set Lightness to 75%, both colors appear equally bright.

HSL (L = 50%)

hsl(60, 100%, 50%)
hsl(240, 100%, 50%)

Yellow is blinding, blue is dark.

OKLCH (L = 75%)

oklch(75% 0.2 100)
oklch(75% 0.2 260)

Both share identical perceived brightness.

Because OKLCH is uniform, you can build a design system (like Tailwind v4) where text contrast is guaranteed to be accessible across any hue as long as the Lightness value is consistent.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What is the main advantage of the OKLCH color space over older formats like HSL?
  2. 2In the function oklch(L C H), what does the 'C' stand for?
  3. 3Why are HEX codes (like #FF0000) notoriously difficult for creating design systems?

Remember this

  • OKLCH stands for Lightness, Chroma, and Hue.
  • OKLCH is perceptually uniform, making it the perfect tool for consistent contrast.
  • Chroma (C) controls how grayscale or vibrant the color is.
  • You can add transparency using a slash: oklch(L C H / 50%).

Done with this concept?

Mark it complete to track your progress. No login needed.