OSC invites you to party! 1028 Suzhou Yuan Founding Association, let’s hunt for treasures in the AI era

introduction

Recently, the three major browser engines have released their latest versions, which support the W3C CSS Color 4 standard, including new color selection methods and corresponding syntax, which can display more color gamuts and color spaces, which means that the web can display more colors. Richer, higher-definition colors. Although currently only supported by the latest versions of modern browsers, we can take a look at this new standard in advance.color()

This article will first briefly introduce several basic concepts of color to understand why a new standard is needed, and then introduce the methods and syntax used in the new standard.

basic concepts

color gamut

Refers to the optional range of colors. For example, sRGB color gamut, the color gamut standard widely used on the web, uses red, green, and blue as the basic colors, with a color value range of 0~255. When the three basic colors are mixed with each other, 255*255 can be displayed. *255 colors, which can be roughly understood as the sRGB color gamut.

The sRGB color gamut used by modern web CSS only meets basic color requirements. The color range that can be displayed is far smaller than the color range that the human eye can perceive, and it is also far lower than the requirements for high-definition display.

The following is a comparison of the color value ranges of sRGB and several other color gamut standards:

The following is a comparison of sRGB and the color gamut perceptible to the human eye:

color space

Color space can be understood as a spatial mathematical model based on a certain color gamut standard, such as some simple 3D models of squares and cylinders, which can be used to mark the spatial position of each color in the color gamut, the relationship between each color, etc. .

Using sRGB as an example again, the three basic colors of red, green, and blue can be set as three linear coordinate axes. Each color can be marked as a point in the cube, which is used in CSS. The rgb() method is used to get the color. The parameters are the coordinates (R, G, B) of the specified color in the color space.

Another example is hsl(), another color selection method in CSS, which uses a completely different color space HSL. H hue (hue) is an angle with a value ranging from 0 to 360, which can be used as an angular axis; S saturation (Saturation) and L brightness (Lightness) as two linear axes can be constructed as a cylindrical space. hsl (H, S, L) is used in CSS to represent color.

A color gamut standard can be described using different color spaces, and different color gamut standards can also use the same type of color space representation. For example, sRGB can be described using , , and other methods, while color gamuts such as Display-P3 and Rec2020 can be described using the (R, G, B) color space, but the boundary range of the space is different.rgb()hsl()hwb()

Why support HD color

High definition means a higher range of color gamut. Let us first intuitively feel the visual difference between narrow color gamut and wide color gamut:

In actual CSS color values, we commonly use many methods , , , , corresponding to different color spaces, but they all use colors within the same color gamut, that is, sRGB, which can only display what the human eye can perceive. With 30% of the color, it’s like using a TV from the 1990s to play a 4K movie.rgb()rgba()hsl()hwb()

Although many current network display devices still use the sRGB standard and do not support displaying colors of wider color gamut standards, only some HDR displays, video recording equipment, and film production use wider color gamut standards such as Display P3. However, the demand for high-definition will only increase, and supporting wider color gamut standards is destined to be one of the goals of future web-side display.

In response to this trend, W3C's CSS Color 4 standard defines new methods and other syntaxes that can more flexibly specify colors under various color gamut standards and better display color gradients. Recently, the three major major web browsers have also supported W3C's new standards.color()

CSS Color 4

Review existing color spaces

Since 2000, we have had many ways to specify color values: color values ( , ), , , or some characters of specific colors (such as , etc.); starting around 2010, browsers began to support methods; in 2017, color values Expanded support for transparency, and various browsers have since added support for the method.hex#rgb#rrggbbrgb()rgba()whitepinkhsl()hex#rrggbbaahwb()

Different methods correspond to different color spaces, but the color gamut is the same, that is, sRGB.

HEX

Use hexadecimal numbers to represent the values of R, G, B, and A respectively.

.valid-css-hex-colors {
  /* 一般标准 */
  --3-digits: #49b;
  --6-digits: #4499bb;

  /* 带透明度 */
  --4-digits-opaque: #f9bf; /* 不透明 */
  --8-digits-opaque: #ff99bbff; /* 不透明 */
  --4-digits-with-opacity: #49b8; /* 透明度88% */
  --8-digits-with-opacity: #4499bb88; /* 透明度88% */
}

