Notasi fungsional hsla () digunakan untuk mengatur warna dalam format HSL, dan dibutuhkan 4 nilai yang dipisahkan koma: hue, saturation, lightness (atau luminance) dan transparansi alpha.
Sama seperti notasi fungsional rgb () yang memiliki rgba () alfa, notasi fungsional hsl () memiliki hsla (), alfa, yang, seperti halnya fungsi rgba (), memiliki nilai tambahan keempat, nilai alfa , yang merupakan angka desimal antara 0 dan 1 yang mewakili opacity warna, di mana 1 berarti warna sepenuhnya buram, dan 0 berarti warna sepenuhnya transparan.
Contoh berikut ini akan mengatur warna latar belakang pada elemen ke warna ungu semi-transparan, sehingga latar belakang wadah elemen akan terlihat.
.modal { background-color: hsl(270, 100%, 0.5); }
Browser Support
Kata kunci hsl (), hsla (), rgba (), transparan, dan currentColor didukung di semua browser utama dan di Internet Explorer mulai dari versi 9.