HomeMenu
Jesus · Bible · HTML · CSS · JS · PHP · SVG · Applications

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).

ChannelLow UnitHigh UnitLow NumberHigh Number
r0.0%100.0%0.01.0
g0.0%100.0%0.01.0
b0.0%100.0%0.01.0
x0.0%100.0%0.01.0
y0.0%100.0%0.01.0
z0.0%100.0%0.01.0
a0.0%100.0%0.01.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