----Color Edition----

In CSS, there are three common ways of setting colors: 1. Color name (red) 16 binary (#ccc)  2.rgb (128,128,128) 3.HSL (330,50%,50%) Chroma Saturation Brightness

which

R: Red value. Positive integers | Percentage
G: Green value. Positive integers | Percentage
B: Blue value. Positive integers | Percentage

H:hue (hue). 0 (or 360) indicates red, 120 is green, 240 is blue, and other values are preferred to specify the color. Value is: 0-360
S:saturation (saturation). Values are: 0%-100%
L:lightness (brightness). Values are: 0%-100%

eg

Html:

<div class= "Div1" style= "width:200px;height:200px" >div1 HEX #ccc </div>
<div class= "Div2" style= "width:200px;height:200px" >div2 rgb</div>
<div class= "Div3" style= "width:200px;height:200px" >div3 hsl</div>

Css:

body{

Display:flex;
Flex-wrap:wrap;

}

. Div1{background-color: #ccc;}

. DIV2{BACKGROUND-COLOR:RGB (128, 128, 128);}

. DIV3{BACKGROUND-COLOR:HSL (330, 20%, 50%);}

Effect

----Color Edition----