Implementing CSS Color Level 4 in Modern Web Applications

What is CSS Color Level 4?

CSS Color Level 4 is the latest specification for colors on the web, extending the traditional sRGB-based color model with a wide array of new features. It introduces device-independent color spaces, high-definition color gamuts, new color functions, relative color manipulation, and system color keywords. This specification brings the web closer to native design tools, allowing developers to express colors in ways that match modern display capabilities and human perception.

Key additions include:

New color functions: lab(), lch(), oklab(), oklch(), hwb(), and the color() function for predefined color spaces
Wide-gamut color spaces like Display P3, Rec.2020, and ProPhoto RGB
Relative Color Syntax (RCS) for transforming colors within a chosen color space
Updated notations for RGB and HSL that accept optional alpha without commas
Hexadecimal notation with 8 digits (including alpha)
System color keywords like Canvas and CanvasText
The device-cmyk() function for print-oriented styles

Why It Matters

🚀 Deploy your AI agent in 10 minutes

Managed Hermes hosting. Zero DevOps. 100M tokens/mo included.

Try it free →

Modern displays (OLED, HDR monitors, premium mobile devices) support color gamuts far wider than sRGB, such as Display P3 and Rec.2020. CSS Color Level 4 unlocks those vibrant, deeply saturated colors on the web, giving designers the tools to create richer visual experiences. Beyond wider gamuts, the specification introduces perceptually uniform color spaces like OKLab and OKLCH, which solve long-standing problems with gradients and color interpolation.

Here’s why these improvements are essential:

Wider color fidelity – sRGB covers only about 35% of visible colors. Display P3 and Rec.2020 cover much larger volumes, enabling more realistic and expressive designs.
Perceptual uniformity – Spaces like OKLCH avoid the “gray dead zone” in sRGB gradients, producing smooth, natural transitions that match human vision.
Consistent design tokens – Manipulating lightness, chroma, or hue independently in LCH/OKLCH allows for systematic, accessible color scales without unintended hue shifts.
Print-oriented styling – The device-cmyk() function lets you target CMYK printers directly from CSS, ensuring color fidelity in printed output.
Accessibility and system integration – New system color keywords respect user preferences (like forced-color modes), improving readability for users with specific needs.

How to Use CSS Color Level 4

1. Modern RGB and HSL Notation

CSS Color Level 4 simplifies the syntax for rgb() and hsl(). You can now write space-separated values without commas and use the / separator for alpha. The new syntax is more readable and less error-prone.

/* Modern notation */
.element {
  background: rgb(255 128 64 / 80%);
  color: hsl(240deg 100% 50% / 0.9);
}

/* Equivalent legacy notation */
.element-legacy {
  background: rgba(255, 128, 64, 0.8);
  color: hsla(240, 100%, 50%, 0.9);
}

This syntax works in all modern browsers and gracefully degrades in older ones (they simply ignore the rule). It’s the foundation for the new color functions.

2. Hexadecimal with Alpha (8‑digit hex)

You can now express transparency directly in hexadecimal by using 8 digits. The last two digits represent the alpha channel (00 to FF).

/* 8-digit hex: RRGGBBAA */
.card-overlay {
  background: #ff6633cc; /* 80% opacity coral */
  border: 1px solid #3344ff80; /* 50% opacity blue */
}

3. New Color Functions: lab(), lch(), oklab(), oklch()

These functions give you access to device-independent, perceptually uniform color spaces. oklch() is particularly useful because it expresses color as lightness, chroma, and hue – all independent components that you can manipulate individually.

/* OKLCH: lightness, chroma, hue */
:root {
  --primary: oklch(65% 0.25 250);
  --accent: oklch(75% 0.2 145);
  --danger: oklch(55% 0.3 30);
}

/* Using LCH for a bright, vivid green */
.call-to-action {
  background: lch(70% 80 130);
}

Practical tip: Use oklch() for design tokens because you can lighten/darken a color just by adjusting the lightness (l) component, while keeping the hue and chroma intact. This prevents the muddy tones that often appear when lightening sRGB colors.

4. The color() Function for Wide‑Gamut Spaces

The color() function allows you to specify colors in predefined color spaces like display-p3, a98-rgb (Adobe RGB), prophoto-rgb, rec2020, and xyz. This unlocks ultra‑vivid colors on capable hardware.

/* Display P3 – vivid orange-red */
.vivid-banner {
  background: color(display-p3 1 0.4 0.1);
}

/* Rec.2020 – deep cyan */
.deep-cyan {
  color: color(rec2020 0.2 0.8 0.9);
}

Always provide an sRGB fallback inside a @supports rule or by placing the fallback property before the new one.

.safe-vivid {
  background: #ff5722; /* sRGB fallback */
  background: color(display-p3 1 0.3 0.1);
}

5. HWB: Hue‑Whiteness‑Blackness

