CSS hsl() 函數

定義和用法

CSS 的 hsl() 函數使用色相-飽和度-亮度模型（HSL）來指定顏色。還可以添加一個可選的 alpha 分量（表示顏色的透明度）。

提示：HSL 代表色相（Hue）、飽和度（Saturation）和亮度（Lightness），它表示顏色的圓柱坐標表示法。

注意：hsla() 函數是 hsl() 函數的別名。建議使用 hsl() 函數。

實例

例子 1

定義不同的 HSL(A) 顏色：

#p1 {background-color:hsl(120 100% 50%);} /* 綠色 */
#p2 {background-color:hsl(120 100% 75%);} /* 淺綠色 */
#p3 {background-color:hsl(120 100% 25%);} /* 深綠色 */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* 帶透明度的深綠色 */
#p5 {background-color:hsl(120 60% 70%);} /* 柔和的綠色 */
#p6 {background-color:hsl(290 100% 50%);} /* 紫色 */
#p7 {background-color:hsl(290 60% 70%);} /* 柔和的紫色 */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* 帶透明度的柔和紫色 */

親自試一試

例子 2

使用逗號分隔值的舊語法：

#p1 {background-color:hsl(120, 100%, 50%);} /* 綠色 */
#p2 {background-color:hsl(120, 100%, 75%);} /* 淺綠色 */
#p3 {background-color:hsl(120, 100%, 25%);} /* 深綠色 */
#p4 {background-color:hsl(120, 60%, 70%);} /* 柔和的綠色 */
#p5 {background-color:hsl(290, 100%, 50%);} /* 紫色 */
#p6 {background-color:hsl(290, 60%, 70%);} /* 柔和的紫色 */

親自試一試

CSS 語法

絕對值語法

hsl(hue saturation lightness / A)
值 描述
hue 必需。定義色輪上的度數（從 0 到 360）- 0（或 360）是紅色，120 是綠色，240 是藍色。
saturation

必需。定義顏色的飽和度；0% 是灰色，100% 是全色（全飽和度）。

也可以使用 None（與 0% 相同）。
lightness

必需。定義顏色的亮度；0% 是黑色，50% 是正常，100% 是白色。

也可以使用 None（與 0% 相同）。
/ A

可選。表示顏色的 alpha 通道值（從 0%（或 0）- 完全透明到 100%（或 100）- 完全不透明）。

也可以使用 None（表示沒有 alpha 通道）。

默認值是 100%。

相對值語法

hsl(from color hue saturation lightness / A)
值 描述
from color

以關鍵字 from 開頭，后跟一個表示原始顏色的顏色值。

這是相對顏色所基于的原始顏色。
hue 必需。定義色輪上的度數（從 0 到 360）- 0（或 360）是紅色，120 是綠色，240 是藍色。
saturation

必需。定義顏色的飽和度；0% 是灰色，100% 是全色（全飽和度）。

也可以使用 None（與 0% 相同）。
lightness

必需。定義顏色的亮度；0% 是黑色，50% 是正常，100% 是白色。

也可以使用 None（與 0% 相同）。
/ A

可選。表示顏色的 alpha 通道值（從 0%（或 0）- 完全透明到 100%（或 100）- 完全不透明）。

也可以使用 None（表示沒有 alpha 通道）。

默認值是 100%。

技術細節

版本： CSS3

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

Chrome Edge Firefox Safari Opera
hsl()
1 9 1 3.1 9.5
帶 alpha 參數的 hsl()
65 79 52 12.1 52
空格分隔的參數
65 79 52 12.1 52

相關頁面

教程：CSS HSL 顏色

參考：CSS 顏色

參考：CSS hwb() 函數

參考：CSS lab() 函數

參考：CSS lch() 函數

參考：CSS oklab() 函數

參考：CSS oklch() 函數