current position:Home>Some color knowledge to understand at the front end

Some color knowledge to understand at the front end

2022-04-29 09:18:01Programming meow

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 ……




  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

copyright notice
author[Programming meow],Please bring the original link to reprint, thank you.

Random recommended