Color() - Function CSS

Syntax diagram of color().

On the diagram, the terms in bold are the predefined terms in CSS, the others are described below:

• color is a possible reference color, introduced by the word from.
• --id is the name of a custom color space.
• a, b and c are the three values that define the color in the specified color space.
• α is the opacity of the color (alpha channel), introduced by a slash character.

Description of the color() function.

The function color() sets a color in a chosen color space.

All other CSS functions that allow you to define a color work in the standard color space called sRGB (rgb(), hsl(), hwb(), etc.). This is also the case for hexadecimal notation like #FF481A. The function color() therefore brings a genuine innovation.

If you are not familiar with the concept of color space, you can check out a short tutorial on color spaces further down on this page.

You can also check the page on the @color-profile directive, which allows you to define a custom color space.

The color() value can be used with the following properties:

The function color() can be used anywhere a color is expected, that is, among other things, with the following properties:

• accent-color : Defines the colour of active or checked items.
• background-color : Sets the background color.
• border-color : Sets the color of the borders.
• caret-color : Chooses the color of the text marker (flashing cursor).
• color : Sets the foreground color and assigns a value to currentcolor.
• column-rule-color : Defines the color of the column-separating rules in the context of a multi-column layout, a grid container, or a flex container.
• fill-color : Sets the fill color in SVG.
• flood-color : Sets the color of fills and shading in the context of SVG filters.
• lighting-color : Sets the color of the lighting in the context of an SVG filter.
• outline-color : Sets the color of the outline.
• scrollbar-color : Sets two colors that will be used for scrollbars.
• text-decoration-color : Defines the color of the decorative line (underlined, stripe...).
• text-emphasis-color : Sets the color of the emphasis characters.

Syntaxes of the color() function.

• color: color(a98-rgb 50% 30% 50%); cs a b c

  The function color() requires at least four parameters, all of which are mandatory:

  1. cs: the color space in which the color is described. It can be a predefined color space (see below) or a custom color space, defined by the @color-profile directive.
  2. a, b, c, are unitless values or percentages. They define the color in the chosen space.
     For color spaces whose name contains the letters rgb, these values correspond to red, green, and blue.
     Values between 0 and 1 or 0% and 100% are included in the gamut of the output device (screen, printer). Negative values or values greater than 1 (or 100%) are valid but cannot be reproduced by the device: they will be converted to the closest color compatible with the device.

  The predefined color spaces are:

  1. srgb: This is the most common (and least efficient) color space. All screens are capable of displaying it, so it poses few compatibility issues.
     It is the color space used by all other functions related to colors (rgb(), hsl(), etc.)
  2. srgb-linear has the same gamut as the srgb space but does not involve the gamma function. Which means that the parameters a, b, and c are proportional.
  3. display-p3.
  4. a98-rgb.
  5. prophoto-rgb.
  6. rec2020.
  7. xyz: color space defined by the CIE
  8. xyz-d50: variant of the color space above.
  9. xyz-d65: another variant.

  The example below clearly shows the importance of the color space. It's the only thing that changed between the first example and the second.

  background:
color(srgb 10% 100% 10%);

  background:
color(srgb-linear 10% 100% 10%);
• color: color(--id 50% 30% 50%); ec a b c

  --id is the name of a custom color space. This identifier must start with a double dash. Refer to the @color-profile at-rule for the definition of a custom color space.

  When a custom color space is used, the a, b, and c settings below 0 (0%) or above 1 (100%) are brought back to 0 or 1.

• color: color(a98-rgb 50% 30% 50% / 50%); ec a b c α

  An additional parameter α can be added by preceding it with a slash (/). It represents the opacity of the color, with 100% corresponding to a completely opaque color.

  When this parameter is not specified, the color is considered completely opaque.

  background:
