Fungsi hsla() CSS

Contoh

Definisi warna HSL yang berbeda dengan kepadatan yang berbeda:

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

Coba sendiri

Definisi dan penggunaan

Fungsi hsla() menggunakan model Hue-saturation-lightness-alpha (HSLA) untuk mendefinisikan warna.

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

Versi: CSS3

Dukungan Browser

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

Fungsi
hsla() 1.0 9.0 3.0 3.1 10.0

Bahasa CSS

hsla(hue, kepadatan, kelembapan, alpha)
Nilai Deskripsi
hue Definisi derajat di garis warna (dari 0 hingga 360) - 0 (atau 360) adalah merah, 120 adalah hijau, 240 adalah biru.
kepadatan Definisi kepadatan - 0% adalah abu-abu, sementara 100% adalah warna yang penuh (satu persen pengisian warna).
kelembapan Definisi kecerahan - 0% adalah hitam, 50% adalah normal, 100% adalah putih.
alpha Definisi kecerahan, angka yang antara 0.0 (transparan sepenuhnya) dan 1.0 (tidak transparan sama sekali).