New CSS Color Features Preview

Understanding the Transformation in CSS Color

The landscape of CSS color has undergone a remarkable transformation. For years, web developers relied primarily on hexadecimal values, RGB, and HSL to define colors in their stylesheets. While these methods served us well, they came with significant limitations--particularly when it came to perceptual consistency, color mixing, and dynamic color manipulation. Today, CSS Color Module Levels 4 and 5 introduce a suite of powerful features that fundamentally change how we think about and work with color on the web.

These new capabilities include the OKLCH color space, which provides perceptually uniform colors across the entire spectrum, relative color syntax that allows you to manipulate existing colors mathematically, and the color-mix() function that enables intuitive blending of two colors. Together, these features open possibilities that were previously impossible or required complex preprocessor functions and JavaScript to achieve.

This guide explores these modern CSS color features, examining their syntax, practical applications, and browser support so you can confidently incorporate them into your projects. Whether you're building a comprehensive design system or creating a theming solution for your application, understanding these new capabilities will elevate your CSS toolkit.

Understanding the OKLCH Color Space

What Makes OKLCH Different

The OKLCH color space represents one of the most significant advances in CSS color capabilities. To appreciate why it matters, we need to understand the limitations of the color spaces we've traditionally used.

HSL (Hue, Saturation, Lightness) became popular because its three components map intuitively to how we think about color. Hue represents the color wheel position from 0 to 360 degrees, saturation controls intensity, and lightness determines how close the color is to black or white. However, HSL has a fundamental flaw: it is not perceptually uniform. This means that colors with the same saturation and lightness values can appear to have different perceived brightness depending on their hue.

OKLCH solves this problem by being perceptually uniform. Created in 2020 as an improvement to the earlier LCH color space, OKLCH ensures that colors with similar lightness values appear equally bright regardless of their hue. This characteristic makes OKLCH particularly valuable for design systems, accessibility considerations, and any situation where consistent visual weight across colors matters.

For developers working with CSS variables and color systems, OKLCH provides the perceptual consistency needed for accessible contrast across all hues.

OKLCH Syntax and Values

The OKLCH functional notation expresses a color in the Oklab color space using cylindrical coordinates. The syntax follows this pattern:

color: oklch(lightness chroma hue);

Each component serves a specific purpose:

• Lightness: Operates on a scale from 0 to 1, where 0 represents black and 1 represents white
• Chroma: Represents the intensity or purity of the color, similar to saturation in HSL
• Hue: Expresses the color position on the color wheel in degrees from 0 to 360

Unlike HSL saturation, which has a clear maximum of 100%, OKLCH chroma can exceed what displays can render. Many developers find that chroma values around 0.1 to 0.3 produce vibrant colors that work reliably across displays.

Why Use OKLCH Over HSL

OKLCH becomes the better choice when you need perceptual uniformity across multiple hues, when you're creating color scales that need consistent visual weight, or when accessibility and contrast consistency matter. In design systems where colors from different hue families need to work together harmoniously, OKLCH's perceptual uniformity ensures that no single hue dominates or recedes inappropriately.

Pairing OKLCH with CSS Grid layouts enables you to create vibrant, accessible interfaces where colors maintain their visual impact across different components and sections.

CSS Relative Color Syntax

Introduction to Relative Colors

Relative color syntax allows you to take an existing color and derive new colors by modifying its individual channels using calc() and other CSS math functions. This feature enables dynamic color generation that adapts to whatever the source color's values happen to be.

The syntax uses the color function you're working with, followed by the from keyword and the source color:

.new-color: hsl(from var(--original-color) h s l);

The key insight is that h, s, and l act as variables containing the source color's values. You can keep them as-is, replace them with new values, or perform calculations on them.

The color-mix() Function

Basic Syntax and Usage

The color-mix() function enables mixing two colors together in a specified color space, producing a new color that represents their combination. By default, color-mix() uses equal parts of both colors (50% each), but you can control the ratio by specifying percentages:

