Interactive Guide to Modern CSS Colors

A Guide to Modern CSS Colors

For decades, web color was limited to keywords, hex codes, and `rgb()`. CSS Color Levels 4 and 5 fundamentally change this, introducing new color spaces that map to human perception and functions that allow for powerful, predictable manipulation. This guide provides interactive tools to explore these new frontiers.

Color Function Explorer

Select a color space and use the sliders to see how each parameter changes the color in real-time.

Color Space

oklch(0.65 0.15 25)

The `color-mix()` Playground

Discover the power of `color-mix()`. The color space you mix in dramatically changes the result. Mixing blue and yellow in `srgb` passes through a gray "dead zone," creating a muddy intermediate color. Perceptually uniform spaces like `oklch` produce the clean, vibrant green you'd expect.

Color 1

Mixing Space

Color 2

HD Colors with `color()`

The `color()` function unlocks wider color gamuts like `display-p3`, which offers about 25% more colors—especially vibrant reds and greens—on compatible HD displays.

Standard RGB

rgb(0 255 0)

Display P3 (HD)

color(display-p3 0 1 0)

Print Colors: `device-cmyk()`

The `device-cmyk()` function is a specialized, unmanaged color tool intended only for print. It instructs printers to use exact amounts of Cyan, Magenta, Yellow, and Black ink, bypassing screen-based color management for maximum print accuracy.

You should only use this function inside a `@media print` block. Its on-screen appearance is unreliable.

@media print {
  .logo {
    /* Use official CMYK brand color */
    color: device-cmyk(0.1 0.8 0 0.2);
  }
  p {
    /* Use 100% black ink for crisp text */
    color: device-cmyk(0 0 0 1);
  }
}

Browser Compatibility

Support for modern color syntax is excellent across all major desktop browsers. The table shows the first version of each browser to provide support.

Feature	Chrome	Safari	Firefox
`hwb()`	101	15	96
`lab()` & `lch()`	111	15	113
`oklab()` & `oklch()`	111	15.4	113
`color()` function	111	15	113
`color-mix()`	111	16.2	113