color(srgb 10% 100% 10% / 50%);
• color: color(from #FF4874 a98-rgb 50% 30% 50% / 50%); coul ec a b c α

  This syntax introduces a new parameter, indicated by the word from, which is a starting color. The other parameters a, b, c, and α are then values that modify the starting color. In the case of an rgb color space, it is possible to use the values r, g, and b to represent the initial color and to use the calc() function to modify these values.

  Example. With the code below, you get the color #9020a0:

  color(from #8040a0 srgb calc(r + 10) calc(g / 2) b;

  Sur cet exemple, on part de la couleur rouge et on fixe le bleu à 100% : on obtient un violet.

  background:
color(from red srgb r g 100%);

Introduction to the concept of color space.

What is a color space? The sRGB space.

Colors are often represented by a diagram like the one below. In fact, this does not include all existing colors, but rather a reasonably complete subset of all existing colors.

In computing, as in video and television, and this has been the case since the beginning of color television, colors have always been obtained by mixing three primary colors, which are red, green, and blue. This is called additive synthesis, and it is a method that has been proven effective.

But for these basic colors, which red are we talking about? And which blue and which green? If we choose the three colors shown below on the left, we will only be able to reproduce the colors in the drawing on the right. It is clear that we are far from being able to reproduce all the existing colors. This triangle, formed by the three primary colors, is called a color space.

So why not choose primary colors that are further out, which would encompass virtually all existing colors? Simply because devices — screens, printers — also need to be able to reproduce these colors. The choice of primary colors made many years ago was realistic: it allowed almost all devices of the time to reproduce these colors. This modest but realistic color space is called sRGB. All current devices (monitors, laptop screens, printers, etc.) are capable of reproducing all its colors. For this reason, sRGB is the most widely used color space on the Internet, because you can be sure it is compatible with the screens of all internet users.

But be careful! That doesn't mean that all screens will display the same color. It just means that they are capable of doing so, but to be sure they show the correct color, they need to be calibrated. This is a process that can be done with a colorimeter. But very few people calibrate their screens, except for graphic designers or other imaging professionals.

But this is another problem. Just keep in mind that 99% of devices are capable of reproducing all the colors in the sRGB space.

The need for other color spaces.

The drawback of the sRGB space is that a high-end device won’t perform any better than others, since in the sRGB space, only the colors that all devices can reproduce are found. It would therefore be interesting to define wider color spaces, which of course won’t be compatible with all devices, but will allow high-end devices to reproduce colors more fully (and, in doing so, justify their price).

Graphic processing software like Photoshop performs calculations that can "eject" a color outside the sRGB space. Even if a subsequent calculation brings the color back into the color space, some nuances are lost: two similar colors end up being identical if they are pushed outside their color space. To avoid this problem, all of this software internally uses the largest possible color space.

Finally, in the printing industry, additive synthesis is not used, and the primary colors that have been chosen are cyan, magenta, and yellow. Here too, there is therefore a need for color spaces other than sRGB.

Color spaces wider than sRGB exist. The two best known are Adobe RGB98 and ProPhoto RGB.

Color spaces and CSS.

For a long time, CSS only supported the sRGB color space, but Level 4 of the color module specification introduced the concept of color spaces, particularly with the function color() described on this page, as well as many predefined color spaces: a98-rgb, prophoto-rgb, srgb-linear, etc.

Level 5 of the same module extends the capabilities of the color() function and adds the @color-profile directive, which allows you to define a custom color space.

Simulator.

The simulator allows testing support for different syntaxes, such as the use of percentages or relative colors (the from keyword).
Apart from the first three values, all the others display the resulting color of the same parameters in different color spaces.

Browsers compatibility with color() function.

The features offered by the color() function are now well supported by most modern browsers.

1

color()
function

2

Rerlative
colors

Estimated overall support.

93%

87%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Safari

Opéra

Safari sur IOS

Firefox pour Androïd

Chrome

Firefox

Edge

Chrome pour Androïd

Androïd Brower

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Historic of the color() function.

• CSS Color Module Level 4

  CSS now supports color spaces other than sRGB. The color() function is introduced to satisfy this requirement.
  

  July 05, 2016

  Working Draft.

  

  July 05, 2022

  Candidate Recommendation.

  

  

• CSS Color Module Level 5

  Introduction of colors defined in relation to another color. Evolution of the color() function to deal with these relative colors.
  

  March 03, 2020

  Working Draft.

  

  

  

See also: other concepts related to colors.

The W3C standard for colors is described in the CSS Color Module module. These other definitions are collected in this module:

Properties:

Functions:

color-mix()

Mix two colors in a given color space.

⚠

contrast-color()

Determine a foreground color based on the background color to maximize contrast.

⚠

device-cmyk()

Define a color based on a device, specifying cyan, magenta, yellow, and black values.

hsl()

Determines a color from the Hue, Saturation and Brightness settings, an alternative closer to our way of thinking.

hsla()

Determines a color and its transparency from the Hue, Saturation, Brightness and Alpha parameters.

hwb()

Defines a color based on its hue and a dose of black and white.

lab()

Defines a color in the L*a*b* system.

lch()

Defines a color in the L*C*H* system.

oklab()

Defines a color in the L*a*b* system with a perceptual correction.

oklch()

Defines a color in the L*C*H* system with a perceptual correction

rgb()

Determines a color from the values ​​of Red, Green and Blue.

rgba()

Determines a color and its transparency from the values ​​of Red, Green, Blue and the Alpha value.

At-rules:

@color-profile

Specifies a color profile that can then be used by the color() function.

Descriptors :

⚠

components

Descriptor usable with the @color-profile at-rule.

⚠

rendering-intent

Descriptor usable with the @color-profile directive. Defines the method for converting from one color profile to another.