Fungsi hsla() CSS

Contoh

Tentukan warna HSL berbeda dengan kecerahan yang berbeda:

#p1 {background-color:hsla(120,100%,50%,0.3);} /* Hijau */
#p2 {background-color:hsla(120,100%,75%,0.3);} /* Hijau terang */
#p3 {background-color:hsla(120,100%,25%,0.3);} /* Hijau tua */
#p4 {background-color:hsla(120,60%,70%,0.3);} /* Hijau cerah */

Coba sendiri

Definisi dan penggunaan

Fungsi hsla() menggunakan model Hue-saturation-kelembapan-alpha (HSLA) untuk menentukan warna.

Nilai warna HSLA adalah ekspansi nilai warna HSL, dengan jalur Alpha - jalur ini menentukan kecerahan warna.

Versi: CSS3

Dukungan Browser

Angka dalam tabel menunjukkan versi browser pertama yang mendukung fungsi ini penuh.

Fungsi
hsla() 1.0 9.0 3.0 3.1 10.0

Bentuk CSS

hsla(hue, kepadatan, kelembapan, alpha)
Nilai Deskripsi
hue Tentukan derajat di roda warna (dari 0 hingga 360) - 0 (atau 360) adalah merah, 120 adalah hijau, 240 adalah biru.
kepadatan Tentukan kepadatan - 0% adalah abu-abu, sementara 100% adalah warna penuh (saturasi penuh).
kelembapan Tentukan kecerahan - 0% adalah hitam, 50% adalah normal, 100% adalah putih.
alpha Tentukan kecerahan, angka di antara 0.0 (tebal usia) dan 1.0 (tidak tebal usia).