CSS modern color functions and color spaces

Need to use modern CSS color features: oklch, color-mix, relative colors, and wide-gamut colors.

Modern CSS color features:

/* 1. oklch - Perceptually uniform color space */
:root {
  --primary: oklch(65% 0.25 260);     /* Lightness Chroma Hue */
  --primary-light: oklch(80% 0.15 260);
  --primary-dark: oklch(45% 0.20 260);
  /* Same hue, predictable lightness changes! */
  /* Unlike HSL where L=50% looks different per hue */
}

/* 2. color-mix() - Blend two colors */
.muted {
  /* Mix 70% primary with 30% gray */
  color: color-mix(in oklch, var(--primary) 70%, gray);
}

.overlay {
  /* 50/50 mix */
  background: color-mix(in srgb, blue, white);
}

/* 3. Relative colors - Modify existing colors */
.card {
  --bg: oklch(from var(--primary) calc(l + 0.2) c h);
  /* Take primary, increase lightness by 0.2 */
  background: var(--bg);
}

.hover-effect:hover {
  /* Darken on hover */
  background: oklch(from var(--primary) calc(l - 0.1) c h);
}

/* Semi-transparent version of any color */
.glass {
  background: oklch(from var(--primary) l c h / 0.5);
}

/* 4. Generate a full palette from one hue */
:root {
  --hue: 260; /* Blue-purple */
  --50:  oklch(97% 0.02 var(--hue));
  --100: oklch(93% 0.05 var(--hue));
  --200: oklch(85% 0.10 var(--hue));
  --300: oklch(75% 0.15 var(--hue));
  --400: oklch(65% 0.20 var(--hue));
  --500: oklch(55% 0.25 var(--hue));
  --600: oklch(45% 0.20 var(--hue));
  --700: oklch(35% 0.18 var(--hue));
  --800: oklch(25% 0.12 var(--hue));
  --900: oklch(15% 0.08 var(--hue));
}

/* 5. Automatic dark mode with color-mix */
@media (prefers-color-scheme: dark) {
  :root {
    --text: color-mix(in oklch, white 90%, var(--primary));
    --bg: color-mix(in oklch, black 85%, var(--primary));
  }
}

/* 6. Complementary color */
.accent {
  /* Rotate hue by 180 degrees for complement */
  color: oklch(from var(--primary) l c calc(h + 180));
}

Browser support: oklch, color-mix, and relative colors supported in all modern browsers (2024+).

oklch provides perceptually uniform color manipulation - adjusting lightness gives predictable visual results across all hues. color-mix and relative colors eliminate manual color math.

Modern CSS design systems