RGB

Use decimal numbers from 0 to 255, or percentages from 0% to 100% to specify R, G, and B. Transparency A is represented by percentages or numbers from 0 to 1.

.valid-css-rgb-colors{
  --classic:rgb(64, 149, 191);
  --modern:rgb(64 149 191);
  --percents:rgb(25% 58% 75%);

  --classic-with-opacity-percent:rgba(64, 149, 191, 50%);
  --classic-with-opacity-decimal:rgba(64, 149, 191, .5);

  --modern-with-opacity-percent:rgb(64 149 191 / 50%);
  --modern-with-opacity-decimal:rgb(64 149 191 / .5);

  --percents-with-opacity-percent:rgb(25% 58% 75% / 50%);
  --percents-with-opacity-decimal:rgb(25% 58% 75% / 50%);

  --empty-channels:rgb(none none none);
}

HSL

This color space is more in line with natural human understanding, without the need to understand how the basic red, green, and blue colors are mixed. The parameters respectively represent:

H: hue, hue, value 0deg~360deg
S: Saturation, saturation, value 0%~100%
L: Lightness, brightness, value 0%~100%

.valid-css-hsl-colors{
  --classic:hsl(200deg, 50%, 50%);
  --modern:hsl(200 50% 50%);

  --classic-with-opacity-percent:hsla(200deg, 50%, 50%, 50%);
  --classic-with-opacity-decimal:hsla(200deg, 50%, 50%, .5);

  --modern-with-opacity-percent:hsl(200 50% 50% / 50%);
  --modern-with-opacity-decimal:hsl(200 50% 50% / .5);

  /* 无色相和饱和度，仅用亮度可表示黑白色 */
  --empty-channels-white:hsl(none none 100%);
  --empty-channels-black:hsl(none none 0%);
}

BOOST

Similar in form to HSL, but the three dimensions used are:

H: Hue, hue, value 0deg~360deg;
W: Whiteness, white concentration (0~100%);
B: Blackness, black concentration (0~100%);

.valid-css-hwb-colors{
  --modern:hwb(200deg 25% 25%);
  --modern2:hwb(200 25% 25%);

  --modern-with-opacity-percent:hwb(200 25% 25% / 50%);
  --modern-with-opacity-decimal:hwb(200 25% 25% / .5);

  /* 无色相和饱和度，仅用亮度可表示黑白色 */
  --empty-channels-white:hwb(none 100% none);
  --empty-channels-black:hwb(none none 100%);
}

New method color()

The parameters of the new method are similar to the method, using values on the three linear axes of R, G, and B to specify the color. The difference is that the first parameter of the method can receive color space identifiers in other color gamuts except sRGB. , and the values of R, G, and B only support 0~1 or 0%~100%.color()rgb()color()

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

Method definition: color(colorspace c1 c2 c3[/A])

Parameter colorspace: identifier, indicating which color space to use. Optional values include: , , , , , , , , and .srgbsrgb-lineardisplay-p3a98-rgbprophoto-rgbrec2020xyzxyz-d50xyz-d65
Parameters c1, c2, c3: can be number (0~1) , percentage or none, corresponding to each parameter value in the specified color space, for example, corresponds to the values of R, G, B, the specific need to see the specified color space Describes the dimensions of color.srgbsrgb-lineardisplay-p3
Parameter A: optional, which can be number (0~1), percentage or none, indicating the transparency of the color

Use color() to describe different color spaces

sRGB

The value of 0~255 is no longer supported, and is changed to the range of 0~1, which is actually equivalent to the percentage form. If a value greater than 1 is passed, it will be parsed as 1 by default.

.valid-css-srgb-colors{
  --percents:color(srgb 34% 58% 73%);
  --decimals:color(srgb .34 .58 .73);

  --percents-with-opacity:color(srgb 34% 58% 73% / 50%);
  --decimals-with-opacity:color(srgb .34 .58 .73 / .5);

  /* 色值为none或空时，表示黑色 */
  --empty-channels-black:color(srgb none none none);
  --empty-channels-black2:color(srgb);
}

