A Modern CSS Color Guide

Hi everyone, I am CUGGZ.

Colors are everywhere in CSS, they can be used as text, background, shadow, table, border, link and other attributes. Most of the colors we use in CSS are hex and RGB. In fact, there are many ways to express colors. Let’s get to know the color system in CSS!

1. CSS named colors

CSS provides 148 named colors, all browsers support these names, and these names are all predefined color values. Below are some color names and their corresponding hexadecimal color values:

View all predefined color names: https://www.w3schools.com/colors/colors_names.asp

Here is an example using color names:

div {
 color: black;
 border: 1px solid blueviolet;
 background: skyblue;
}

Note: All named colors are case insensitive.

Besides color names, there are some other named colors and keywords worth mentioning:

（1）transparent

transparent keyword is used A shortcut for rgba(0, 0, 0, 0), which means full transparency. This keyword is currently supported in all browsers. It is the default value of the background-color property.

div {
 background-color:transparent;
 }

（2）currentColor

currentColor indicates the current color. If not specified, the text color will be inherited from the parent container. So, the following CSS rules are equivalent:

div {
 color: red;
 background-color: currentColor;
}

div {
 color: red;
  background-color: red;
}

This attribute is very convenient when used in SVG, you can specify The fill or stroke color is set to currentColor to ensure that the SVG color matches its parent's text color.

（3）inherit

inherit is a reservation The word, which is not limited to color, indicates that the attribute takes the same value as the attribute of the element's parent. For inherited properties, the main use is to override another rule.

(4) System color

There are some Other special color keywords, which are used to match some system elements, aim to maintain the consistency of the application on the browser. System colors come in pairs: background color - foreground color. The following are system color related keywords:

The following is the system color support of different browsers:

2. RGB color

RGB value is also our commonly used color representation. RGB refers to red-green-blue, this order is very important. Each color is specified using a number between 0 and 255. The most common RGB values ​​are black: rgb(0,0,0) and white: rgb(255,255,255). RGB notation allows us to access the same range of colors as hexadecimal values ​​in a more readable form.

Here is an example of using RGB values ​​to represent colors:

div {
 color: rgb(0,0,0);
 border: 1px solid rgb(155,55,89);
 background: rgb(255,255,255);
}
Besides, we can also use the attribute called rgba() to define alpha value for rgb value, alpha value is the percentage of transparency. It is similar to rgb, but allows adding a fourth value. The opacity range can be any value between 0 and 1, with 0 being the minimum value (no opacity) and 1 being the maximum value (full opacity):
div {
 color: rgba(0,0,0,0.5);
 border : 1px solid rgba(255,0,0,0.8 );
 background: rgba(0,125,0< /span>,0.2);
}
 Note that hexadecimal color values ​​are not case sensitive. Therefore, the display effects of #ff0000, #FF0000, and #Ff0000 are consistent.
3. Hex color 
 We can also use hexadecimal values ​​to represent colors in CSS, which is the way we use the most color representations. Hexadecimal is represented using 16 symbols, using 0 - 9 to represent the values ​​0 to 9, and A - F to represent the values ​​10 to 15, as follows:
In CSS, 6 hexadecimal numbers are used to represent colors. This means that two numbers are used to represent the red (R), green (G) and blue (B) components respectively. For example, #000000 represents black, which is the smallest hexadecimal value; #FFFFFF represents white, which is the largest hexadecimal value.
Here is an example using color names:
div { 
 color: #000000 span>;
 border: 1px solid #00FF00;
 background: # FF0000;
}
 We can also use 3 values ​​(one for each color) to shorten the sixteen For base values, if the value of every two digits is the same, it can be abbreviated by half:
div {
 color: #000;
 border: 1px solid #0F0;
 background: # F00;
}
We can also define alpha value for hexadecimal color, alpha value is transparency percentage. In hexadecimal codes, an additional two digits are added to the six-digit sequence to form an eight-digit sequence. For example, to set black #000000 in hex code, to add 50% transparency, you would change it to #00000080.
As you can see, hexadecimal color values ​​are hard to read. It is almost impossible to guess the color of an element by reading the hexadecimal value.
4. HSL color 
Hue: A hue describes a value on the color wheel, from 0 to 360 degrees , starting from red (0 and 360);
Saturation: Saturation is the vividness of the selected hue , 100% means a fully saturated bright color, 0% means a fully desaturated gray; 
Brightness: The lightness level of the color, lower values ​​will Darker, closer to black, higher values ​​will be brighter, closer to white. 
The representation of the HSL color function is as follows:
hsl(Hue, Saturation, < span >Lightness)
Where Hue is the hue value, that is, the position on the color wheel, which can be 0 to 360deg Any value in between, this parameter can also be connected to the angular unit turn (turn) and no unit. The explicit effects of the following three rules are the same:
div {
 background-color: hsl< /span>(180deg, 50%, 50%);
}

