Using OKLCH Colors in Tailwind CSS

What is OKLCH?

OKLCH stands for Lightness, Chroma, Hue in the Oklab perceptual color space. Unlike HSL, equal steps in lightness produce visually equal brightness changes. This makes palette generation more predictable.

OKLCH Syntax

/* oklch(Lightness Chroma Hue) */
/* Lightness: 0 (black) to 1 (white) */
/* Chroma: 0 (gray) to ~0.4 (vivid) */
/* Hue: 0-360 degrees */

.brand-palette {
  --brand-50:  oklch(0.97 0.01 250);
  --brand-100: oklch(0.93 0.03 250);
  --brand-300: oklch(0.80 0.08 250);
  --brand-500: oklch(0.65 0.15 250);
  --brand-700: oklch(0.45 0.12 250);
  --brand-900: oklch(0.25 0.08 250);
}

Using OKLCH in Tailwind Config

// tailwind.config.js (v3)
module.exports = {
  theme: {
    extend: {
      colors: {
        ocean: {
          100: 'oklch(0.93 0.03 230)',
          500: 'oklch(0.60 0.16 230)',
          900: 'oklch(0.25 0.08 230)',
        }
      }
    }
  }
}

/* Or in v4 CSS */
/* @theme { --color-ocean-500: oklch(0.60 0.16 230); } */

Why OKLCH Beats HSL for Palettes

• Equal lightness steps produce equal perceived brightness
• Chroma control prevents oversaturated yellows or muddy blues
• Hue remains stable as you lighten or darken, unlike HSL
• Wide-gamut colors beyond sRGB are naturally supported
• Browser support is strong in all modern browsers