CSS顏色代碼:十六進制、RGB和HSL值

一、十六進制顏色代碼

十六進制顏色代碼，是通過將紅、綠、藍三種顏色的值轉換成16進制數而得到的顏色代碼。每個顏色由6個字符組成，前兩個字符代表紅色，中間兩個字符代表綠色，後兩個字符代表藍色。

例如，黑色的十六進制代碼為 #000000，其中前兩個字符00代表紅色值為0，中間兩位00代表綠色值為0，後兩位00代表藍色值為0。

而白色的十六進制代碼為#FFFFFF，其中前兩個字符FF代表紅色值為255，中間兩位FF代表綠色值為255，後兩位FF代表藍色值為255。

/* HTML */
<div style="background-color:#000000">黑色</div>
<div style="background-color:#FFFFFF">白色</div>

/* CSS */
div {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 10px;
}

二、RGB顏色代碼

RGB顏色代碼由紅色、綠色、藍色的值構成，每個值的範圍在0-255之間。通過將這三個值組合在一起，就能創建出任何一種顏色。

例如，紅色代碼rgb(255,0,0)，代表紅色值為255，綠色和藍色的值為0，這就是一種完整的紅色。

/* HTML */
<div style="background-color:rgb(255, 0, 0)">紅色</div>
<div style="background-color:rgb(0, 255, 0)">綠色</div>

/* CSS */
div {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 10px;
}

三、HSL顏色代碼

HSL顏色代碼由色相、飽和度和亮度三個值構成。色相表示顏色的基本色，飽和度表示顏色的純度，亮度表示顏色的亮度。

例如，紫色的HSL代碼為hsl(300, 100%, 50%)，其中色相為300度，飽和度為100%，表示顏色非常純，亮度為50%。而灰色的HSL代碼為hsl(0, 0%, 50%)，其中色相值為0，表示灰色為基本色，飽和度為0，表示顏色不純，亮度為50%。

/* HTML */
<div style="background-color:hsl(300, 100%, 50%)">紫色</div>
<div style="background-color:hsl(0, 0%, 50%)">灰色</div>

/* CSS */
div {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 10px;
}

四、顏色名

除了使用十六進制、RGB和HSL顏色代碼外，還可以使用顏色名來表示顏色。例如，使用red表示紅色，blue表示藍色等等。

但是這種方法存在一定的局限性，因為並不是所有的顏色都有對應的名稱，而且不同瀏覽器對顏色名稱的支持也有所區別。

/* HTML */
<div style="background-color:red">紅色</div>
<div style="background-color:blue">藍色</div>

/* CSS */
div {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 10px;
}

五、總結

CSS顏色代碼有多種表示方法，包括十六進制、RGB、HSL和顏色名稱。不同的方法有其自身的優缺點，開發者可根據實際情況選擇使用哪種方法來定義顏色。