ai CSS: color systems 2026-06-06

ai generated

Relative Color Syntax (CSS Color 5) — Derive new colors from existing ones by modifying channels.

--base: oklch(60% 0.2 240);
background: oklch(from var(--base) calc(l * 1.2) c h); /* Lighter version */

ai generated

color: color(display-p3 0 1 0);           /* bright green in P3 */
color: color(display-p3 1 0.3 0 / 0.8);   /* with alpha */

@media (color-gamut: p3) {
  .vibrant { background: color(display-p3 1 0 0.5); }
}

5. Color Utilities

color-mix()

Mix two (or more) colors in any space.

color: color-mix(in oklch, blue, yellow 30%);        /* 70% blue + 30% yellow */
color: color-mix(in srgb, #ff0000 40%, #00ff00);
color: color-mix(in lch longer hue, red, blue);      /* hue direction control */

Perfect for dynamic themes, hover states, or generating palettes.

Relative Color Syntax (Powerful!)

Derive new colors from an existing one.

--base: oklch(60% 0.2 240);

/* Lighter version */
color: oklch(from var(--base) calc(l + 20%) c h);

/* More saturated */
color: oklch(from var(--base) l calc(c * 1.5) h);

/* Change hue */
color: rgb(from var(--base) r g b);   /* convert spaces too */

This unlocks dynamic theming without preprocessors.

6. Practical Examples

Dark Mode Theme with oklch()

:root {
  --primary: oklch(55% 0.22 260);
  --bg: oklch(95% 0.01 250);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: oklch(65% 0.25 260);
    --bg: oklch(20% 0.03 250);
  }
}

Gradient with Perceptual Uniformity

background: linear-gradient(to right,
  oklch(50% 0.3 0),
  oklch(50% 0.3 120),
  oklch(50% 0.3 240)
);

Button Hover with color-mix()

button {
  background: var(--accent);
  transition: background 0.2s;
}

button:hover {
  background: color-mix(in oklch, var(--accent), white 20%);
}

Browser Support

• rgb/hsl/hex: Universal.
• hwb, lab, lch, oklab, oklch, color(), color-mix(): Excellent in modern browsers (Chrome, Firefox, Safari, Edge).
• Wide gamut (display-p3): Very good, especially on Apple devices and recent Android.
• Relative colors: B support in recent versions.

Check caniuse.com for specifics.

Tips & Best Practices

• Prefer oklch() for UI design.
• Use modern syntax without commas.
• Test on real devices for wide-gamut colors.
• Combine with CSS variables for scalable themes.
• For accessibility, ensure sufficient contrast (tools like color-contrast() coming in future specs).

This covers the essentials and modern capabilities. Experiment in your browser dev tools — color pickers often support these functions now. Happy styling!