The hwb() function describes colors by hue, whiteness, and blackness. It’s intuitive for creating tints and shades without converting to other spaces.

/* HWB: hue, whiteness, blackness, optional alpha */
.pastel-green {
  background: hwb(120deg 70% 10%);
}
.deep-navy {
  color: hwb(240deg 10% 50% / 0.9);
}

6. Relative Color Syntax (RCS)

RCS lets you take an existing color and modify its components within a chosen color space. Use the from keyword followed by a color value (or a custom property) and then redefine the channels using calc().

/* Lighten a color by increasing its lightness in OKLCH */
:root {
  --brand: oklch(60% 0.22 265);
}

.button-light {
  background: oklch(from var(--brand) calc(l * 1.3) c h);
}

/* Reduce chroma and set alpha in one step */
.subtle-tag {
  background: oklch(from var(--brand) l calc(c * 0.3) h / 0.5);
}

/* Manipulate a Display P3 color */
.vivid-fade {
  background: color(from color(display-p3 1 0.5 0.2) r g b / 0.3);
}

RCS is extremely powerful for generating color variants on the fly, keeping a design system consistent while reducing the number of hand‑picked color values.

7. System Color Keywords

CSS Color Level 4 reintroduces system color keywords that respect the user’s operating system theme and accessibility settings (like High Contrast Mode). Examples include Canvas, CanvasText, LinkText, ButtonFace, and more.

/* Use system colors for a form that adapts to OS theme */
.form-input {
  background: Canvas;
  color: CanvasText;
  border: 1px solid ButtonBorder;
}

These keywords are essential for forced-color modes and provide a native look‑and‑feel without hardcoding values.

8. Device‑CMYK for Print

The device-cmyk() function lets you specify colors intended for CMYK printers. This is useful inside print stylesheets (@media print) to preserve color accuracy.

@media print {
  .logo {
    color: device-cmyk(0 0.8 1 0.2);
  }
}

9. Media Queries for Color Gamut

You can conditionally apply styles based on the output device’s color gamut using color-gamut media feature queries. This ensures you serve wide‑gamut colors only when supported.

/* Apply Display P3 colors only if supported */
@media (color-gamut: p3) {
  .hero {
    background: color(display-p3 0.9 0.2 0.3);
  }
}
@media (color-gamut: srgb) {
  .hero {
    background: #e6344a; /* sRGB fallback */
  }
}

Best Practices

Always Provide Fallbacks

Not all browsers support the latest color functions. Use the cascade to your advantage: write a standard sRGB color first, then override with the Level 4 value. This ensures a solid baseline.

.card {
  background: #0077cc; /* sRGB fallback */
  background: oklch(55% 0.2 250);
}

Use OKLCH for Design Tokens and Scales

OKLCH’s perceptual uniformity makes it ideal for generating systematic color scales. Define a base hue and chroma, then vary lightness to create light/dark variants without hue shifts.

:root {
  --blue-100: oklch(95% 0.05 250);
  --blue-500: oklch(65% 0.2 250);
  --blue-900: oklch(30% 0.1 250);
}

Leverage Relative Color Syntax for Dynamic Variations

Instead of defining dozens of separate color variables, use RCS to derive hover, active, and disabled states from a single base color. This keeps your stylesheet DRY and maintainable.

:root {
  --primary: oklch(60% 0.24 280);
}
.btn:hover {
  background: oklch(from var(--primary) calc(l * 1.15) c h);
}
.btn:active {
  background: oklch(from var(--primary) calc(l * 0.9) calc(c * 1.1) h);
}

Test with Feature Queries

Use @supports to isolate cutting‑edge color features. This allows you to provide enhanced experiences while ensuring basic functionality everywhere.

@supports (color: oklch(0% 0 0)) {
  :root {
    --brand: oklch(65% 0.2 250);
  }
}

Keep an Eye on Gamut Clipping

When using wide‑gamut colors, browsers may clip values that exceed the display’s capabilities. Use color(display-p3 ...) carefully and test on actual devices. For gradients, prefer OKLCH to avoid banding.

Adopt a Progressive Enhancement Mindset

Treat CSS Color Level 4 as an enhancement layer. Start with hex or sRGB rgb() for universal support, then layer on oklch(), color(), or RCS for modern browsers. This approach ensures no broken experiences.

Conclusion

CSS Color Level 4 transforms the web’s color vocabulary, bringing it up to par with professional design tools and modern display hardware. By adopting new color spaces like OKLCH, leveraging the color() function for wide‑gamut colors, and using relative color syntax to generate dynamic variants, developers can create more vibrant, accessible, and maintainable interfaces. The key to success lies in progressive enhancement: provide solid sRGB fallbacks, use @supports and media queries, and build design systems around perceptually uniform color spaces. With these techniques in your toolkit, you’re ready to deliver next‑generation color experiences on the web today.