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);} /* 带透明度的柔和紫色 */

Coba sendiri

Contoh 2

Dengan sintaks koma yang lama untuk memisahkan nilai:

#p1 {background-color:hsl(120, 100%, 50%);} /* Hijau */
#p2 {background-color:hsl(120, 100%, 75%);} /* Hijau yang pucat */
#p3 {background-color:hsl(120, 100%, 25%);} /* Hijau yang mendalam */
#p4 {background-color:hsl(120, 60%, 70%);} /* Warna hijau yang lembut */
#p5 {background-color:hsl(290, 100%, 50%);} /* Warna ungu */
#p6 {background-color:hsl(290, 60%, 70%);} /* Warna ungu yang lembut */

Coba sendiri

Sintaks CSS

Sintaks nilai absolut

hsl(hue saturation lightness / A)
Nilai Deskripsi
hue Diperlukan. Menentukan derajat di roda warna (dari 0 hingga 360) - 0 (atau 360) adalah merah, 120 adalah hijau, 240 adalah biru.
saturation

Diperlukan. Menentukan kepadatan warna; 0% adalah abu-abu, 100% adalah warna penuh (kepadatan penuh).

Juga boleh digunakan None (yang sama dengan 0%).
lightness

Diperlukan. Menentukan kecerahan warna; 0% adalah hitam, 50% adalah normal, 100% adalah putih.

Juga boleh digunakan None (yang sama dengan 0%).
/ A

Pilihan. Menunjukkan nilai jalur alpha warna (dari 0% (atau 0) - transparan sepenuhnya hingga 100% (atau 100) - tak dapat dilihat sepenuhnya).

Juga boleh digunakan None (menunjukkan tiada jalur alpha).

Nilai baku adalah 100%.

Sintaks nilai relatif

hsl(from color hue saturation lightness / A)
Nilai Deskripsi
from color

Dengan awalan kata kunci from, diikuti dengan nilai warna yang mewakili warna asal.

Ini adalah warna asal yang berdasarkan warna yang relatif.
hue Diperlukan. Menentukan derajat di roda warna (dari 0 hingga 360) - 0 (atau 360) adalah merah, 120 adalah hijau, 240 adalah biru.
saturation

Diperlukan. Menentukan kepadatan warna; 0% adalah abu-abu, 100% adalah warna penuh (kepadatan penuh).

Juga boleh digunakan None (yang sama dengan 0%).
lightness

Diperlukan. Menentukan kecerahan warna; 0% adalah hitam, 50% adalah normal, 100% adalah putih.

Juga boleh digunakan None (yang sama dengan 0%).
/ A

Pilihan. Menunjukkan nilai jalur alpha warna (dari 0% (atau 0) - transparan sepenuhnya hingga 100% (atau 100) - tak dapat dilihat sepenuhnya).

Juga boleh digunakan None (menunjukkan tiada jalur alpha).

Nilai baku adalah 100%.

Detil teknikal

Versi: CSS3

Dukungan pereksa

Angka di dalam tabel menunjukkan versi pereksa pertama yang mendukung fungsi ini.

Chrome Edge Firefox Safari Opera
hsl()
1 9 1 3.1 9.5
dengan alpha Parameter hsl()
65 79 52 12.1 52
Parameter yang dipisahkan dengan spasi
65 79 52 12.1 52

Halaman yang berhubungan

Panduan:Warna HSL CSS

Rujukan：Warna CSS

Rujukan：Fungsi hwb() CSS

Rujukan：Fungsi lab() CSS

Rujukan：Fungsi lch() CSS

Rujukan：Fungsi oklab() CSS

Rujukan：Fungsi oklch() CSS