CSS HSL 顏色
HSL 代表色相、飽和度和亮度。
HSL 值
在 CSS 中，可以使用色相、飽和度和亮度 (HSL) 來指定顏色，形式如下：
hsl(色相, 飽和度, 亮度)
色相是色輪上的一個角度，範圍從 0 到 360。0 是紅色，120 是綠色，240 是藍色。
飽和度是一個百分比值。0% 表示灰色，100% 表示全綵色。
亮度也是一個百分比。0% 是黑色，50% 是中性色（既不亮也不暗），100% 是白色。
嘗試混合下面的 HSL 值
色相
0
飽和度
100%
亮度
50%
示例
hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)
自己動手試一試 »
飽和度
飽和度可以被描述為顏色的強度。
100% 是純色，沒有灰色調。
50% 是 50% 的灰色，但你仍然可以看到顏色。
0% 是完全的灰色；你再也看不到顏色了。
示例
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
自己動手試一試 »
亮度
顏色的亮度可以被描述為你想要給顏色多少光，其中 0% 表示沒有光（黑色），50% 表示 50% 的光（既不暗也不亮），100% 表示全亮度（白色）。
示例
hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)
自己動手試一試 »
灰色調
灰色調通常透過將色相和飽和度設定為 0 來定義，並調整亮度從 0% 到 100% 來獲得更深/更淺的色調。
示例
hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)
自己動手試一試 »
HSLA 值
HSLA 顏色值是 HSL 顏色值的擴充套件，增加了一個 alpha 通道，用於指定顏色的不透明度。
HSLA 顏色值指定如下：
hsla(色相, 飽和度, 亮度, alpha)
alpha 引數是一個介於 0.0（完全透明）和 1.0（完全不透明）之間的數字。
嘗試混合下面的 HSLA 值
色相
0
飽和度
100%
亮度
50%
Alpha
0.5
示例
hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)
自己動手試一試 »
影片：CSS 顏色 HSL