Linear sRGB

Linear sRGB and sRGB are different color spaces. The value of sRGB is corrected through a gamma curve function and does not change linearly. It is more suitable for the perceptual characteristics of the human eye, that is, the perception of light and dark is non-linear; while The color change of Linear sRGB is linear. The following is the actual gradient trend of the two color spaces when the light and dark gradient from 0-1.

.valid-css-srgb-linear-colors{
  --percents:color(srgb-linear 34% 58% 73%);
  --decimals:color(srgb-linear .34 .58 .73);

  --percents-with-opacity:color(srgb-linear 34% 58% 73% / 50%);
  --decimals-with-opacity:color(srgb-linear .34 .58 .73 / .5);

  /* 色值为none或空时，表示黑色 */
  --empty-channels-black:color(srgb-linear none none none);
  --empty-channels-black2:color(srgb-linear);
}

Display P3、Rec2020

display P3 was first promoted by Apple. Now this standard has become the basic standard for HDR display, and can display 50% more colors than sRGB. The Rec2020 standard has a wider color gamut than display P3 and can be used to display 4K or even 8K images. However, there are currently very few terminal displays that support this standard. Both color gamuts are described using RGB.

.valid-css-display-p3-colors{
  --percents:color(display-p3 34% 58% 73%);
  --decimals:color(display-p3 .34 .58 .73);

  --percent-opacity:color(display-p3 34% 58% 73% / 50%);
  --decimal-opacity:color(display-p3 .34 .58 .73 / .5);

  /* 无色度色相，展示为黑色 */
  --empty-channels-black:color(display-p3 none none none);
  --empty-channels-black2:color(display-p3);
}

.valid-css-rec2020-colors {
  --percents: color(rec2020 34% 58% 73%);
  --decimals: color(rec2020 .34 .58 .73);

  --percent-opacity: color(rec2020 34% 58% 73% / 50%);
  --decimal-opacity: color(rec2020 .34 .58 .73 / .5);

  /* 无色度色相，展示为黑色 */
  --empty-channels-black: color(rec2020 none none none);
  --empty-channels-black2: color(rec2020);
}

CIE standards

Let's go back to the first two color gamut diagrams. We will find that the color gamut described based on RGB is basically a triangle, because it is mixed with three basic colors, but the color gamut that the human eye can perceive is shaped like a horseshoe. Graph (specifically how to draw it, if you are interested, you can search for it yourself). Color spaces based on the RGB standard are difficult to fully cover all colors that the human eye can perceive. The color space based on the CIE standard (an international standard for measuring color developed by the International Commission on Illumination, which describes the human eye's perception of color and the measurement method of color) can theoretically include all the colors that can be perceived by human vision. color.

The new CSS Color 4 standard also adds support for the CIE standard color gamut. The lab(), lch(), oklab(), and oklch() introduced below are all new color selection methods based on CIE.

lab()

lab()The method describes colors in the color space based on the CIE standard, which can cover the full color gamut visible to the human eye. Different from the dimensions used to describe colors based on RGB, the dimensions used by lab are:

L: lightness, the brightness of the visual linear gradient, the value range is or ;0~1000%~100%
A: Represents one of the two color axes that is more suitable for human visual characteristics: red-green, and the value range is or . When A is a positive value, it is more red; when it is a negative value, it is more green; -125~125-100%~100%
B: Represents the second of the two color axes that is more in line with the visual characteristics of the human eye: blue-yellow, and the value range is or . A positive value is more yellow; a negative value is more blue.-125~125-100%~100%

.valid-css-lab-colors{
  --percent-and-degrees:lab(58% -16 -30);
  --minimal:lab(58 -16 -30);

  --percent-opacity:lab(58% -16 -30 / 50%);
  --decimal-opacity:lab(58% -16 -30 / .5);

  /* 后两个参数为none是可表示纯灰度 */
  --empty-channels-white:lab(100 none none);
  --empty-channels-black:lab(none none none);
}

