color()

Sunkanmi Fafowora on May 2, 2025

The CSS color() function allows you to use a color directly from a color space, either an existing color space or a custom one. It’s an alternative to most color functions that have sRGB color spaces (i.e., hsl(), rgb(), rgba(), etc.).

For example, we can set an element’s color using a value in the Rec. 2020 color space:

.element {
  color: color(rec2020 0.5 0.15 0.115 / 0.5);
}

Why is that useful? Well, Rec. 2020 is not like other color spaces that have their own CSS function. For example, we can set a color in the sRGB space using the hsl() function, but there is no corresponding rec2020() function we can use for that specific color space. That’s why we have the color() function, which allows us to tap into additional color spaces even if a function does not exist for them.

The color() function is defined in the CSS Color Module Level 4 and Level 5 specification.

Syntax

The CSS color() function is a space-separated color function. Please use only spaces and not commas

color() = color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )

<colorspace-params> = [ <predefined-rgb-params> | <xyz-params>]

<predefined-rgb-params> = <predefined-rgb> [ <number> | <percentage> | none ]{3}

<predefined-rgb> = srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020

<xyz-params> = <xyz-space> [ <number> | <percentage> | none ]{3}

<xyz-space> = xyz | xyz-d50 | xyz-d65

Arguments

/* color space then red is set */
.element {
  background-color: color(rec2020 1 0 0);
}

/* rec2020 color space specifying only blue */
.element {
  background-color: color(rec2020 0 1 0);
}

/* rec2020 color space specifying blue */
.element {
  background-color: color(rec2020 0 0 1);
}

/* display-p3 color space specifying green */
.element {
  background-color: color(display-p3 0 1 0);
}

/* srgb color space specifying yellow */
.element {
  background-color: color(srgb 1 1 0);
}

/* xyz-d65 color space specifying purple */
.element {
  background-color: color(xyz-d65 0.3 0.15 0.6);
}

/* Relative colors */
.element {
  background-color: color(from lab(0.2 0.1 0.4) srgb r g b);
}

Arguably, an easier-to-understand syntax would be:

color(colorspace c1 c2 c3 [ / [<alpha-value> | none]? )

where…

colorspace: Represents a color space. It can be srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, or xyz-d65
c1, c2, c3: These three values represent coordinates in the corresponding color space, going from 0 to 1.
<alpha-value>: An optional transparency value going from 0 to 1 or a percentage between 0% to 100%

Basic usage

The color() function allows you to access colors in nine different available color spaces and even custom color spaces you import in CSS. To me, this is one of CSS’s most powerful color functions yet, and that’s because most color functions only have access to one color space, while this has access to nine, and more if you create them. Talk about freedom of expression!

To use this effectively, you have to know that there are four mandatory values and one optional value, all space-separated. The first is for the target color space, the next three are for its color coordinates ranging from 0 to 1 in decimals, and finally, the last value is for the color transparency separated with a forward slash (/):

.element {
  color: color(srgb 0.1 0.4 0.5 / 0.2);
}

The CSS color() function should not be confused with the CSS color property. The CSS color() function returns a color, while the color property sets the foreground color of an element.

Valid and invalid colors

Valid colors are the colors within a color gamut that can be displayed on the target device. While invalid colors are those outside the color gamut that cannot be displayed. Usually, you can recognize a color outside a gamut if the color() function returns an opaque black color.

Sometimes, valid colors cannot be displayed if the user’s screen/device does not support that color space, so the browser would be forced to convert it to another “less vibrant” variant of that color. Let’s use the same example from the spec to understand this.

Imagine you have a very intense lime color in two different color spaces. Each color space may or may not be supported on the user’s screens/browsers.

For rec2020, the very intense lime color is:

color(rec2020 0.42053 0.979780 0.00579);

And in display-p3, that color is:

color(display-p3 -0.6112 1.0079 -0.2192);

The color in the rec2020 color space is in the gamut and can be displayed, while the display-p3 color goes out of gamut (it has negative values, and the value for green is above 1), and cannot be displayed unless the browser caps its values between 0 and 1.

However, even if rec2020 is in the gamut, it may not be displayed if the screen doesn’t support it. For example, rec2020 has a wider color palette than display-p3:

So a display-p3 screen won’t display it. Instead, a less intense color will be used through gamut mapping performed by CSS.

Gamut mapping is a process of transforming a color outside a gamut (the range of colors a device can display) to a color that is as close as possible within the gamut, so that the color remains as consistent as possible.

Using relative colors in `color()`

You can convert colors from one color space to another using the color() function, just like every other color function in CSS. To use it, you need to include the from keyword followed by any color (it can be another color function or a named color), then replace any of its values with its corresponding channel letter, and they will take on the value from the original color.

Here’s the twist, though. There are only two ways to write the channels for conversion in color():

Using r, g, b for srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020.
Using x, y, z for the xyz color spaces xyz, xyz-d50, or xyz-d65.

For example, let’s say you want to convert colors in rgb() to display-p3, you would do this for color spaces in the RGB channel:

.element {
  fill: color(from rgb(232 122 105 / 0.5) display-p3 r g b / alpha);
}

This is illustrated by the color of the boat below:

You can exchange the channels with values of your choice, provided it doesn’t go below or above the limits. i.e

.element {
  fill: color(from rgb(232 122 105 / 0.5) display-p3 r 0.513 0.513 / 0.2);
}

For the XYZ channels, we convert rgb() to xyz-d65 and this is how it would look:

.element {
  fill: color(from rgb(3 55 55 / 0.9) xyz-d65 x y z / alpha);
}

This is illustrated by the color on the boat below:

You can exchange the channels with values of your choice in this as well, provided it doesn’t go below or above the limits. Heck, you can use math functions here — just remember not to be too wacky!

.element {
  fill: color(from rgb(3 55 55 / 0.9) xyz-d65 calc(x + 0.2) calc(y + 0.2) 0.245 / alpha);
}

It can be used with `color-gamut` to check color space support

Although the @media color-gamut feature doesn’t support all the color spaces in color(), you can still use it to check for the three prominent ones listed there. I don’t see how this will be used in a standard web application, but it’s just good to know.

@media (color-gamut: srgb) {
  body {
    background-color: color(srgb 0.5 0.43 0.5);
  }
}

@media (color-gamut: p3) {
  body {
    background-color: color(display-p3 0.4 0.3 0.5);
  }
}

@media (color-gamut: rec2020) {
  body {
    background-color: color(rec2020 0.23 0.42 0.32);
  }
}

Upcoming feature! Custom color spaces with `@color-profile`

Hey there! This at-rule has not yet been implemented by any browser yet, so here’s a little note saying, don’t use it yet. Once it’s implemented, feel free to experiment with this feature as much as you can!

You can create custom color profiles (they are used to describe the color characteristics of a color space in CSS) and use them in the color() function. Like this:

@color-profile --sunkanmi-color-space {
  src: url("https://example.com/sunkanmi-color-space.icc");
}

/* Number of constant depends on the variables specified in the color space */
.element {
  color: color(--sunkanmmi-color-space 0.41 0.45 0.56 0.3);
}

Demo

Here’s a demo using color to change the background color using any of the 9 color spaces:

Specification

The color() function is defined in the CSS Color Module Level 4 specification, while the relative syntax using channel keywords is defined in the CSS Color Module Level 5 specification. Both are currently in Editor’s Draft status at the time of writing. This means changes can still be made to this function in the future.