css中，在設置顏色是有以下三種常用方式：
1. 顏色名（red）16進制（#ccc）
2.rgb(128,128,128)
3.hsl(330,50%,50%) 色度 飽和度 亮度
其中：
R：紅色值。正整數 | 百分數
G：綠色值。正整數 | 百分數
B：藍色值。正整數 | 百分數
H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360
S：Saturation(飽和度)。取值為：0.0% - 100.0%
L：Lightness(亮度)。取值為：0.0% - 100.0%
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%);}
效果如圖：