div span> {
 background-color: hsl(0.5turn, 50%, 50 %);
}

div {
 background-color: hsl(< span >180, 50%, 50%);
}
 some common HSL color values:
In addition, the HSL color value can also add alpha value to indicate transparency, and its usage is as follows:
hsla(Hue, Saturation, < span >Lightness / alpha)
There is no need to separate values ​​with commas here, Instead use slashes, like:
div {
 background-color: hsl< /span>(0 100% 50% / 0.5);
}
5. HWB color 
HWB stands for Hue-Whiteness-Blackness, which means hue, whiteness and blackness.
Hue: an angle in the color wheel;
 Whiteness: Indicates the percentage of the amount of white to be mixed. The higher the value, the whiter the color. 
Blackness: Indicates the percentage of the amount of black to be mixed. The higher the value, the darker the color. 
Like HSL, hue can be any value from 0 to 360. Blackness and whiteness are used to control how much black and white are mixed in the selected hue. They are also values ​​between 0-100%. When it is 100%, it will appear completely black or completely white. If equal amounts of white or black are mixed together, the color will become grayer and grayer. This function is useful for creating monochromatic palettes:
hwb() can also add alpha value to indicate transparency, also use slash to separate:
hwb(194 0% 0%) 
hwb(194 0% 0% / .5) 
Note: This color format is currently only on Safari 15 Supported, use with caution.
6. LAB color 
LAB is a color space accessible in software such as Photoshop that represents the entire range of colors that humans can see. It is represented using three axes: brightness, a-axis, and b-axis.
Luminance: From black to white. The lower the value, the closer the color is to black. 
A axis: From green to red. Lower values ​​are closer to green and higher values ​​are closer to red. 
B axis: From blue to yellow. Lower values ​​are closer to blue and higher values ​​are closer to yellow. 
The brightness value can be any percentage, not limited to 0% and 100%, and can exceed 100%. Super Bright White can be used in percentages up to 400%. The values ​​of the a and b axes can be positive or negative. Two negative values ​​will result in a color towards the green/blue end of the spectrum, while two positive values ​​can produce a more orange/red hue. All parameters are separated by spaces:

div {
 background-color: lab(80% 100 50);
}

div {
 background-color: lab(80% -80 -100< /span>);
}
lab() can also add alpha value to indicate transparency, also use slash to separate:
div {
 background-color: lab< /span>(80% -80 -100 / .5);
}
 
Note: This color format is currently only supported on Safari 15, use with caution.
7. LCH color 
LCH stands for Lightness, Chroma and Hue. It has the same L value as Lab, but instead of using the coordinates a* and b*, it uses C (chroma) and H (hue). Hue can be a value between 0 and 360. Hue represents the amount of color, it is similar to saturation in HSL. But the chroma value can exceed 100, theoretically it is unlimited.
div {
 background-color: lch< /span>(80% 100 50);
}
 For the chromaticity value, the current browser and monitor can display a limited amount of color, only the value between 0-230 is useful, and the difference from 230 is not big after exceeding :
This method can also add a fourth optional parameter alpha. The function respects space separation (alpha has a slash):
div {
 background-color: lch< /span>(80% 100 50 / .5);
}
Note: This color format is currently only supported on Safari 15, use with caution.
Why do you need LAB and LCH when you have HSL? Because you can get a wider range of colors with LAB or LCH. LCH and LAB are designed to give us access to the full range of human vision. Besides that, HSL and RGB are not perceptually uniform, and in HSL, increasing or decreasing brightness can have completely different effects depending on hue.
8. CMYK color 
CMYK stands for Cyan, Magenta, Yellow and Key, which match the ink colors in your printer. While screens typically display color in RGB, printers typically represent color using a combination of cyan, magenta, yellow, and black, which are the most common ink colors.
You can use device-cmyk() to specify CMYK colors, use spaces to separate parameters, and you can also add alpha values ​​to set transparency.
div {
 background-color: device- cmyk(1 0 0 0);
}
Note, this method has compatibility issues, use it with caution.
9. Color mixing 
In the CSS Color Module Level 5 proposal, the concept of color mixing and the related method color-mix() are proposed, which can mix two colors, similar to the mix() function in Sass. color-mix() allows us to specify the color space, and by default uses LCH, which has excellent mixing effects. It is possible to specify how much of each color to mix:
div {
 background-color: color- mix(in lch, red, blue);
}

div {
 background-color:  color-mix(in lch, red 30%, 70% blue);
}