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.
The @color-profile
CSS at-rule can be used to define and name a color profile to be used in the color()
function to specify a color.
Syntax
color(display-p3 1 0.5 0);
color(display-p3 1 0.5 0 / .5);
Values
- Functional notation:
color( [ [<ident> | <dashed-ident>]? [ <number-percentage>+ ] [ / <alpha-value> ]? ] )
-
[<ident> | <dashed-ident>]
is an optional<ident>
or<dashed-ident>
denoting the colorspace. If this is an<ident>
it denotes one of the predefined colorspaces (such as display-p3); if it is a<dashed-ident>
it denotes a custom colorspace, defined by a@color-profile
rule.[ <number-percentage>+ ]
is one or more<number>
or<percentage>
values providing the parameter values that the colorspace takes./ <alpha-value>
(alpha) can be a<number>
between0
and1
, or a<percentage>
, where the number1
corresponds to100%
(full opacity).
Formal syntax
<color()> =
color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<colorspace-params> =
<predefined-rgb-params> |
<xyz-params>
<alpha-value> =
<number> |
<percentage>
<predefined-rgb-params> =
<predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> =
<xyz-space> [ <number> | <percentage> | none ]{3}
<predefined-rgb> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
<xyz-space> =
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.
<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>
[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 xyz colorspaces with color()
The following example shows how to use xyz
colorspaces to specify a color.
<div data-color="red"></div>
<div data-color="green"></div>
<div data-color="blue"></div>
[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.
<div></div>
<div></div>
<div></div>
@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);
}
}
Specifications
Specification |
---|
CSS Color Module Level 4 # color-function |
Browser compatibility
BCD tables only load in the browser
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