New CSS color spaces and functions in all major engines
Published: 2023-08-20 17:14:17

---
title: New CSS color spaces and functions in all major engines
published: true
date: 2023-06-02 00:00:00 UTC
tags: 
canonical_url: https://web.dev/color-spaces-and-functions/
---

<aside><p><span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 128 128" style="enable-background:new 0 0 128 128" xml:space="preserve"><path d="M7.5 123.3c2.2 2.4 11.6-1.9 19-5.3C32 115.4 54 106.3 65 101.6c3-1.2 7.3-2.9 10.4-7 2.8-3.6 10-19-4.6-34.7-15-16-30.4-11.5-36.2-7.5A28.5 28.5 0 0 0 27.3 63c-5.2 11.6-12.7 32.9-15.7 41.3-2.3 6.1-6.4 16.5-4.1 19z" fill="currentColor"></path><path d="M18 86.8s.7 6.5 6.1 14.6c6.3 9.6 15 11.2 15 11.2l-5.8 2.4s-6.5-2-12.7-10.4c-3.8-5.3-5-11.6-5-11.6l2.3-6.2zm-5.6 15.4s1.5 5.6 4.7 9.7c3.8 5 8.6 6.5 8.6 6.5l-4.5 2s-3.3-.8-7-5.5c-2.9-3.5-3.7-7.6-3.7-7.6l1.9-5.1z" fill="currentColor"></path><path d="M10 116.4c-.2-.5-.2-1 0-1.4l25.4-53 4.2 16-26.8 38.7c-.7 1-2.3 1-2.8-.2z" style="opacity:.44" fill="currentColor"></path><path d="M41.6 83.2c12 14 25.5 12.2 30 8.6 4.5-3.5 8.1-15.6-3.7-29.3C55.3 48.2 41.3 52.2 38 55.3s-7.4 15.1 3.5 27.9z" style="fill: var(--color-state-good-bg);"></path><path d="M82.5 89c-4.3-3.7-6.6-3-9.7-1.8a26 26 0 0 1-18.9 0l2.6-6.2c5 1.7 8.7 1 12-1 4-2.4 9.6-5.6 18.3 1.6 3.6 3 7.3 5.1 10 4.2 2-.7 3-3.6 3.6-6l.2-1.3c.4-3.7 1.2-11.6 7.1-15.7 6.4-4.3 13-4.3 13-4.3l1.2 12c-3-.5-5.2.1-7 1-6.7 3.8-.8 18.2-11.3 23-10.1 4.8-18.4-3.3-21-5.6zM45.4 73.7l-4.3-3.9c8-8.9 5.8-15.4 4.3-20.2A26.4 26.4 0 0 1 44 38.8c-3-3.8-4.4-7.8-4.5-8-1.9-5.7-.5-11.2 2.8-16.4C48.7 4 60.5 4 60.5 4l4 10.5c-3-.1-12.8 0-15.8 4.8-3.8 6-1.3 9.6-1.2 10 .8-1 1.5-1.7 2.2-2.3 4.8-4.2 9-4.8 11.6-4.6a11 11 0 0 1 7.6 4.2c2 2.7 3 6.2 2.3 9.4a11 11 0 0 1-5.8 7.4 16 16 0 0 1-13 1.5v.3l.6 2c1.8 5.4 5 14.1-7.6 26.5zm7.4-37.5c.5.4 1.1.8 1.8 1 2 .8 4.4.6 7-.8 1.5-.9 1.7-1.7 1.7-2 .2-.9 0-2-.7-2.8a2.8 2.8 0 0 0-2-1.2c-1.6-.2-3.6.8-5.6 2.6-1 .9-1.7 2-2.3 3.2zm10 39.1-6.2-.1s3-16.7 12.5-19.5c1.8-.5 3.7-1 5.7-1.3l4-.8c.1-1.6-.5-3.6-1.3-5.9-.6-1.7-1.2-3.5-1.5-5.5-.6-3.9.4-7.3 3-9.6 3-2.9 7.9-3.8 13.4-2.5 3.2.7 5.5 2.2 7.6 3.6 2.9 2 4.6 3 8.2.5 4.3-2.9-1.4-14.3-4.4-21l11.3-4.6c1.5 3.3 8.8 20.3 4 30a11.5 11.5 0 0 1-8.1 6.2c-8 1.8-12.6-1.3-16-3.6-1.6-1-3-1.9-4.6-2.3-10.6-3 4.2 12.6-2.7 19.6-4.2 4.2-14.4 5.3-15 5.5-6.6 1.6-10 11.3-10 11.3z" fill="currentColor"></path><path d="M44 38.8c-.2 2.2-.3 3.5.3 6.4 2.7 2 8.7 2 8.7 2l-.6-2v-.3c-6.1-3-8.4-6.1-8.4-6.1zm-12.5 9.8-10.3-5 5.1-7.5 8.2 5.4zm-15.2-14A26 26 0 0 1 5 28.9l5.2-6c1.6 1.2 5 3.5 7.2 3.8l-1.1 7.9zM25.6 21.3 18 18.8a18 18 0 0 0 .7-8.3l7.9-1.3c.6 4 .3 8.2-1 12zM73 15.3l7.9-1.7L83 23.9l-7.8 1.7zM92.5 17.8 87 12c2.8-2.8 3.5-6.3 3.5-6.4L98.4 7c-.1.6-1.1 6.3-6 10.9zM95.5 48.6l7-2.2 2.3 7.7-7 2.1zM97.5 113l-7.9-1c.3-2.7-1.8-6.2-2.4-7l6.4-4.8c.5.6 4.7 6.4 4 12.8zM120.4 102.9c-3-.5-6-.6-9.1-.5l-.3-8c3.5-.2 7 0 10.6.6l-1.2 7.9zM109.6 113.9l5.6-5.7 7.8 7.6-5.6 5.7zM93.1 63.3 99 70l-6.6 5.8-5.8-6.6z" fill="currentColor"></path></svg> </span><strong>Celebration</strong></p>
<div> This web feature is now available in all three major browser engines! </div></aside>