.red-dominant {
 background: color-mix(in oklab, red 80%, blue);
}

.blue-touch {
 background: color-mix(in oklab, red, blue 20%);
}

Choosing a Color Space

The color space you specify significantly affects the result. OKLAB and OKLCH typically produce the most pleasing results for most use cases. OKLAB is perceptually uniform and predictable for mixing, while OKLCH's polar coordinates can produce more vibrant results for some color combinations.

Creating Transparency and Gradients

Color-mix() offers an elegant way to create transparent variants:

.semi-transparent {
 background: color-mix(in oklch, red 30%, transparent);
}

The resulting color's alpha equals the total percentage used. This technique also enables creating stepped gradients without multiple color stops.

When building modern interfaces with Flexbox layouts, color-mix() helps create cohesive color relationships that adapt beautifully to different component sizes and arrangements.

Creating Surface and Theme Systems

Light and Dark Surface Levels

Modern theming often requires multiple surface levels that distinguish themselves through subtle lightness variations. In light themes, shadows can provide this distinction, but shadows don't work well in dark themes.

The light-dark() function combined with relative colors provides an elegant solution:

:root {
 --surface-base-light: hsl(240 67% 97%);
 --surface-base-dark: hsl(252 21% 9%);
}

.surface-1 {
 background: light-dark(var(--surface-base-light), var(--surface-base-dark));
}

.surface-2 {
 background: light-dark(
 var(--surface-base-light),
 hsl(from var(--surface-base-dark) h s calc(l + 4))
 );
}

Each surface level in the dark theme becomes progressively lighter, creating visual hierarchy without relying on shadows.

Browser Support and Fallback Strategies

Current Browser Availability

Modern CSS color features have achieved excellent browser support. The color-mix() function reached Baseline availability in May 2023, meaning it's supported across all major browser versions. OKLCH and relative color syntax enjoy similarly broad support in current Chrome, Firefox, Safari, and Edge versions.

Fallback Approaches

The primary fallback strategy involves defining colors using supported syntax alongside the modern equivalent:

.button {
 /* Fallback for older browsers */
 background: hsl(221 83% 53%);
 /* Modern syntax for supporting browsers */
 background: oklch(0.55 0.15 250);
}

For design systems, @supports queries can provide targeted fallbacks:

@supports (color: oklch(0 0 0)) {
 .component {
 /* OKLCH-based styles */
 }
}

Getting Started with Modern CSS Colors

Learning Path

For developers new to these features, a progressive approach works well:

1. Start by exploring OKLCH with a color picker tool to understand how values map to visible colors
2. Practice creating lighter and darker variants using relative colors
3. Experiment with color-mix() for combining colors
4. Explore advanced topics like perceptual color scaling and theming systems

Tools and Resources

Several tools support modern CSS color workflows:

• oklch.net - Interactive OKLCH color selection with visualization of chroma limits
• MDN Web Docs - Comprehensive reference documentation for all color functions
• Browser Developer Tools - Support for modern color formats

Modern CSS color features represent a fundamental advancement in how we work with color on the web. OKLCH provides perceptually uniform colors that solve long-standing consistency problems. Relative color syntax enables dynamic color manipulation that adapts to any base color. The color-mix() function makes combining colors intuitive and flexible.

These features are ready for production use with appropriate fallbacks. By understanding their capabilities, you can build color systems that are more maintainable, accessible, and capable than ever before.

For more on building robust CSS systems, see our guide on thinking deeply about theming and color naming or explore color everything in CSS for comprehensive color strategies.

Sources

1. MDN Web Docs - color-mix() - Official documentation with syntax, parameters, and browser support status
2. Piccalilli - A pragmatic guide to modern CSS colours - part two - Comprehensive guide covering OKLCH, color-mix(), and perceptual color scaling
3. Ahmad Shadeed - CSS Relative Colors - Interactive guide with demos on relative color syntax
4. MDN Web Docs - oklch() - OKLCH functional notation reference
5. Can I Use - OKLCH browser support - Browser support tables