Fungsi hwb() CSS

definisi dan penggunaan

CSS hwb() Fungsi menggunakan model warna warna-keputihan-kegelapan (HWB) untuk menentukan warna. Juga dapat menambahkan saluran kelembaban yang opsional (menunjukkan kelembaban warna).

Contoh

Definisi warna HWB(A) yang berbeda:

#p1 {background-color:hwb(60 40% 20% / 0.5);}
#p1 {background-color:hwb(120 40% 20%);}
#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%);}

Coba Sendiri

CSS Syntax

Bentuk ekspresi nilai absoluthue whiteness blackness / A)
Nilai Deskripsi
hue

Wajib. Membuat definisi sudut di garis warna (0 sampai 360) - 0 (atau 360) adalah merah, 120 adalah hijau, 240 adalah biru.

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

Wajib. Membuat definisi keputihan yang dicampur; 0% menunjukkan tak ada keputihan, 100% menunjukkan keputihan penuh.

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

Wajib. Membuat definisi kegelapan yang dicampur; 0% menunjukkan tak ada kegelapan, 100% menunjukkan kegelapan penuh.

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

Pilihan. Menentukan nilai kanal kecerahan warna (0% atau 0 menunjukkan keterbukaan penuh, 100% atau 100 menunjukkan tak keterbukaan penuh).

Juga dapat digunakan none (mengartikan transparensi yang tak ada).

Nilai standar adalah 100%.

Bentuk ekspresi nilai relatif

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

Dimulai dengan kata kunci from, diikuti dengan nilai warna yang menunjukkan warna asli.

Ini adalah warna asli yang berdasarkan warna yang relatif.
hue

Wajib. Membuat definisi sudut di garis warna (0 sampai 360) - 0 (atau 360) adalah merah, 120 adalah hijau, 240 adalah biru.

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

Wajib. Membuat definisi keputihan yang dicampur; 0% menunjukkan tak ada keputihan, 100% menunjukkan keputihan penuh.

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

Wajib. Membuat definisi kegelapan yang dicampur; 0% menunjukkan tak ada kegelapan, 100% menunjukkan kegelapan penuh.

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

Pilihan. Menentukan nilai kanal kecerahan warna (0% atau 0 menunjukkan keterbukaan penuh, 100% atau 100 menunjukkan tak keterbukaan penuh).

Juga dapat digunakan none (mengartikan transparensi yang tak ada).

Nilai standar adalah 100%.

Detil teknis

Versi: Modul Warna CSS Level 4

Dukungan browser

Angka di tabel menunjukkan versi browser yang pertama yang mendukung fungsi ini.

Chrome Edge Firefox Safari Opera
hwb()
101 101 96 15 87
Campur angka dan persen dalam parameter
121 121 122 Tidak didukung 107

Halaman yang berhubungan

Referensi：Warna CSS

Referensi：Fungsi hsl() CSS

Referensi：Fungsi lab() CSS

Referensi：Fungsi lch() CSS

Referensi：Fungsi oklab() CSS

Referensi：Fungsi oklch() CSS