CSS Color Level 4: Complete Guide

CSS Color Module Level 4 brings powerful new color functions and capabilities to the web, with OKLCH being one of the most significant additions.

New Color Functions

oklch() - Perceptual Color Space

.element {
  color: oklch(0.60 0.20 250);
  /* Lightness Chroma Hue */
}

color-mix() - Mix Any Colors

.mixed {
  /* Mix 50% blue with 50% yellow */
  background: color-mix(in oklch, blue, yellow);
  
  /* Custom percentages */
  background: color-mix(in oklch, blue 70%, yellow 30%);
}

Relative Color Syntax

.element {
  --base: oklch(0.60 0.20 250);
  
  /* Lighter version */
  --light: oklch(from var(--base) calc(l + 0.20) c h);
  
  /* More saturated */
  --vivid: oklch(from var(--base) l calc(c * 1.5) h);
  
  /* Different hue */
  --shifted: oklch(from var(--base) l c calc(h + 30));
}

Color Spaces

CSS Color 4 supports multiple color spaces:

srgb - Standard RGB
display-p3 - Wide gamut
oklch - Perceptual (our focus)
oklab - Perceptual, rectangular
rec2020 - Ultra wide gamut

/* Specify color space for mixing */
.element {
  background: color-mix(in oklch, red, blue);
  background: color-mix(in srgb, red, blue);  /* Different result */
}

Practical Examples

Dynamic Theming

:root {
  --hue: 250;
  --primary: oklch(0.60 0.20 var(--hue));
  --primary-light: oklch(from var(--primary) calc(l + 0.20) c h);
  --primary-dark: oklch(from var(--primary) calc(l - 0.20) c h);
}

/* Change theme by changing hue */
.theme-blue { --hue: 250; }
.theme-green { --hue: 140; }
.theme-red { --hue: 30; }

Automatic Tints and Shades

.button {
  --color: oklch(0.55 0.20 250);
  background: var(--color);
  
  /* Hover: 10% lighter */
  &:hover {
    background: oklch(from var(--color) calc(l + 0.10) c h);
  }
  
  /* Active: 10% darker */
  &:active {
    background: oklch(from var(--color) calc(l - 0.10) c h);
  }
}

Contextual Colors

.alert {
  --alert-color: oklch(0.55 0.22 30);  /* Red */
  
  /* Background: much lighter version */
  background: oklch(from var(--alert-color) 0.95 calc(c * 0.3) h);
  
  /* Border: slightly darker */
  border: 1px solid oklch(from var(--alert-color) calc(l - 0.10) c h);
  
  /* Text: much darker for contrast */
  color: oklch(from var(--alert-color) 0.25 calc(c * 0.8) h);
}

Browser Support

Current support (as of 2024):

Feature	Chrome	Safari	Firefox	Edge
oklch()	111+	15.4+	113+	111+
color-mix()	111+	16.2+	113+	111+
Relative syntax	119+	16.4+	128+	119+

Fallback Strategies

.element {
  /* Fallback for older browsers */
  background: #4080ff;
  
  /* Modern browsers */
  background: oklch(0.60 0.20 250);
}

@supports (background: oklch(0 0 0)) {
  .element {
    /* Advanced CSS Color 4 features */
    background: color-mix( in oklch, oklch(0.60 0.20 250), white 20%);
  }
}

Conclusion

CSS Color Level 4 represents a major leap forward in color capabilities. OKLCH, combined with color-mix() and relative color syntax, gives developers unprecedented control over colors.

Learn more: