color()
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>+ | <string> ] [ / <alpha-value> ]? ] )
-
[<ident> | <dashed-ident>]
is an optional<ident>
ordashed-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>
between0
and1
, or a<percentage>
, where the number1
corresponds to100%
(full opacity).
Specifications
Specification |
---|
CSS Color Module Level 4 # color-function |
Browser compatibility
BCD tables only load in the browser