Rekomendasi kursus:

CSS hsl() fungsi

Definisi dan penggunaan CSS hsl() Fungsi menggunakan model warna warna-harga-kecerahan (HSL) untuk menentukan warna. Juga dapat menambahkan komponen alpha opsional (untuk kecerahan warna).

Tips:HSL berarti warna (Hue), kepadatan (Saturation) dan kecerahan (Lightness), yang mewakili representasi koordinat lingkaran warna.

Perhatian:hsla() Fungsi adalah hsl() Panggilan alias fungsi. Disarankan untuk menggunakan hsl() Fungsi.

Contoh

Contoh 1

Definisi warna HSL(A) yang berbeda:

#p1 {background-color:hsl(120 100% 50%);} /* Hijau */
#p2 {background-color:hsl(120 100% 75%);} /* Hijau yang ringan */
#p3 {background-color:hsl(120 100% 25%);} /* Hijau yang mendalam */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* Hijau yang mendalam dengan kecerahan */
#p5 {background-color:hsl(120 60% 70%);} /* Hijau yang lembut */
#p6 {background-color:hsl(290 100% 50%);} /* Biru jingga */
#p7 {background-color:hsl(290 60% 70%);} /* Biru jingga yang lembut */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* Berwarna biru jingga dengan kecerahan */

Coba sendiri

Contoh 2

Dengan sintaks yang dipisahkan dengan koma nilai yang lama:

#p1 {background-color:hsl(120, 100%, 50%);} /* Warna hijau */
#p2 {background-color:hsl(120, 100%, 75%);} /* Warna hijau yang cerah */
#p3 {background-color:hsl(120, 100%, 25%);} /* Warna 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

Syntaks CSS

Syntaks nilai absolut

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

Wajib. Definisi kepadatan warna; 0% adalah abu-abu, 100% adalah warna penuh (kepadatan penuh).

Juga dapat digunakan None (sama dengan 0%).
lightness

Wajib. Definisi kecerahan warna; 0% adalah hitam, 50% adalah normal, 100% adalah putih.

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

Pilihan. Menunjukkan nilai jalur alpha warna (dari 0% (atau 0) - transparan penuh sampai 100% (atau 100) - tak terlihat penuh).

Juga dapat digunakan None (berarti tanpa jalur alpha).

Nilai default adalah 100%.

Syntaks nilai relatif

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

Dengan awalan kata kunci from, diikuti dengan nilai warna yang merepresentasikan warna asli.

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

Wajib. Definisi kepadatan warna; 0% adalah abu-abu, 100% adalah warna penuh (kepadatan penuh).

Juga dapat digunakan None (sama dengan 0%).
lightness

Wajib. Definisi kecerahan warna; 0% adalah hitam, 50% adalah normal, 100% adalah putih.

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

Pilihan. Menunjukkan nilai jalur alpha warna (dari 0% (atau 0) - transparan penuh sampai 100% (atau 100) - tak terlihat penuh).

Juga dapat digunakan None (berarti tanpa jalur alpha).

Nilai default adalah 100%.

Detil teknis

Versi: CSS3

Dukungan browser

Angka di tabel menunjukkan versi browser yang 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

Tutoriale: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