preface

When you want to represent colors on the Web, the first thing that comes to mind is probably hexadecimal or RGB. But in the real Web, it’s much more than that. This article will talk about the various ways in which color can be represented 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>
Copy the code

CSS

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

The English word

More than 140 color names are predefined in the HTML and CSS color specifications and can be viewed here. The advantage of using English words directly is that they are straightforward, but the disadvantage is that 140+ words are really hard to remember and can’t contain all colors.

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

hexadecimal

The hexadecimal is the color: #RRGGBB, where the hexadecimal is essentially RGB hexadecimal notation, each two bits represent the RR (red), GG (green) and BB (blue) color channel color levels. All values must be between 00 and FF.

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

It can also be shortened to #0FF for color formats like #00FFFF.

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

If transparency is required, two additional numbers can be added as follows:

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

RGB

In RGB (), CSS syntax is as follows:

rgb(red, green, blue)
Copy the code

Each parameter red, green, and Blue defines the intensity of the color and 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); }
Copy the code

The principle of hexadecimal and RGB is to use the three primary colors of light: red, green, blue. You can use these three colors to create millions of colors. Simple calculation, 256 levels of RGB colors can be combined with a total of about 16.78 million colors, that is, 256×256×256=16777216. As for why level 256, because 0 is also a number.

RGBA

RGBA simply extends an Alpha channel above RGB, specifying 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); }
Copy the code

HSL

HSL stands for hue, saturation and lightness, respectively. It is a representation of points in RGB color models in cylindrical coordinate systems.

The CSS syntax is as follows:

hsl(hue, saturation, lightness)
Copy the code
  • Hue: Degrees on the color wheel (from 0 to 360) – 0 (or 360) is red, 120 is green, and 240 is blue.
  • 2. A percentage value; 0% represents a gray shadow, while 100% is full color.
  • Brightness: a percentage; 0% black, 100% white.

Example:

.one { background-color: hsl(20.100%.50%); }
.two { background-color: hsl(130.100%.25%); }
.three { background-color: hsl(240.80%.80%); }
Copy the code

HSLA

The relationship between HSLA and HSL is similar to that between RGBA and RGB, with HSLA color values extending the Alpha channel over HSL color values – specifying the object’s opacity.

The CSS syntax is as follows:

hsla(hue, saturation, lightness, alpha)
Copy the code

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); }
Copy the code

opacity

The opacity property sets the opacity level of an element.

The CSS syntax is as follows:

opacity: value|inherit;
Copy the code

Opacity also affects the style of child elements, whereas RGBA does not. Those who are interested can have a try.

The keyword

In addition to the various numeric syntax of
S, CSS defines several sets of keywords for color, each with its own advantages and use cases. Here are two special keywords: transparent and currentColor.

transparent

Transparen specifies transparent black if one element is on top of another and you want to display the following element; 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 will come in handy.

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

.one { 
    background-color: transparent;
    color: transparent;
    border-color: transparent;
 }
Copy the code

currentcolor

The currentColor keyword can reference the color attribute value of an element.

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

The equivalent of

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

The following are not supported by major browsers, but are standard in CSS4, so it’s good to know about them.

HWB

The HWB () function notation represents a given color based on its hue, whiteness, and blackness. Alpha components can also be added to indicate color transparency.

The syntax is as follows:

hwb[a](H W B[/ A])
Copy the code

Example:

hwb(180 0% 0%) hwb(180 0% 0% / .5) hwb(180, 0%, 0%, .5); /* Use the comma delimiter */Copy the code

Currently only Safari supports it.

Lab, Lch

The lab() function representation represents a given color in the CIE L* a * b * color space, where L* represents brightness and ranges from [0,100]; A * represents the component from green to red, and its value ranges from [127,-128]. B * represents the component from blue to yellow, ranging from [127,-128]. It could theoretically show the full range of colors that humans can see.

The syntax is as follows:

lab(L a b [/ A])
Copy the code

Example:

Lab (29.2345% 39.3825 20.0664); Lab (52.2345% 40.1645 59.9971);Copy the code

The LCH () function representation represents a given color in the CIE LCH color space, using the same color space as L * A * B *, but using L for brightness values, C for saturation values, and H for cylindrical coordinates of hue Angle values.

The syntax is as follows:

lch(L C H [/ A])
Copy the code

Example:

LCH (44.2 and 29.2345%); LCH (52.2345% 72.2 56.2);Copy the code

For the concept of common color space, you can find out by yourself, or click on this article.

color()

The color() function notation allows you to specify colors in a specific color space.

The syntax is as follows:

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

Example:

Color (the display - p3-0.6112-1.0079-0.2192). Color (profoto-rgb 0.4835 0.9167 0.2188);Copy the code

Here’s a look at the gamut standard.

CMYK

CMYK is printing four color mode

Printing four-color mode is a color mode used in color printing. It uses the principle of mixing three primary colors of color materials and black ink to mix and overlay four colors in total, forming the so-called “full-color printing”. The four standard colors are: C: Cyan = Cyan, also known as’ sky blue ‘or’ deep blue ‘M: Magenta = Magenta, also known as’ Magenta’; Y: Yellow = Yellow; K: blacK= blacK. The abbreviation uses the last letter K instead of the beginning B to avoid confusion with Blue. CMYK mode is subtractive mode, and the corresponding RGB mode is additive mode.

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

The syntax is as follows:

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

Example:

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

reference

www.w3school.com.cn/cssref/css_…

www.w3.org/TR/css-colo…

www.cnblogs.com/ypppt/p/132…

Developer.mozilla.org/en-US/docs/…

Blog.csdn.net/gdymind/art…

Blog.csdn.net/JiangHui121…

The last

So that’s basically how you represent colors on the Web. If you want to learn more, you can click on the text link or the reference link at the end of the article.