Mengenal Warna HSL dan HSLA di CSS

Home » CSS

Halo teman-teman!
Setelah sebelumnya kita belajar tentang warna hex, sekarang kita lanjut ke satu format warna yang sering dibilang paling "visual" di CSS, yaitu HSL dan HSLA.

Dengan HSL, kita bisa menentukan warna berdasarkan tiga komponen: Hue (warna utama), Saturation (kejenuhan warna), dan Lightness (kecerahan). Lalu HSLA adalah versi tambahannya dengan satu nilai ekstra: Alpha, untuk transparansi.

Kalau RGB itu seperti mencampur cahaya, maka HSL lebih seperti berpikir pakai roda warna. Yuk kita bahas satu per satu!

Apa Itu Hue?

Hue adalah jenis warna yang kamu pilih dari roda warna. Nilainya dari 0 sampai 360:

0 = merah
120 = hijau
240 = biru

Contoh:

h1 {
  color: hsl(0, 100%, 50%); /* merah terang */
}

Semakin kamu ubah nilainya, warnanya pun ikut bergeser di lingkaran warna.

Apa Itu Saturation?

Saturation menunjukkan seberapa kuat warna tersebut.

100% berarti warnanya penuh
0% berarti jadi abu-abu (tidak ada warna)

Contoh:

p {
  color: hsl(240, 0%, 50%); /* abu-abu */
}

Mau warna yang cerah dan berani? Naikkan saturation-nya!

Apa Itu Lightness?

Lightness adalah seberapa terang atau gelap warna kamu.

0% = hitam total
50% = normal
100% = putih total

Contoh:

div {
  background-color: hsl(120, 100%, 25%); /* hijau tua */
}

Dengan main di nilai lightness ini, kamu bisa dapat efek bayangan atau highlight tanpa harus ganti warna dasar.

Format Lengkap HSL

Format dasar penulisannya seperti ini:

hsl(hue, saturation, lightness)

Contoh lain:

.box {
  border: 2px solid hsl(30, 100%, 50%); /* oranye */
}

Mengenal HSLA: Transparansi di Dunia HSL

Sama seperti RGBA, kita bisa tambahkan nilai transparansi ke format HSL dengan Alpha. Nilai alpha berada antara 0 (transparan penuh) sampai 1 (tidak transparan).

Contoh:

.overlay {
  background-color: hsla(0, 100%, 50%, 0.3); /* merah semi transparan */
}

Ini sangat berguna kalau kamu ingin buat efek layering, highlight, atau elemen dengan latar belakang transparan.

Kelebihan Menggunakan HSL dan HSLA

Lebih intuitif dan mudah dibayangkan daripada RGB
Mudah mengatur tone warna (terang-gelap) tanpa ganti hue
Sangat fleksibel untuk membuat tema desain yang harmonis

Yuk Coba Sendiri!

Sekarang waktunya kamu eksplorasi warna pakai HSL dan HSLA! Buka file CSS kamu, lalu coba ubah warna teks, latar, atau border menggunakan nilai hsl() dan hsla(). Mainkan kombinasi hue, saturation, dan lightness sampai kamu dapat warna yang cocok.

Kalau kamu suka main desain atau UI, format HSL ini bisa bikin kamu lebih mudah membuat variasi warna yang nyambung satu sama lain.

Di materi selanjutnya, kita akan belajar cara memberikan warna latar belakang ke elemen HTML dengan properti background-color.