color()
The color() function picks a color from a given color space. Wide gamut color spaces like display-p3 allow showing more vibrant and saturated colors than the standard srgb color space.
Overview
The color() function picks a color from a given color space. Wide gamut color spaces like display-p3 allow showing more vibrant and saturated colors than the standard srgb color space.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 111 | 111 | 113 | 15 | 111 | 15 | |
| CSS type | ||||||
color.mixed type parameters Mix `<percentage>` and `<number>` in parameters | 111 | 111 | 113 | 15 | 111 | 15 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (15)
Implementation note
- Only supports `display-p3` and `srgb` predefined color profiles.
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (15)
Implementation note
- Only supports `display-p3` and `srgb` predefined color profiles.
Syntax
CSS
/* Display P3 color space */
.vivid {
background-color: color(display-p3 1 0 0);
}
/* Explicit sRGB */
.srgb {
color: color(srgb 0.5 0.2 0.8);
}
/* With transparency */
.p3-alpha {
color: color(display-p3 0.2 0.8 0.4 / 0.9);
}Live demo
Use cases
Using color()
The color() function picks a color from a given color space. Wide gamut color spaces like display-p3 allow showing more vibrant and saturated colors than the standard srgb color space.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features