color
Description
The color function for CSS allows a color to be specified in a particular, specified color space (rather than the implicit sRGB color space in which most of the other color functions operate).
Channel | Low Unit | High Unit | Low Number | High Number |
---|---|---|---|---|
r | 0.0% | 100.0% | 0.0 | 1.0 |
g | 0.0% | 100.0% | 0.0 | 1.0 |
b | 0.0% | 100.0% | 0.0 | 1.0 |
x | 0.0% | 100.0% | 0.0 | 1.0 |
y | 0.0% | 100.0% | 0.0 | 1.0 |
z | 0.0% | 100.0% | 0.0 | 1.0 |
a | 0.0% | 100.0% | 0.0 | 1.0 |
Syntax
CSS
color()
Values
<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
srgb
The same as legacy sRGB colors, such as rgb().
srgb-linear
The same as srgb except that the transfer function is linear-light (there is no gamma-encoding).
display-p3
It uses the same primary chromaticities as [DCI-P3], but with a D65 whitepoint, and the same transfer curve as sRGB.
a98-rgb
The transfer curve is a gamma function, close to but not exactly 1/2.2.
prophoto-rgb
The transfer curve is a gamma function with a value of 1/1.8, and a small linear portion near black. The white point is D50.
rec2020
ITU Reference 2020 is used for Ultra High Definition, 4k and 8k television.
<number>
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
none
Specifies a missing component.
<xyz-params> = <xyz-space> [ <number> | <percentage> | none ]{3}
<xyz-space> = xyz | xyz-d50 | xyz-d65
xyz
Diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white is D65.
xyz-d50
Diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white is D50.
xyz-d65
Diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white is D65.
<number>
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
none
Specifies a missing component.
<alpha-value> = <number> | <percentage>
<number>
An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.
<percentage>
Specifies the percentage using a number followed by a percent sign (%).
none
Specifies a missing component.
Examples
1 · predefined-rgb · srgb · unit
2 · predefined-rgb · srgb · number
3 · predefined-rgb · srgb-linear · unit
4 · predefined-rgb · srgb-linear · number
5 · predefined-rgb · display-p3 · unit
6 · predefined-rgb · display-p3 · number
7 · predefined-rgb · a98-rgb · unit
8 · predefined-rgb · a98-rgb · number
9 · predefined-rgb · prophoto-rgb · unit
10 · predefined-rgb · prophoto-rgb · number
11 · predefined-rgb · rec2020 · unit
12 · predefined-rgb · rec2020 · number
13 · predefined-rgb · JS
14 · xyz-space · xyz · unit
15 · xyz-space · xyz · number
16 · xyz-space · xyz-d50 · unit
17 · xyz-space · xyz-d50 · number
18 · xyz-space · xyz-d65 · unit
19 · xyz-space · xyz-d65 · number
20 · xyz-space · JS
Links
Related
Functions
- abs
- acos
- asin
- atan
- atan2
- attr
- calc
- clamp
- conic-gradient
- cos
- counter
- counters
- hsl
- hsla
- hwb
- lab
- lch
- linear-gradient
- matrix
- matrix3d
- max
- min
- mod
- oklab
- oklch
- param
- perspective
- radial-gradient
- rem
- repeating-conic-gradient
- repeating-linear-gradient
- repeating-radial-gradient
- rgb
- rgba
- rotate
- rotate3d
- rotateX
- rotateY
- rotateZ
- round
- scale
- scale3d
- scaleX
- scaleY
- scaleZ
- sin
- skew
- skewX
- skewY
- src
- tan
- translate
- translate3d
- translateX
- translateY
- translateZ
- url
- var