CSS color() Function

Definition and Usage

CSS color() The function allows specifying colors in a specific color space.

Instance

Example 1

Specify the background color in the display-p3 color space (opacity of 0.3):

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(display-p3 0.6 0.6 0 / .3);
}

Try It Yourself

Example 2

Use the relative value syntax:

div {
  padding: 15px;
  border: 2px solid black;
  background-color: color(from blue srgb r g b / 0.4);
}

Try It Yourself

CSS Syntax

Absolute Value Syntax

color(colorspace c1 c2 c3 / A)
Value Description
colorspace

Required. Defines one of the predefined color spaces:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

Required. Represents the component value of the color space.

Each value can be written as a number (between 0 and 1), a percentage (0% to 100%), or the keyword none.
/ A

Optional. Represents the opacity channel value of the color (0 indicates fully transparent, 100 indicates fully opaque).

none (indicating no transparency channel) can also be used.

The default value is 100.

Relative Value Syntax

color(from color colorspace c1 c2 c3 / A)
Value Description
from color

It starts with the keyword from, followed by the color value representing the original color.

This is the original color on which relative colors are based.
colorspace

Required. Defines one of the predefined color spaces:

  • srgb
  • srgb-linear
  • display-p3
  • a98-rgb
  • prophoto-rgb
  • rec2020
  • xyz
  • xyz-d50
  • xyz-d65
c1 c2 c3

Required. Represents the component value of the color space.

Each value can be written as a number (between 0 and 1), a percentage (0% to 100%), or the keyword none.
/ A

Optional. Represents the opacity channel value of the color (0 indicates fully transparent, 100 indicates fully opaque).

none (indicating no transparency channel) can also be used.

The default value is 100.

Technical Details

Version: CSS Color Module Level 5

Browser Support

The numbers in the table indicate the first browser version to fully support this function.

Chrome Edge Firefox Safari Opera
111 111 113 15 97

Related Pages

Reference:CSS Colors