How much do you know about color representation in the web?

Preface

If you want to represent various colors in the web, the first thing that comes to your mind is probably to use hexadecimal or RGB to represent them. But in the actual web, there are far more than these two. Today I’m going to talk to you in this article about the various ways of expressing colors on the web.

Take the following code as an example, you can copy the code to see the effect:

HTML

<div class="box">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>

CSS

.box {
    width: 200px;
    height: 200px;
    padding: 20px 20px;
    display: flex;
    justify-content: space-between;
}
.box > div {
    width: 50px;
    height: 50px;
    border-radius: 4px;
}

English words

There are 140+ color names predefined in the HTML and CSS color specifications. You can click here to view them. The advantage of using English words directly is straightforward, but the disadvantage is that 140+ words are really hard to remember, and they cannot contain all the colors.

.one { background-color: red; }
.two { background-color: green; }
.three { background-color: blue; }

Hexadecimal

#RRGGBB , where the hexadecimal system is essentially the hexadecimal representation of RGB, and every two digits represent the colors of the RR (red), GG (green) and BB (blue) three-color channels Order. All values must be between 00 and FF.

.one { background-color: #00FFFF; }
.two { background-color: #FAEBD7; }
.three { background-color: #7FFFD4; }

The color format similar to #00FFFF can also be abbreviated as #0FF .

.one { background-color: #0FF; }

If you need to bring transparency, you can add two additional numbers like this:

.one { background-color: #00FFFF80; }

RGB

In the rgb() function, the CSS syntax is as follows:

rgb(red, green, blue)

Each parameter red, green, blue defines the intensity of the color, which can be an integer between 0 and 255 or a percentage value (from 0% to 100%)

.one { background-color: rgb(112,128,144); }
.two { background-color: rgb(30%,10%,60%); }
.three { background-color: rgb(    0,139,139); }

The principles of hexadecimal and RGB both use the three primary colors of light: red, green, and blue. Tens of millions of colors can be combined by using these three colors. A simple calculation, 256 levels of RGB colors can combine a total of about 16.78 million colors, that is, 256 × 256 × 256 = 16,777,216 kinds. As for why it is 256 levels, because 0 is also one of the values.

RGBA

Alpha channel on top of RGB to specify the opacity of the object.

.one { background-color: rgba(112,128,144, 0.5); }
.two { background-color: rgb(30%,10%,60%, 0.2); }
.three { background-color: rgb(    0,139,139, 0.5); }

HSL

HSL stands for hue, saturation, and lightness, respectively, and is a notation points in the RGB color model in a cylindrical coordinate system.

The CSS syntax is as follows:

hsl(hue, saturation, lightness)

• Hue: The number of degrees on the color wheel (from 0 to 360)-0 (or 360) is red, 120 is green, and 240 is blue.
• Saturation: a percentage value; 0% means shades of gray, and 100% means full color.
• Brightness: a percentage; 0% is black, 100% is white.

example:

.one { background-color: hsl(20, 100%, 50%); }
.two { background-color: hsl(130, 100%, 25%); }
.three { background-color: hsl(240, 80%, 80%); }

HSLA

The relationship between HSLA and HSL is similar to the relationship between RGBA and RGB. The HSLA color value extends the Alpha channel on the HSL color value-specifying the opacity of the object.

The CSS syntax is as follows:

hsla(hue, saturation, lightness, alpha)

example:

.one { background-color: hsla(20, 100%, 50%, 0.5); }
.two { background-color: hsla(130, 100%, 25%, 0.75); }
.three { background-color: hsla(240, 80%, 80%,0.4); }

opacity

opacity attribute sets the transparency level of an element.

The CSS syntax is as follows:

opacity: value|inherit;

It is somewhat different in behavior RGBA in A opacity also affects the style of child elements, but RGBA does not. Those who are interested can give it a try.

Keyword

In addition to <color>s , CSS also defines several groups of keywords about colors, which have their own advantages and use cases. Here are two special keywords transparent and currentcolor .

transparent

transparen specifies transparent black, if an element is overlaid on another element, and you want to display the element below; or you don’t want an element to have a background color, and you don’t want the user’s browser color settings to affect your design . transparent can come in handy.

In CSS1, transparent is used as background-color . In subsequent CSS2 and CSS3, transparent can be used on any property with a color value.

.one { 
    background-color: transparent;
    color: transparent;
    border-color: transparent;
 }

currentcolor

currentcolor keyword can refer to the color attribute value of an element.

.one { 
    color: red;
    border: 1px solid currentcolor;
 }

Equivalent to

.one { 
    color: red;
    border: 1px solid red;
 }

The current mainstream browsers described below are not yet well supported, but they are already listed as CSS4 standards, so it is good to know about them.

HWB

hwb() function notation represents a given color according to the hue, whiteness and blackness of the color. You can also add the alpha component to represent the transparency of the color.

The syntax is as follows:

hwb[a](H W B[/ A])

example:

hwb(180 0% 0%)
hwb(180 0% 0% / .5)
hwb(180, 0%, 0%, .5); /* 使用逗号分隔符 */

Currently only Safari supports it.

Lab、Lch

lab() function notation represents CIE L a b * a given color in the represents the brightness, the value range is [0,100]; a represents the component from green to red, the value range is [ 127,-128]; b* represents the components from blue to yellow, and the value range is [127,-128]. Theoretically, it can show the full range of colors that humans can see.

The syntax is as follows:

lab(L a b [/ A])

example:

lab(29.2345% 39.3825 20.0664);
lab(52.2345% 40.1645 59.9971);

lch() function notation represents a given color in the CIE LCH color space. It uses the same a b *, but it uses L to represent the lightness value, C to represent the saturation value, and H to represent the hue angle value column Shape coordinates.

The syntax is as follows:

lch(L C H [/ A])

example:

lch(29.2345% 44.2 27);
lch(52.2345% 72.2 56.2);

Regarding the concept of commonly used color spaces, you can check it , or click on the article to learn more.

color()

color() function notation allows colors to be specified in a specific color space.

The syntax is as follows:

color( [ [<ident> | <dashed-ident>]? [ <number-percentage>+ | <string> ] [ / <alpha-value> ]? ] )

example:

color(display-p3 -0.6112 1.0079 -0.2192);
color(profoto-rgb 0.4835 0.9167 0.2188)；

Here you can learn about the color gamut standard .

CMYK

CMYK i.e. printing four-color mode

The four-color printing mode is a chromatographic mode used in color printing. It uses the principle of color mixing of the three primary colors of the color material, plus black ink, and a total of four colors are mixed and superimposed to form the so-called "full-color printing". The four standard colors are: C: Cyan = cyan, also known as'sky blue' or'azure blue' M: Magenta = magenta, also known as'magenta'; Y: Yellow = yellow; K: blacK = black . The abbreviation here uses the last letter K instead of the beginning B to avoid confusion with Blue. The CMYK mode is a subtractive color mode, and the corresponding RGB mode is an additive color mode.

Computer displays use RGB color values to display colors, while printers usually use CMYK color values to display colors. In the CSS4 standard, it is planned to use the device-cmyk() function to achieve this.

The syntax is as follows:

device-cmyk() = device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? , <color>? )
<cmyk-component> = <number> | <percentage>

example:

device-cmyk(0 81% 81% 30%);
device-cmyk(0 81% 81% 30% / .5);

refer to

https://www.w3school.com.cn/cssref/css_colors_legal.asp

https://www.w3.org/TR/css-color-4/

https://www.cnblogs.com/ypppt/p/13229542.html

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

https://blog.csdn.net/gdymind/article/details/82357139

https://blog.csdn.net/JiangHui1211/article/details/84592774

finally

Regarding the color representation method in the web, that's basically it. If you want to learn more, you can click the text link in the text or the reference link at the end of the text.