What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
CSS color() lets you specify a color in an explicitly named color space, such as display-p3 or srgb. Use it when the color space matters—especially for wide-gamut colors—but remember that the browser and display must support the requested gamut for the color to appear as intended.
What does the CSS color() function do?
Many familiar CSS color notations operate in sRGB without naming the color space. The color() function makes that choice explicit: its first argument identifies the space used by the three color components. For example, color(srgb 0.9 0.2 0.4) specifies an sRGB color, while color(display-p3 1 0.5 0) specifies a Display-P3 color. See MDN’s color() reference.
Explicit color spaces are useful when working with color values outside sRGB’s gamut, provided the browser and output device can reproduce them. Naming a wider-gamut space does not itself expand a screen’s capabilities.
Absolute syntax and color-space options
The absolute form supplies a color space and three components, with an optional alpha value after a slash:
Recommended Free Tools
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
color(<colorspace> <c1> <c2> <c3> [ / <alpha> ])
Documented predefined spaces include srgb, srgb-linear, display-p3, display-p3-linear, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, and xyz-d65. For example:
color(srgb 0.9 0.2 0.4)color(display-p3 1 0.5 0)color(display-p3 1 0.5 0 / 0.7)
Each component can be a number, percentage, or none. For numeric RGB-like components, 0 to 1 generally corresponds to the space’s bounds, and 100% corresponds to 1. Values outside that range are allowed, but may be out of gamut. In absolute syntax, alpha defaults to fully opaque if omitted.
Relative colors with color(from …)
Relative syntax starts with an origin color and names the output space:
color(from <origin-color> <colorspace> <c1> <c2> <c3> [ / <alpha> ])
The browser converts the origin color to the requested space when needed, then exposes its channels for reuse or calculations. In RGB-based spaces the channel names are r, g, and b; in XYZ-based spaces they are x, y, and z. Relative syntax can omit alpha, in which case it inherits the origin color’s alpha.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Relative colors and custom color spaces are within the scope of the W3C CSS Color Module Level 5 draft. That draft describes the specification’s scope, not a promise that every feature is implemented consistently in every browser.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.How to provide a practical Display-P3 fallback
Use an sRGB declaration as the baseline, then override it inside a color-gamut media query for devices that report support for P3. Browsers that do not match the query retain the baseline declaration.
.accent {
color: color(srgb 0.9 0.2 0.4);
}
@media (color-gamut: p3) {
.accent {
color: color(display-p3 1 0.5 0);
}
}The color-gamut feature is a way to test for a reported gamut capability; it does not guarantee that every requested color will look identical across displays. Browsers and devices may render or map colors differently, and a display cannot reproduce colors beyond its capabilities. MDN describes color() as widely available across browsers since May 2023, while noting that support for some parts varies. Check the target browsers and color spaces rather than treating broad function support as uniform support for every feature.
Quick Recap
Best Value
When should you choose color()?
- Use it when you need to state the color space explicitly or specify a value in a space such as Display-P3.
- Use a relative form when the new color should be calculated from an existing color’s channels.
- Use another familiar notation when an ordinary sRGB color is sufficient and an explicit space adds no value.
- For wider-gamut values, provide a suitable baseline and test the browser and display combinations that matter to your project.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
