CSS color() Function
Example
Specify a background color in a display-p3 color space (with an alpha channel of 0.3):
div {
padding: 15px;
border: 2px solid black;
background-color: color(display-p3 0.6 0.6 0 / .3);
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS color() function allows a color to
be specified in a particular, specified color space.
| Version: | CSS Color Module Level 5 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| color() | 111 | 111 | 113 | 15 | 97 |
CSS Syntax
Absolute value syntax
color(colorspace c1 c2 c3 / A)
| Value | Description |
|---|---|
| colorspace | Required. Defines one of the predefined colorspaces:
|
| c1 c2 c3 | Required. Represents the component values for the colorspace. 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 alpha channel value of the color (from 0 - fully transparent to 100 - fully opaque). None cane also be used (indicates no alpha channel). The default value is 100 |
Relative value syntax
color(from color colorspace c1 c2 c3 / A)
| Value | Description |
|---|---|
| from color | Start with the keyword from, followed by a color value that represents the origin color. This is the original color that the relative color is based on |
| colorspace | Required. Defines one of the predefined colorspaces:
|
| c1 c2 c3 | Required. Represents the component values for the colorspace. 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 alpha channel value of the color (from 0 - fully transparent to 100 - fully opaque). None cane also be used (indicates no alpha channel). The default value is 100 |
More Examples
Example
Using 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 »
Related Pages
CSS reference: CSS colors.
