HTML HSL 和 HSLA 顏色
HSL 代表色相（hue）、飽和度（saturation）和亮度（lightness）。
HSLA 顏色值是 HSL 的擴充套件，增加了一個 Alpha 通道（透明度）。
HSL 顏色值
在 HTML 中，顏色可以用色相、飽和度和亮度（HSL）的形式指定：
hsl(色相, 飽和度, 亮度)
色相是色輪上的度數，範圍從 0 到 360。0 代表紅色，120 代表綠色，240 代表藍色。
飽和度是一個百分比值。0% 表示灰色，100% 表示全色。
亮度也是一個百分比值。0% 表示黑色，100% 表示白色。
嘗試混合下面的 HSL 值進行實驗
色相 (HUE)
0
飽和度 (SATURATION)
100%
亮度 (LIGHTNESS)
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%, 20%)
hsl(0, 0%, 30%)
hsl(0, 0%, 40%)
hsl(0, 0%, 60%)
hsl(0, 0%, 70%)
hsl(0, 0%, 90%)
自己動手試一試 »
HSLA 顏色值
HSLA 顏色值是 HSL 顏色值的擴充套件，增加了一個 Alpha 通道，該通道指定顏色的不透明度。
HSLA 顏色值指定如下：
hsla(色相, 飽和度, 亮度, alpha)
alpha 引數是一個介於 0.0（完全透明）和 1.0（完全不透明）之間的數字。
嘗試混合下面的 HSLA 值進行實驗
色相 (HUE)
0
飽和度 (SATURATION)
100%
亮度 (LIGHTNESS)
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)
自己動手試一試 »
