CSS hwb() 函数

定义和用法

CSS 的 hwb() 函数使用色调-白度-黑度模型（HWB）指定颜色。还可以添加一个可选的透明度通道（表示颜色的透明度）。

实例

定义不同的 HWB(A) 颜色：

#p1 {background-color:hwb(60 40% 20% / 0.5);}
#p2 {background-color:hwb(120 40% 20%);}
#p3 {background-color:hwb(120 40% 20% / 20%);}
#p4 {background-color:hwb(240 40% 20%);}
#p5 {background-color:hwb(240 50% 10%);}
#p6 {background-color:hwb(240 40% 20% / 0.3);}
#p7 {background-color:hwb(300 40% 20% / 0.5);}
#p8 {background-color:hwb(360 40% 20%);}
#p9 {background-color:hwb(360 90% 0%);}

Cuba sendiri

Sintaks CSS

Sintaks nilai absolu

hwb(hue whiteness blackness / A)
Nilai Penerangan
hue

Wajib. Tentukan sudut di atas roda warna (0 hingga 360) - 0 (atau 360) adalah merah, 120 adalah hijau, 240 adalah biru.

Juga boleh digunakan none (sama dengan 0deg).
whiteness

Wajib. Tentukan keputihan gabungan; 0% menunjukkan tiada keputihan, 100% menunjukkan keputihan penuh.

Juga boleh digunakan none (sama dengan 0%).
blackness

Wajib. Tentukan keputihan gabungan; 0% menunjukkan tiada keputihan, 100% menunjukkan keputihan penuh.

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

Pilihan. Menunjukkan nilai kanal keputihan warna (0% atau 0 menunjukkan keputihan penuh, 100% atau 100 menunjukkan tak keputihan penuh).

Juga boleh digunakan none (menunjukkan kanal keputihan).

Nilai lalai adalah 100%.

Sintaks nilai relatif

hwb(from color whiteness blackness / A)
Nilai Penerangan
from color

Bermula dengan kata kerja from, diikuti nilai warna yang mewakili warna asal.

Ini adalah warna asal yang berdasarkan warna relatif.
hue

Wajib. Tentukan sudut di atas roda warna (0 hingga 360) - 0 (atau 360) adalah merah, 120 adalah hijau, 240 adalah biru.

Juga boleh digunakan none (sama dengan 0deg).
whiteness

Wajib. Tentukan keputihan gabungan; 0% menunjukkan tiada keputihan, 100% menunjukkan keputihan penuh.

Juga boleh digunakan none (sama dengan 0%).
blackness

Wajib. Tentukan keputihan gabungan; 0% menunjukkan tiada keputihan, 100% menunjukkan keputihan penuh.

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

Pilihan. Menunjukkan nilai kanal keputihan warna (0% atau 0 menunjukkan keputihan penuh, 100% atau 100 menunjukkan tak keputihan penuh).

Juga boleh digunakan none (menunjukkan kanal keputihan).

Nilai lalai adalah 100%.

Perincian teknikal

Versi: Modul Warna CSS Level 4

Pendukung pereka

Nombor dalam tabel menunjukkan versi pereka paling awal yang menyokong fungsi ini.

Chrome Edge Firefox Safari Opera
hwb()
101 101 96 15 87
Gabungkan nombor dan peratusan dalam parameter
121 121 122 Tidak disokong 107

Halaman yang berkenaan

Rujukan：Warna CSS

Rujukan：Fungsi hsl() CSS

Rujukan：Fungsi lab() CSS

Rujukan：Fungsi lch() CSS

Rujukan：Fungsi oklab() CSS

Rujukan：Fungsi oklch() CSS