CSS now supports color spaces that allow us to access colors outside of the sRGB [gamut](https://developer.chrome.com/articles/high-definition-css-color-guide/#what-is-a-color-gamut). This means that you can support HD (high definition) displays, using colors from HD gamuts. This support comes with new functions to make better use of color on the web.

## Accessing color spaces from CSS [#](https://web.dev/color-spaces-and-functions/#accessing-color-spaces-from-css)

We already have a number of functions that allow us to access colors within the sRGB gamut—`rgb()`, `hsl()`, and `hwb()`. Now supported in browsers is the `color()` function, a normalized way to access colors within any RGB color space. This includes sRGB, Display P3, and Rec2020. You can see some examples in the following CSS:

```
.valid-css-color-function-colors { --srgb: color(srgb 1 1 1); --srgb-linear: color(srgb-linear 100% 100% 100% / 50%); --display-p3: color(display-p3 1 1 1); --rec2020: color(rec2020 0 0 0); --a98-rgb: color(a98-rgb 1 1 1 / 25%); --prophoto: color(prophoto-rgb 0% 0% 0%); --xyz: color(xyz 1 1 1);}
```

Browser support
- Chrome 111, Supported 111 
- Firefox 113, Supported 113 
- Edge 111, Supported 111 
- Safari 15, Supported 15 
[Source](https://developer.mozilla.org/docs/Web/CSS/color_value/color#browser_compatibility)

Also supported are several functions allowing access to color spaces other than sRGB using `lch()`, `lab()`, `oklch()`, and `oklab()`.

Browser support
- Chrome 111, Supported 111 
- Firefox 113, Supported 113 
- Edge 111, Supported 111 
- Safari 15, Supported 15 
[Source](https://developer.mozilla.org/docs/Web/CSS/color_value/lch#browser_compatibility)

You can learn about all of these different color spaces in the [High definition CSS color guide](https://developer.chrome.com/articles/high-definition-css-color-guide/).

## The `color-mix()` function [#](https://web.dev/color-spaces-and-functions/#the-color-mix-function)

As well as these new color spaces, all engines now support the `color-mix()` function. This function enables mixing of one color into another, in any of the color spaces. In the following CSS, 25% of blue is mixed into white, in the srgb color space.

```
.example { background-color: color-mix(in srgb, blue 25%, white);}
```

Browser support
- Chrome 111, Supported 111 
- Firefox 113, Supported 113 
- Edge 111, Supported 111 
- Safari 16.2, Supported 16.2 
[Source](https://developer.mozilla.org/docs/Web/CSS/color_value/color-mix#browser_compatibility)

[Learn more about `color-mix()`](https://developer.chrome.com/blog/css-color-mix/)

These new functions and color spaces promise to bring vibrant HD color to the web. For inspiration, make a start by creating some beautiful gradients using the HD gradient generator at [gradient.style](https://gradient.style/).

_Hero image by [Daniele Levis Pelusi](https://unsplash.com/fr/@yogidan2012)_