T
css colors oklch color-mix design

Modern CSS Color Guide: OKLCH, color-mix(), and the Future of Web Design

Explore the next generation of CSS color. A complete guide to OKLCH, color-mix(), LCH, and Relative Color Syntax.

2026-04-12

Modern CSS Color Guide: OKLCH, color-mix(), and the Future of Web Design

Colors are the soul of web design, but for decades, we've been trapped in the limitations of sRGB and non-perceptual color spaces like RGB and HSL. Modern CSS has shattered these boundaries, introducing a new era of high-definition, perceptually uniform, and dynamic color systems.

In this guide, we’ll explore the revolutionary color functions and features that are changing the way we define and manipulate colors in CSS.

2. Dynamic Manipulation with color-mix()

One of the most powerful new additions to CSS is the color-mix() function. It allows you to mix two colors directly in your stylesheet, eliminating the need for complex Sass calculations or JavaScript.

Syntax: color-mix(in [color-space], [color1] [percentage], [color2] [percentage])

Example: Creating an Instant Hover State

.button {
  background: var(--primary-color);
}

.button:hover {
  /* Mix 20% white into the primary color */
  background: color-mix(in oklch, var(--primary-color), white 20%);
}

Mixing in oklch or oklab spaces usually yields much more natural-looking results than mixing in RGB.

3. Mastering LCH and LAB

While OKLCH is generally preferred for its intuitiveness, LCH and LAB are the foundations.

  • LAB: Uses a coordinate system (L for Lightness, a for green-red axis, b for blue-yellow axis).
  • LCH: The polar coordinate version of LAB (Lightness, Chroma, Hue).

These spaces are device-independent and can represent every color visible to humans. They are the "native" way modern browsers handle color internally.

4. The color() Function and Display-P3

The color() function is a generic way to access specific color spaces, such as display-p3, a98-rgb, or prophoto-rgb.

/* Accessing the wide-gamut P3 space */
.p3-green {
  color: color(display-p3 0 1 0); /* Purest P3 green */
}

If a device doesn't support the specified space, CSS will automatically fallback to the closest sRGB equivalent.

5. Adapting to Themes with light-dark()

As dark mode becomes a standard requirement, the light-dark() function simplifies theme switching. It automatically picks the first value for light mode and the second for dark mode, based on the user's system preferences.

body {
  background-color: light-dark(#ffffff, #121212);
  color: light-dark(#333333, #efefef);
}

6. Relative Color Syntax (RCS)

Relative Color Syntax is perhaps the most advanced color feature. It allows you to "destructure" an existing color, modify one of its components, and create a new color—all in one line.

/* Take an existing color and change its opacity or lightness */
.card {
  --base-color: #3498db;
  background: oklch(from var(--base-color) 80% c h); /* Increase lightness to 80% */
  border-color: oklch(from var(--base-color) l c h / 0.5); /* Keep color, add 50% opacity */
}

Summary of Modern CSS Color Functions

Function Best For Support
oklch() Perceptually uniform design, accessible palettes Modern Browsers
color-mix() Mixing colors (hover states, overlays) Modern Browsers
light-dark() Easy Dark Mode support New (Checking support)
RCS Deriving colors from variables Emerging

Conclusion

Modern CSS has turned color from a static value into a dynamic, programmable system. By leveraging OKLCH for precision and color-mix() for flexibility, you can create web experiences that are not only more beautiful but also more accessible and performant.

Ready to upgrade your design? Start experimenting with our Color Converter and stay tuned for our upcoming OKLCH Color Picker and CSS Color Mix Generator!

Back to Blog