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.
color(display-p3 1 0.5 0); color(display-p3 1 0.5 0 / .5);
color( [ [<ident> | <dashed-ident>]? [ <number-percentage>+ | <string> ] [ / <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>+ | <string> ] is either one or more <number> or <percentage> values providing the parameter values that the colorspace takes, or a <string> giving the name of a color defined by the colorspace.
/ <alpha-value> (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).
| Specification |
|---|
| CSS Color Module Level 4 (CSS Color 4) # color-function |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
color() |
No |
No |
No |
No |
No |
15
10.1-15
Only supports
display-p3 and srgb predefined color profiles. |
No |
No |
No |
No |
15
10.3-15
Only supports
display-p3 and srgb predefined color profiles. |
No |
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color()