color()

The color() functional notation allows a color to be specified in a particular, specified colorspace rather than the implicit sRGB colorspace that most of the other color functions operate in.

Support for a particular colorspace can be detected with the color-gamut CSS media feature.

Syntax

css
color(display-p3 1 0.5 0);
color(display-p3 1 0.5 0 / .5);

Values

Functional notation: color(colorspace c1 c2 c3[ / A])

colorspace

An <ident> denoting one of the predefined color spaces: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, and xyz-d65.

c1, c2, c3

<number> between 0 and 1, a <percentage> or the keyword none, which provide the component values in the color space.

A Optional

An <alpha-value> or the keyword none, where the number 1 corresponds to 100% (full opacity).

Note: See Missing color components for the effect of none.

Formal syntax

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

<colorspace-params> =
<custom-params> |
<predefined-rgb-params> |
<predefined-polar-params> |
<predefined-rectangular-params> |
<xyz-params>

<alpha-value> =
<number> |
<percentage>

<custom-params> =
<dashed-ident> [ <number> | <percentage> | none ]+

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

<predefined-polar-params> =
jzczhz [ <number> | <percentage> | none ]{2} [ <hue> | none ]

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

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

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

<hue> =
<number> |
<angle>

<predefined-rectangular> =
jzazbz |
ictcp

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

Examples

Using predefined colorspaces with color()

The following example shows the effect of varying the lightness, a-axis, and b-axis values of the color() function.

HTML

html
<div data-color="red-a98-rgb"></div>
<div data-color="red-prophoto-rgb"></div>
<div data-color="green-srgb-linear"></div>
<div data-color="green-display-p3"></div>
<div data-color="blue-rec2020"></div>
<div data-color="blue-srgb"></div>

CSS

css
[data-color="red-a98-rgb"] {
  background-color: color(a98-rgb 1 0 0);
}
[data-color="red-prophoto-rgb"] {
  background-color: color(prophoto-rgb 1 0 0);
}
[data-color="green-srgb-linear"] {
  background-color: color(srgb-linear 0 1 0);
}
[data-color="green-display-p3"] {
  background-color: color(display-p3 0 1 0);
}
[data-color="blue-rec2020"] {
  background-color: color(rec2020 0 0 1);
}
[data-color="blue-srgb"] {
  background-color: color(srgb 0 0 1);
}

Result

Using the xyz colorspace with color()

The following example shows how to use the xyz colorspace to specify a color.

HTML

html
<div data-color="red"></div>
<div data-color="green"></div>
<div data-color="blue"></div>

CSS

css
[data-color="red"] {
  background-color: color(xyz 45 20 0);
}

[data-color="green"] {
  background-color: color(xyz-d50 0.3 80 0.3);
}

[data-color="blue"] {
  background-color: color(xyz-d65 5 0 50);
}

Result

Using color-gamut media queries with color()

This example shows how to use the color-gamut media query to detect support for a particular colorspace and use that colorspace to specify a color.

HTML

html
<div></div>
<div></div>
<div></div>

CSS

css
@media (color-gamut: p3) {
  div {
    background-color: color(display-p3 1 0 0);
  }
}

@media (color-gamut: srgb) {
  div:nth-child(2) {
    background-color: color(srgb 1 0 0);
  }
}

@media (color-gamut: rec2020) {
  div:nth-child(3) {
    background-color: color(rec2020 1 0 0);
  }
}

Result

Specifications

Specification
CSS Color Module Level 4
# color-function

Browser compatibility

BCD tables only load in the browser

See also