㈠HSL(H,S,L)
⑴通過對色相(H)、飽和度(S)、明度(L)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色
⑵取值
H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360
S：Saturation(飽和度)。取值為：0.0% - 100.0%
L：Lightness(亮度)。取值為：0.0% - 100.0%
⑶兼容性
淺綠 = 支持
紅色 = 不支持
粉色 = 部分支持
⑷示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ background-color:hsl(360, 50%, 50%); } </style> </head> <body> <div>hsl顏色值</div> </body> </html>
效果圖：
㈡HSLA(H,S,L,A)
⑴此色彩模式與HSL相同，只是在HSL模式上新增了Alpha透明度
⑵參數說明：
H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360
S：Saturation(飽和度)。取值為：0.0% - 100.0%
L：Lightness(亮度)。取值為：0.0% - 100.0%
A：Alpha透明度。取值0~1之間。
⑶兼容性
淺綠 = 支持
紅色 = 不支持
粉色 = 部分支持
⑷示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ background-color:hsl(360, 50%, 50%,.5); } </style> </head> <body> <div>hsla顏色值</div> </body> </html>
效果圖：
