oklch() & Modern Color Spaces

oklch() is a perceptually uniform colour space — equal numerical changes produce equal visual changes. Unlike hsl(), where lightening yellow looks different from lightening blue, oklch() palettes feel visually consistent. It also supports wide-gamut P3 colours for modern displays.

oklch() syntax

CSS

/* oklch(lightness chroma hue) */
color: oklch(0.55 0.2 264);      /* vibrant blue */
color: oklch(0.7 0.15 145);      /* medium green */
color: oklch(0.9 0.05 80);       /* light yellow */
color: oklch(0.55 0.2 264 / 0.8); /* with alpha */

/* Lightness: 0 (black) to 1 (white) */
/* Chroma: 0 (grey) to ~0.37+ (vivid) */
/* Hue: 0-360 degrees */

Building palettes with oklch()

CSS

/* Perceptually uniform palette */
:root {
  --brand-hue: 264;
  --palette-900: oklch(0.20 0.15 var(--brand-hue));
  --palette-700: oklch(0.35 0.18 var(--brand-hue));
  --palette-500: oklch(0.50 0.20 var(--brand-hue));
  --palette-300: oklch(0.65 0.18 var(--brand-hue));
  --palette-100: oklch(0.92 0.05 var(--brand-hue));
}
/* Each step feels equally different — unlike hsl() palettes */

Other modern spaces

CSS

/* lch() — same as oklch() but older/less uniform */
color: lch(50 50 264);

/* lab() — rectangular coordinates */
color: lab(50 50 50);

/* P3 — wide-gamut colour */
color: color(display-p3 1 0.5 0);  /* more vivid oranges/reds/blues */

/* Fallbacks for older browsers */
@supports (color: oklch(0 0 0)) {
  :root { --accent: oklch(0.55 0.2 264); }
}
@supports not (color: oklch(0 0 0)) {
  :root { --accent: #0066cc; }
}

Mixing colours at runtime — the colour-mix() function: [color-mix() & relative colors](/css/color-mix).