CSS Function
color()
The color() function specifies colors in any predefined or custom color space, enabling wide-gamut colors like Display P3.
Syntax
color(colorspace c1 c2 c3 / alpha)Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| colorspace | ident | Yes | Color space identifier: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, xyz-d65 |
| c1 | number | percentage | Yes | First channel value (e.g., red in sRGB) |
| c2 | number | percentage | Yes | Second channel value (e.g., green in sRGB) |
| c3 | number | percentage | Yes | Third channel value (e.g., blue in sRGB) |
Examples
Display P3 vivid green
A green outside the sRGB gamut.
css
color: color(display-p3 0.2 0.9 0.4);sRGB equivalent of hex
Equivalent to rgb(59 130 246).
css
background: color(srgb 0.23 0.51 0.96);With alpha
Semi-transparent P3 red.
css
border-color: color(display-p3 1 0 0 / 0.5);Browser Support
✓
Chrome
v111++
✓
Firefox
v113++
✓
Safari
v15++
✓
Edge
v111++
✓
Opera
v97++
Tailwind Equivalent
You can achieve similar results in Tailwind CSS using the following utility classes:
Use arbitrary values: bg-[color(display-p3_0.2_0.9_0.4)]Frequently Asked Questions
What is Display P3?▼
Display P3 is a wide-gamut color space used by Apple devices and modern monitors. It covers about 25% more colors than sRGB.
What happens if the color is out of gamut?▼
Browsers automatically gamut-map colors to the display's capabilities, finding the closest representable color.
Explore CSS Color Tools
Try our free tools to work with color() and other CSS color functions.
Open Tools