lch()

The dimensions used by lch are:

L: lightness, the brightness of the visual linear gradient, the value range is 0~100 or 0%~100%;
C: chroma, the purity of the color, similar to saturation, with a value ranging from 0 to 230, but in fact, this value has no upper limit;
H: Hue, hue, similar to hsl and hwb, is an angular axis, with a value range of 0deg~360deg;

.valid-css-lch-colors{
  --percent-and-degrees:lch(58% 32 241deg);
  --just-the-degrees:lch(58 32 241deg);
  --minimal:lch(58 32 241);

  --percent-opacity:lch(58% 32 241 / 50%);
  --decimal-opacity:lch(58% 32 241 / .5);

  /* 后两个参数为none是可表示纯灰度 */
  --empty-channels-white:lch(100 none none);
  --empty-channels-black:lch(none none none);
}

oklab()

Oklab is a corrected version of lab, which optimizes the quality of image processing. In CSS, it means gradient optimization and color processing function optimization, eliminating hue shift (hue shift, that is, changing the color purity in the lab, the hue will also change), use The dimensions are consistent with lab().

.valid-css-oklab-colors{
  --percent-and-degrees:oklab(64% -.1 -.1);
  --minimal:oklab(64 -.1 -.1);

  --percent-opacity:oklab(64% -.1 -.1 / 50%);
  --decimal-opacity:oklab(64% -.1 -.1 / .5);

  /* 后两个参数为none是可表示纯灰度 */
  --empty-channels-white:oklab(100 none none);
  --empty-channels-black:oklab(none none none);
}

oklch()

Correspondingly, oklch is the corrected version of lch. The logic of color selection is similar to that of hsl. Select an angle in the circular color wheel to select a hue, and then adjust the brightness and purity, that is, the saturation, purity and saturation in hsl. They can be basically considered equivalent. The only difference is that the adjustment of purity and brightness is usually performed simultaneously. Otherwise, the purity can easily exceed the range of the target color gamut. Here is an oklch color picker for you to try.

.valid-css-oklch-colors{
  --percent-and-degrees:oklch(64% .1 233deg);
  --just-the-degrees:oklch(64 .1 233deg);
  --minimal:oklch(64 .1 233);

  --percent-opacity:oklch(64% .1 233 / 50%);
  --decimal-opacity:oklch(64% .1 233 / .5);

  /* 后两个参数为none是可表示纯灰度 */
  --empty-channels-white:oklch(100 none none);
  --empty-channels-black:oklch(none none none);
}

color-mix()

In addition to some new color picking methods, the new standard also has a color mixing function that can mix the colors in the various color spaces mentioned above to calculate new colors.

