color()

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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 names 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> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (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

Specifications

Specification
CSS Color Module Level 4
# color-function

Browser compatibility

BCD tables only load in the browser

See also