Color on the Web has seen many iterations. When I started to fall in love with the Web in the late nineties, every self-respecting web designer was using web-safe colors. Although it can be argued that they never really worked, because colors still looked different on different screens, web-safe colors were at least the attempt to achieve consistency in a time where it was worth mentioning in ads that a monitor was able to display “millions of colors“.
Today, we are using not only the hex notation and rgb() in CSS but also rgba() to control transparency. Our displays have grown to be much more accurate in how they display color. And in recent years, so-called wide gamut displays have become increasingly popular. While the old lowest common denominator was the tiny sRGB color space, many modern displays are able to reproduce a much larger color gamut, resulting in more vivid, vibrant colors. Once primarily used in prepress workflows to reproduce the full range of printable colors, wide gamut displays can now be found in both pro and consumer monitors, laptops, and even tablets and smartphones. The DCI-P3 color space, originally designed as a standard for digital movie projection for the film industry, made its debut in a consumer computer in September 2015 in Apple’s iMac. A year later, both Apple and Samsung released their first flagship phones with P3 wide gamut display.
Now, support for these wider color spaces is finally coming to the Web. In case you want to dig deeper, Lea Verou has written a brilliant article on the upcoming changes. The CSS 4 Color specification includes, among other things, lab() and lch(). LCH is a color space designed to cover the entire spectrum of human vision, so it is even larger than P3. Safari already supports it, Chrome is going to support it soon, and Firefox is considering implementation. With the lch() color function and support for the P3 color space in our devices, we will therefore soon have access to about 50% more colors than with sRGB. Another advantage is that LCH, which stands for “Lightness, Chroma, Hue”, is perceptually uniform. So when you define two colors that share the same lightness, the two colors will indeed be perceived as being equally bright by the human eye, which can also be useful if you want to create an accessible color palette.
Here is how you write a color with the new lch() function, in the new commaless syntax:
/* CSS / Sass */
lch(50% 73 327)
The first value stands for the lightness of the color and is written as a percentage ranging from 0 to 100. The second value, chroma, is a number that describes how vibrant and saturated the color is. It starts at 0 but is theoretically unbound, so how high it can be set depends on the color gamut of the monitor. Usually, it doesn’t exceed 230, though. The third value ranging from 0 to 360.
If you want to also use an optional alpha channel, you can do so with the new notation that uses a slash:
/* CSS / Sass */
lch(50% 73 327 / 75%)
Lea Verou also made a neat LCH Color Picker. Have a look at it and play around with the values a bit. For best results, use Safari on a machine with a wide gamut display.
CSS 4 Color also adds a new color() function, which can be used to specify a color in a certain color space, like P3, for example:
/* CSS / Sass */
color(display-p3 1 0 0.331)
Here, the color function is used to first define the color space and then set the color with three values ranging from 0 to 1 which represent the red, green, and blue channels. Ollie Williams nicely explains the new color() function as well as LCH in his post over at CSS-Tricks.
As you can see, a lot is going on at the moment in terms of how we can write colors in CSS. And while a few of those features might not yet be ready for prime time in all browsers, we can already make use of them in supporting browsers using progressive enhancement. We can, for example, use the new color-gamut media query to write specific CSS only for devices that support a certain color space.
/* CSS / Sass */
@media (color-gamut: p3) {
.main {
background-color: color(display-p3 1 0 0.331);
}
}
Another option would be to check for support using @supports:
/* CSS / Sass */
/* sRGB color. */
:root {
--bright-green: rgb(0, 255, 0);
}
/* Display-P3 color, when supported. */
@supports (color: color(display-p3 1 1 1)) {
:root {
--bright-green: color(display-p3 0 1 0);
}
}
header {
color: var(--bright-green);
}
So while Safari is currently the only browser with full support for lch() and color() there really is no need to wait until the other vendors have added support. I for one will look into how I can update the colors of my site a bit over the next days to make my site ready for this next, exciting era of color on the World Wide (Gamut) Web.
A few more links (I’ll probably add some more over time):
- Wide Gamut Color in CSS with Display-P3
- Improving Color on the Web
- Responsive Color with Media Queries
-
This is the seventh post of my 100 days of writing series. You can find a list of all posts here.
~
