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
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
, andxyz-d65
. c1
,c2
,c3
-
number()
,percentage()
values or the keywordnone
, which provide the component values in the color space. A
Optional-
An
<alpha-value>()
or the keywordnone
, where the number1
corresponds to100%
(full opacity).
Note: See Missing color components for the effect of none
.
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
<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
[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); }
Using the xyz colorspace with color()
The following example shows how to use the xyz
colorspace to specify a color.
HTML
<div data-color="red"></div> <div data-color="green"></div> <div data-color="blue"></div>
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); }
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
<div></div> <div></div> <div></div>
CSS
@media (color-gamut: p3) { div { background-color: color(display-p3 0 0 1); } } @media (color-gamut: srgb) { div:nth-child(2) { background-color: color(srgb 0 0 1); } } @media (color-gamut: rec2020) { div:nth-child(3) { background-color: color(rec2020 0 0 1); } }
See also
- The
<color>
data type for a list of all color notations color-gamut
media feature- Wide Gamut Color in CSS with Display-p3