preface
To represent various colors in the web, the first thing we think of is to use hexadecimal or RGB. But in the actual web, there are far more than these two. Today's article will talk to you about various ways of representing colors in 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
140 + color names are predefined in HTML and CSS color specifications, which can be clicked in here View. The advantage of using English words directly is direct and clear, but the disadvantage is that 140 + words are really difficult to remember, and can not contain all colors.
.one { background-color: red; }
.two { background-color: green; }
.three { background-color: blue; }hexadecimal
Hexadecimal indicates color: #RRGGBB. The hexadecimal here is essentially the hexadecimal representation of RGB. Every two bits represent the color scale of RR (red), GG (green) and BB (blue) three color channels. All values must be between 00 and FF.
.one { background-color: #00FFFF; }
.two { background-color: #FAEBD7; }
.three { background-color: #7FFFD4; }Color formats 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 as follows:
.one { background-color: #00FFFF80; }RGB
In the rgb() function, CSS syntax is as follows:
rgb(red, green, blue)
Each parameter red, green and blue defines the intensity of the color, which can be an integer or percentage value between 0 and 255 (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 principle of hexadecimal and RGB makes use of the three primary colors of light: red, green and blue. Tens of millions of colors can be combined by using these three colors. By simple calculation, 256 RGB colors can combine about 16.78 million colors, i.e. 256 × two hundred and fifty-six × 256 = 16777216 kinds. As for why it is 256, because 0 is also one of the values.
RGBA
RGBA is an extension of RGB Alpha channel , 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 brightness respectively. It is a method of integrating the points in the RGB color model in the cylindrical coordinate system Representation.
CSS syntax is as follows:
hsl(hue, saturation, lightness)
- Hue: 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% represents gray shadows, while 100% is full color.
- Brightness: a percentage; 0% is black and 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 that between RGBA and RGB. HSLA color value extends the Alpha channel over HSL color value - specifies the opacity of the object.
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
The opacity property sets the transparency level of an element.
CSS syntax is as follows:
opacity: value|inherit;
It is different from A in RGBA in behavior: opacity also affects the style of child elements, while RGBA does not. You can try if you are interested.
keyword
In addition to the various number grammars of < color > s, CSS also defines several groups of keywords about color, all of which have their own advantages and use cases. Here are two special keywords, transparent and currentcolor.
transparent
transparent specifies transparen t black. If one element covers another element and you want to display the following elements; Or you don't want an element to have a background color, and you don't want users' color settings to affect your design. transparent will come in handy.
In CSS1, transparent is used as a value of background color. In subsequent CSS2 and CSS3, transparent can be used on any attribute with color value.
.one {
background-color: transparent;
color: transparent;
border-color: transparent;
}currentcolor
The currentcolor keyword can reference the color attribute value of an element.
.one {
color: red;
border: 1px solid currentcolor;
}amount to
.one {
color: red;
border: 1px solid red;
}The mainstream browsers described below are not well supported, but they have been listed as CSS4 standard, so it's good to know.
HWB
The hwb() function representation represents a given color according to the hue, whiteness and blackness of the color. You can also add an 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); /* Use comma separator */
Currently only Safari supports.
Lab,Lch
lab() function representation CIE l a b * color space For the given color in, L represents brightness, and the value range is [0100]; a represents the component from green to red, and the value range is [127, - 128]; b * represents the component from blue to yellow, and the value range is [127, - 128]. Theoretically, it can show the whole 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 representation represents the given color in CIE LCH color space, and uses the same color space as L a b *, but it uses L to represent the lightness value, C to represent the saturation value, and H to represent the cylindrical coordinates of hue angle value.
The syntax is as follows:
lch(L C H [/ A])
example:
lch(29.2345% 44.2 27); lch(52.2345% 72.2 56.2);
For the concept of common color space, you can query or click This article Understand.
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> ]? ] )
example:
color(display-p3 -0.6112 1.0079 -0.2192); color(profoto-rgb 0.4835 0.9167 0.2188)；
Here you can find out Gamut standard.
CMYK
CMYK is Printing four-color mode
The four-color printing mode is a color registration mode used in color printing. Using the three primary color mixing principle of color materials and blacK ink, 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'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. CMYK mode is subtractive mode, and the corresponding RGB mode is additive 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.
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);
reference resources
https://www.w3school.com.cn/c...
https://www.w3.org/TR/css-col...
https://www.cnblogs.com/ypppt...
https://developer.mozilla.org...
https://blog.csdn.net/gdymind...
https://blog.csdn.net/JiangHu...
last
These are the basic color representation methods in the web. If you want to know more, you can click the text link in the article or the reference link at the end of the article.