First , Ask a question , CSS Color value ：rgb(255, 0, 0), What color is it , You might say it's red , Not really. , At least it may not be the kind of red you think .

Color space

Color space , It is light of certain wavelengths that the human eye can see . How color space describes ？ The most widely used color space map is the international lighting Commission （CIE） stay 1931 Made in , in fact , The real color space is three-dimensional , In order to facilitate understanding and comparison , Therefore, it is customary to use its two-dimensional space map through certain mathematical transformation ：

Color gamut

Color gamut , Color standard . In recent decades, different institutions have developed different color standards ：

Corresponding to the color space map ：

Each color standard is dominated by different industries . such as sRGB, This is HDTV 、PC、 Color standard for professional image processing , Led by Microsoft . This standard is also the color standard most often contacted by the front end , It is also the most widely supported in the computer world One of the color standards . And such as Display-P3（ similar DCI-P3 ） Apple is the dominant color standard , It has been widely used in its software products and hardware products . 

A color standard is a subset of color space . such as sRGB, Carefully observe the triangle formed by its color range （ Or polygons ） Area , Its green 、 red 、 The blue vertex is the greenest it can appear 、 The most popular 、 The bluest color .

The triangular area in the figure above （ Color scheme ） Generally, you can find in the system , such as MacOS Next , stay “ Set up —— Monitor —— Color ” Inside

  therefore , The conclusion is that ： In different color spaces ,“ The most popular ” The colors don't look the same  .

  Color accuracy

Does that mean , The same color space , Two devices with the same hardware , Red rgb(255, 0, 0) It looks the same , Otherwise , This involves a knowledge point of color accuracy , That is, the color is accurate . Write it down as ΔE, In general , The equipment ΔE The smaller the better. . Today's mobile phones ΔE Known as less than 1 了 , This is already an excellent color alignment .

Wide color gamut

In general , Support in addition to sRGB Color gamut outside , Such as Display-P3、 Adobe RGB, Can be called wide color gamut .

Especially Apple products , All support Display-P3 Color standards . obviously ,Display-P3 Of “ Red ”、“ green ” There will be more .

Display-P3 Used DCI-P3 Color gamut of , The standard color temperature is D65（6500K）, standard Gamma The value is set to 2.2（DCI-P3 by 2.6）. For maximum compatibility sRGB, So its color is mild Gamma It's worth it all sRGB Agreement , Did not copy DCI-P3 standard . therefore DCI-P3 The specified standard white will be better than Display-P3 More yellowish , And Display-P3 Due to lower Gamma The overall picture style will be brighter .

How to use a wide color gamut at the front end

Unfortunately , At present, only Safari（UIWebView） The support is better .

.rect {
    background: rgb(255, 0, 0); /*  This line of code is compatible and does not support color() Syntax browser  */
    /*  Background color ： Red  */
    background: color(display-p3 1 0 0);
}

You can also use media query to determine whether it supports wide color gamut ：

@media (color-gamut: p3) {

 /* Do colorful stuff. */

}

Of course @supports Feature queries are also possible ：

(color: color(display-p3 1 1 1)) {

 /* Do colorful stuff. */

}

stay js part , You can use the following code to determine whether the browser supports Display-P3 Color gamut ：

if (window.matchMedia("(color-gamut: p3)").matches) {
 // Add your code.
}

Display-P3 Color and sRGB How colors change with each other ？ The most direct way is to Safari Right click the color in the developer tool ：

 MacOS Also comes with a color conversion calculator ：ColorSync Utility（ Color synchronization utility ）:

web The picture uses a wide color gamut

If you want to web Use in Display-P3 Pictures of the , To accept the color management of a large number of Android phones is sRGB Fact , Some color information will be lost when rendering . It won't look so bright . in addition , Also pay attention to the front-end development process , The image compression tool may automatically remove the of the file “ Color description ” Information , And pictures CDN Generally, such metadata will also be removed , Then the picture will be used by the device as sRGB To show ……

summary

1. If the designer wants to web Try Display-P3, Can be found in CSS Progressive enhancement uses , Pay attention to complete fallback Color

2. web Pictures available Display-P3, Pay attention to the picture “ Color description ” Don't get killed

3. The color of movies shown in cinemas is more like the color of Apple Devices