color-mix(in lch, plum, pink);
color-mix(in lch, plum 40%, pink);
color-mix(in srgb, #34c9eb 20%, white);
color-mix(in hsl longer hue,hsl(120 100% 50%) 20%, white);

Method definition: color-mix(method, color1[ p1], color2[ p2])

Parameter method: Specify the color space for color mixing, in the form of in <color space> , <color space> includes: , , , , , , , , , , orsrgbsrgb-linearlaboklabxyzxyz-d50xyz-d65hslhwblchoklch
Parameters color1, color2: any color in the color space specified in the corresponding method;
Parameters p1 and p2: are optional parameters, the value range is 0%~100%, they can indicate the proportion of color mixing, if empty, the default color1 and color2 are 50% each;

How to use HD color in your projects

When we apply a new grammar, we usually have two strategies: graceful degradation and progressive enhancement. The specific implementation plan is:

Graceful downgrade

This is relatively simple to implement, that is, using the old and new color selection methods at the same time, allowing the browser to automatically determine which color to display.

/* 原代码 */
color: red;
color:color(display-p3 1 0 0);

/* 如果浏览器不支持display-p3，则会只解析第一行 */
color: red;

/* 如果浏览器支持，则会最终使用第二行 */
color:color(display-p3 1 0 0);

progressive enhancement

Use @supports and @media to first determine whether the current browser supports the new color gamut standard, and provide new color values if conditions permit.

Color Gamut Media Query

dynamic-range : The value is standard or high, used to determine whether the current hardware device supports high definition, high contrast, and high color accuracy. However, the judgment of this attribute is relatively general and cannot accurately determine whether the browser supports the new color gamut and color space. .

@media(dynamic-range: high){
  /* safe to use HD colors */
  color: color(display-p3 34% 58% 73%);
}

color-gamut : The value is srgb, p3 or rec2020, which can be used to determine whether the user device supports the sRGB, Display P3 or REC2020 color gamut.

@media(color-gamut: srgb){
  /* safe to use srgb colors */
  color: #4499bb;
}

@media(color-gamut: p3){
  /* safe to use p3 colors */
  color: color(display-p3 34% 58% 73%);
}

@media(color-gamut: rec2020){
  /* safe to use rec2020 colors */
  color: color(rec2020 34% 58% 73%);
}

In addition to using CSS media queries directly, you can also use methods in JavaScript to perform media queries.window.matchMedia()

const hasHighDynamicRange = window.matchMedia('(dynamic-range: high)').matches;

console.log(hasHighDynamicRange);// true || false

const hasP3Color = window.matchMedia('(color-gamut: p3)').matches;

console.log(hasP3Color);// true || false

Color space query

Use to determine whether a css method or attribute is supported@supports

@supports(background:rgb(0 0 0)){
  /* rgb color space supported */
  background:rgb(0 0 0);
}


@supports(background:color(display-p3 0 0 0)){
  /* display-p3 color space supported */
  background:color(display-p3 0 0 0);
}


@supports(background:oklch(0 0 0)){
  /* oklch color space supported */
  background:oklch(0 0 0);
}

Applications

In practical applications, during the transition period between the old and new standards, the above query methods can be used comprehensively. The following is an example that is compatible with the old and new standards:

:root{
  --neon-red:rgb(100% 0 0);
  --neon-blue:rgb(0 0 100%);
}

/* 设备是否支持展示高清 */
@media(dynamic-range: high){

  /* 浏览器是否能解析display-p3 */
  @supports(color:color(display-p3 0 0 0)){

    /* 安全使用display-p3 */
    --neon-red:color(display-p3 1 0 0);
    --neon-blue:color(display-p3 0 0 1);
  }
}

Development and debugging

If you have updated the latest version of the chrome browser, you will find that the color picker in DevTools already supports the new syntax in CSS Color 4. Click on the color attribute in the page element. In the pop-up color picker, the intermediate color value The arrow on the right. In the previous version, clicking the arrow switched between hex, rgb, hsl and hwb. But in the new version, clicking the arrow will bring up a drop-down box, where you can see all the new color spaces and methods, and The replaceable color value corresponding to the current color value.

At the same time, after selecting a different color space, the adjustable parameters of the color will also change accordingly.

When we select a color value that is not in the sRGB color gamut, we will find that an sRGB dividing line will be displayed in the upper area of the color picker, and we can clearly see the color gamut of the currently selected color. This helps developers differentiate between high-definition colors and non-high-definition colors.

And when we select a color outside the sRGB range and click the arrow to the right of the color value to pop up the option list, we will find that the color value under the sRGB color gamut will be followed by a triangle exclamation mark. This shows that the current color value is beyond the range that sRGB can describe, and similar colors can only be used as replacements.

For more updates about HD colors in chrome DevTools, please refer to the official documentation .

Summarize

Although color gamuts and color spaces other than sRGB have just started on the web, future design and development requirements may slowly emerge, especially for H5 animations, games, 3D images, etc., and the requirements for color display will not Staying in the sRGB stage forever, I hope this simple introduction can help everyone start to understand something about color. If there are any errors or omissions, please correct them and discuss them.

Reference article:

1. https://web.dev/articles/color-spaces-and-functions?hl=en

2. https://developer.chrome.com/articles/high-definition-css-color-guide/

3. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color

Author: Jingdong Technology Zheng Li

Source: JD Cloud Developer Community Please indicate the source when reprinting

CSS color gamut, color space, CSS Color 4 new standard | JD Cloud technical team