The Expanding Gamut of Color on the Web

CSS was born in 1996, when most computer monitors had very limited color expression. CSS colors, whether defined in RGB, HSL or hexadecimal formats, are limited to the display technology at that time and are all located in the sRGB color space.

Today, most new devices come with wide color gamut displays. Color gamut refers to the range of colors that the display can display. Wide color gamut displays can display more colors than sRGB, and they use Display P3 color space. (There is also Rec.2020, a larger color space, but it's very rare and needs no consideration at the moment.) As Lea Verou of the CSS Working Group said, "Our website looks dull because screen technology advances faster than the update speed of the CSS color specification." If we want to take advantage of the range of colors that most screens can display, we need to use a new CSS color format: lab, lch, or display-p3.

Some websites have begun to use wide color gamut colors, such as the official website of Panic, which once developed the popular Coda text editor and the still-popular Untitled Goose Game, and a marketing website for a product called Playdate. They all use display-p3 ingeniously, presenting stunning bright colors.

To understand the color range of sRGB missing, check out the following example. The inner square contains colors beyond the sRGB color gamut. The external squares show the effect of the color being limited to the sRGB color gamut (which means the closest color that the browser can display without using display-p3, lab or lch). (Please note that current support is limited to Safari users only.)

The color selector in the Safari technology preview can conveniently show which colors are outside the sRGB color gamut.

Detailed explanation of the new syntax

Before diving into the syntax of lab(), lch() and color() functions, let's take a look at the new rgb() and hsl() syntax (supported by all web browsers except Internet Explorer).

In the old syntax, each number was separated by a comma: rgb(200, 100, 20);. Now commas are no longer required, so the space-separated value rgb(200 100 20); is also valid. To specify transparency, we can now use rgb(200 100 20/50%) instead of using rgba() or hsla(). The new syntax does not bring real benefits, but it is worth a look, as they are consistent with the syntax of lch(), lab() and color().

lab(), lch(), and color() always use space-separated numbers (commas are not allowed), and a forward slash followed by a percentage to specify transparency. Let's see how they work.

CSS color() function and display-p3 color space

The color() function allows you to specify a color in a specific color space (rather than using sRGB color spaces used in rgb(), hsl(), or hexadecimal). In order to use wide color gamut colors, the color space we need to specify is display-p3, which uses three values ​​to represent the red, green and blue channels of the color: 1 0 0 means pure red, 0 0 1 means pure blue, and 0 1 0 means pure green.

 <code>background-color: color(display-p3 1 0 0.331); /* 亮粉色*/</code>

At the time of writing, display-p3 is the only way to access high gamut colors and has been supported by Safari since 2017. However, once lab() and lch() are implemented (Chrome and Safari are currently in development), they will be better options. Here are Lea Verou's views:

display-p3 is not perceived uniform and it is difficult to create variants (brighter or darker, brighter or less brighter, etc.) by adjusting its parameters. Furthermore, it is just a short-term solution. It works now, because it is rare to be able to display screens with a wider color gamut than P3. Once the hardware progresses again, color(display-p3 ...) will face the same problem as today's sRGB colors. LCH and Lab are device-free and can represent the entire color gamut of human vision, so they work properly no matter how hardware progresses.

Better brightness: Lab and LCH

You may have seen some articles online that think HSL is easier to understand than RGB or hexadecimal values.

Here are Chris Coyier's views in 2015:

The real appeal of HSLa is that it more intuitively illustrates how changing values ​​will affect the color. Increasing the second value will increase the saturation of the color. Reducing the third value will reduce the brightness of the color. This makes it easier to create your own color changes.

While HSL may be easier to understand than hexadecimal or RGB, it is far from perfect. The way it calculates brightness does not match human perception. According to HSL, hsl (240deg 100% 50%) and hsl (60deg 100% 50%) have the same brightness, i.e. 50%. Let's compare the two.

To the human eye, blue looks darker. As Brian Kardell said:

These operations can only be done well when mixing colors, brightening, darkening and other operations include perceptions of how our eyes actually work, rather than how the machines like to store and display colors.

Here is a visual example provided by Lea Verou, which demonstrates the advantages of Lab/LCH over HSL. She commented:

One trick to create beautiful gradients with the same color at different brightness is to convert to Lab, change the L value, and then convert back to HSL/RGB.

Both Lab and LCH use CIELAB color space, which is designed to be consistent with human vision. If you give two colors the same brightness value, they appear to be the same brightness to the human eye regardless of their hue.

Lab

 <code>background-color: lab(40% 83 -104); /* 一种紫色*/</code>

L in lab() stands for brightness, written as percentage (can be up to 400% to get super bright white, but usually between 0% and 100%). A and B do not represent anything – they are color channels. A is the value between green (negative) and red (positive), while B is the value between blue (negative) and yellow (positive). Brightness is easy to understand for us. However, red/green and blue/yellow values ​​are not completely intuitive. LCH may be a better alternative.

LCH

 <code>background-color: lch(69% 56 244); /* 一种蓝色*/</code>

lch() is the easiest to understand among new color values. L still represents brightness (and works exactly the same way), C represents chromaticity, and H represents hue. Chroma is largely similar to saturation, but can also be understood as color intensity or vibrancy. Unlike other new color formats, you can actually predict the effect that changing these individual values ​​will have - in this respect it is similar to HSL. The best way to know it is to try this LCH color selector.

Define the fallback value

We need to consider two support: browser support for new CSS color values ​​and the screen's ability to display these colors.

For browsers that do not support color functions, it is easy to fall back to the most recent sRGB value, which is exactly the same way we are used to defining the fallback attribute:

 <code>.pink-text { color: rgb(255, 0, 79); /* 将用作回退值*/ color: color(display-p3 1 0 0.331); /* 如果支持则使用*/ }</code>

Due to the cascading stylesheet, if the browser does not understand the second line of code in the example above, it will be ignored and the rgb() value will be used. It can be laborious to type two lines of CSS code every time you want to specify a color. CSS variables are an excellent way to solve this problem. In this example, we will use @supports to determine whether the browser supports color functions in CSS:

 <code>/* https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/ */ :root { --bright-green: rgb(0, 255, 0); } /* 支持时使用Display-P3颜色。 */ @supports (color: color(display-p3 1 1 1)) { :root {  --bright-green: color(display-p3 0 1 0); } } header { color: var(--bright-green); }</code>

If colors are particularly important to your design, you can use background images, as most browsers support high gamut colors in images.

 <code>@supports not (color: color(display-p3 1 0 0.331)) { @supports (-webkit-background-clip: text){  .pink-text {   background-image: url("pink-P3.png");   background-size: cover;   -webkit-background-clip: text;   -webkit-text-fill-color: transparent;  } } } .pink-text { color: rgb(255, 0, 79); color: color(display-p3 1 0 0.331); }</code>

There is a PostCSS plugin that converts lab() and lch() functions to rgb(). If you use Sass, Miriam Suzanne has a tool called Blend.

Color media query

@supports tells us whether the browser supports the relevant CSS syntax. What it doesn't tell us is whether the user's monitor is able to actually display certain color values. If the monitor does not support high gamut colors, the screen will display the most recent sRGB color. This means that all monitors are taken care of without writing any extra code.

However, if you would rather choose the fallback color manually than have the browser calculate one for you, you can pass a second color value to the color() function. However, this requires the browser to support color functions (but support for the second parameter has not been implemented in any browser yet).

 <code>background-color: color(display-p3 1 0 0.331, #f54281);</code>

If you need more granular control to perform some advanced operations, the Media Query Level 4 specification provides a new color-gamut media query that can help us solve this problem.

 <code>@media (color-gamut: p3) { /* 仅在支持P3颜色的硬件上运行的代码*/ }</code>

In this example, we are obviously checking for P3 support, but we can also check the aforementioned rec-2020 color space, which has a wider color gamut than P3. Currently, the number of screens that support rec-2020 is very small, including only HD TVs, which means it won't be a common target for developers in the near future. You can also check sRGB support, but now almost all monitors support it. On the other hand, color-gamut queries have fairly good browser support at the time of writing.

Note: Dynamic Range Media Query

In the Safari 13.1 release notes, dynamic range media queries are used to conditionally apply P3 colors. Obviously, this is not a good use case. According to Florian Rivoal, editor of the Media Query Specification, this query is intended for use in videos:

[S]ome screen can show ultra-bright lights for brief amounts of times, that are used in videos for things like sparks, direct sunlight, etc. This is much brighter than white, and isn't meant to be used with static images. It would be uncomfortable, and would also damage the screen.

Another note: Design tool support

Unfortunately, popular web design tools such as Figma, Sketch, and XD do not currently support Lab, LCH, or P3 color spaces. However, Photoshop does have a Lab color picker.

That's it! In an era when screens support more colors than ever before, CSS colors are also expanding. This is an exciting time for color lovers!

The above is the detailed content of The Expanding Gamut of Color on the Web. For more information, please follow other related articles on the PHP Chinese website!