CSS color() Function
The CSS color() function allows you to specify a color within a specific, predefined color space (such as Display P3, Rec2020, or sRGB), providing direct access to wide-gamut colors beyond the limits of standard sRGB.
Introduced in CSS Color Module Level 4, the color() function addresses a fundamental limitation of traditional CSS color formats. Functions like rgb() and hsl(), as well as hex codes, are locked into the narrow sRGB color gamut. Modern screens (such as Retina displays, OLED panels, and wide-gamut monitors) can display noticeably more saturated greens, reds, and cyans. The color() function allows you to unlock these vibrant colors by specifying the target color space explicitly.
Syntax
The color() function accepts a predefined color space identifier followed by three space-separated channel values (such as red, green, and blue), plus an optional alpha transparency channel:
Parameters
colorspace: An identifier naming one of the CSS-predefined color spaces (e.g.display-p3,srgb,rec2020,a98-rgb, orprophoto-rgb).c1,c2,c3(Color Channels): Three numbers typically ranging from0to1(e.g.0.8) or percentages from0%to100%representing the intensity of each primary channel (such as Red, Green, and Blue). In CSS Color 4, values less than0or greater than1are permitted to specify extended-gamut or high-dynamic-range colors.A(Alpha, optional): Preceded by a forward slash (/), specifying the transparency as a decimal between0and1(e.g.0.5) or a percentage between0%and100%.
Predefined Color Spaces
CSS Color Module Level 4 standardizes several predefined color spaces that can be used with color():
| Identifier | Description & Use Case | Gamut Coverage |
|---|---|---|
display-p3 |
The DCI-P3 color space adapted with an sRGB transfer curve. Widely supported across modern Apple devices, high-end smartphones, OLED screens, and 4K/5K monitors. | Roughly 25% larger than sRGB, with significantly more vibrant reds and greens. |
srgb |
The standard sRGB color space, identical to the gamut used by rgb() and hex codes, but written on a 0 to 1 scale. |
Standard web gamut (baseline). |
srgb-linear |
Linear-light sRGB without gamma encoding. Particularly useful for color calculations, lighting effects, and shader operations. | Same gamut as sRGB, with linear transfer function. |
rec2020 |
ITU-R BT.2020 color space, designed for Ultra HD (4K/8K) television and HDR broadcasting. | Extremely wide gamut; covers nearly 75% of visible colors. |
a98-rgb |
Adobe RGB (1998), developed by Adobe for professional photography and CMYK print proofing. | Encompasses most CMYK printer gamuts, especially rich cyan-green tones. |
prophoto-rgb |
ProPhoto RGB (ROMM RGB), developed by Kodak for digital photography archiving. | Enormously wide gamut covering over 90% of real-world surface colors. |
xyz, xyz-d50, xyz-d65 |
CIE 1931 XYZ spaces using different white points (D50 or D65). Primarily used by color science tools and device profiling. | Encompasses the entire human visual gamut. |
Basic Examples
Here are several examples specifying colors with the color() function:
Using color() in Style Sheets
The CSS specifications state that you can use color() wherever a CSS <color> value is accepted. For example, you can use color() to set the colors of text, backgrounds, and borders:
Specifying Transparency
An alpha channel can be added after a forward slash (/) to create semi-transparent wide-gamut colors:
Providing Fallbacks for Older Browsers
While the color() function is supported in all modern browsers, it may not be recognized by older legacy browsers. You can therefore provide an sRGB fallback using standard CSS cascading rules or the @supports rule: