T
css color oklch web-design frontend

Modern CSS Color Functions Guide: OKLCH, color-mix(), and Beyond

Master modern CSS color functions like OKLCH, color-mix(), and relative color syntax. Learn why OKLCH is superior to RGB/HSL for accessible web design.

2026-04-18 Use This Tool

Modern CSS Color Functions Guide: OKLCH, color-mix(), and Beyond

The way we define colors on the web is undergoing a massive transformation. For decades, developers relied on rgb() and hex codes, later adopting hsl() for better human readability. However, as display technology evolves (with HDR and Wide Gamut screens) and accessibility becomes a core requirement, these old models are showing their limitations.

Enter the new generation of CSS color functions: OKLCH, color-mix(), and Relative Color Syntax. These tools are not just "new ways to do old things"—they solve fundamental problems in color theory and web accessibility.

1. Why OKLCH is the New Standard

If you've ever tried to create a consistent color palette using HSL, you might have noticed a problem: different hues with the same lightness value don't look equally bright. For example, a "pure blue" and a "pure yellow" at 50% lightness appear vastly different to the human eye.

The Perceptual Uniformity of OKLCH

OKLCH stands for:

  • O: Oklab (the color space it's based on)
  • L: Lightness (perceptual brightness)
  • C: Chroma (intensity or "amount" of color)
  • H: Hue (the angle on the color wheel)

The "K" in OKLCH refers to Perceptual Uniformity. This means that if you keep the Lightness (L) the same and change the Hue (H), the color will appear to have the same brightness to the human eye.

Code Example:

.button-primary {
  /* A beautiful, perceptually balanced blue */
  background-color: oklch(60% 0.15 250);
}

.button-secondary {
  /* Changing the hue while maintaining the exact same perceptual brightness */
  background-color: oklch(60% 0.15 20);
}

Benefits of OKLCH:

  1. P3 Color Gamut Support: Access 50% more colors than standard sRGB (RGB/HEX).
  2. Easier Design Systems: Create accessible themes by simply adjusting the Lightness value.
  3. No "Gray-out": Colors remain vibrant when adjusted, unlike HSL.

2. Mixing Colors Dynamically with color-mix()

The color-mix() function allows you to mix two colors directly in CSS, which previously required a preprocessor like Sass or a JavaScript library.

Syntax: color-mix(in <color-space>, <color1> <percentage>, <color2> <percentage>)

Practical Use Case: Hover States

:root {
  --brand-color: #3b82f6;
}

.btn:hover {
  /* Mix the brand color with 20% white for a perfect tint */
  background-color: color-mix(in oklab, var(--brand-color), white 20%);
}

Mixing colors in the oklab space usually produces the most natural-looking results, avoiding the muddy colors often seen in RGB mixing.

3. Relative Color Syntax: The Future of Color Manipulation

Relative Color Syntax (RCS) is perhaps the most powerful addition to CSS colors. It allows you to take an existing color, break it apart, modify its components, and put it back together.

Syntax Example:

.alert {
  --base-color: blue;
  /* Take 'blue', keep hue and chroma, but set lightness to 90% */
  background-color: oklch(from var(--base-color) 0.9 c h);
  /* Set an alpha channel relative to the original */
  color: oklch(from var(--base-color) l c h / 0.8);
}

This effectively makes every CSS color variable a "factory" for its own variants (tints, shades, transparent versions) without needing a dozen separate variables.

4. Wide Gamut Colors (Display-P3)

Most modern smartphones and laptops (like MacBooks and high-end Androids) support Wide Gamut displays. Traditional CSS colors are limited to the sRGB space, which means they can't show the most vibrant greens, reds, and oranges those screens are capable of.

Using the color() function with display-p3, you can unlock these "HD" colors.

.neon-green {
  /* This green is impossible to represent in standard HEX/RGB */
  color: color(display-p3 0 1 0);
}

5. Better Dark Mode with light-dark()

The new light-dark() function simplifies theme implementation by automatically picking the correct value based on the user's system preferences.

body {
  /* No more complex @media (prefers-color-scheme) blocks for simple colors */
  background-color: light-dark(#ffffff, #1a1a1a);
  color: light-dark(#333333, #efefef);
}

FAQ: Frequently Asked Questions

Q: Why should I use OKLCH instead of HSL?

A: HSL is not perceptually uniform. If you change the hue in HSL while keeping lightness at 50%, the brightness will appear to fluctuate wildly. OKLCH fixes this, making it much easier to build accessible design systems and consistent UI components.

Q: Is OKLCH supported in all browsers?

A: As of 2024, OKLCH, color-mix(), and Relative Color Syntax are supported in all major evergreen browsers (Chrome, Firefox, Safari, Edge). For older browsers, you should provide a HEX fallback.

Q: What is the best color space for mixing?

A: For most UI tasks, oklab or oklch are the best interpolation spaces for color-mix(). They avoid the "gray dead zone" in the middle of a gradient or mix that often occurs in sRGB.

Ready to Experiment?

Modern CSS is making design tools more powerful and code more maintainable. Try using our Color Converter to see how your brand colors look in different formats.

Note: We are currently working on a dedicated OKLCH Color Picker and Relative Color Syntax Generator. Stay tuned!

Back to Blog Color Converter →