HTML HSL Colors

Bab 1: Pendekatan Warna yang Manusiawi

Berbeda dengan RGB yang didasarkan pada cara kerja mesin (pencampuran cahaya), HSL (Hue, Saturation, Lightness) didasarkan pada cara manusia mempersepsikan warna. Ini membuatnya jauh lebih intuitif untuk digunakan, terutama saat ingin membuat skema warna yang harmonis.

Dengan HSL, Anda tidak perlu menebak kombinasi Merah-Hijau-Biru. Anda cukup memilih jenis warna, lalu mengatur seberapa cerah atau pudarnya warna tersebut.

Bab 2: Hue (Rona Warna)

Hue adalah nilai derajat pada roda warna (0 sampai 360). Bayangkan sebuah lingkaran pelangi:

<div style="background-color:hsl(0, 100%, 50%);">Merah</div>
<div style="background-color:hsl(120, 100%, 50%);">Hijau</div>
<div style="background-color:hsl(240, 100%, 50%);">Biru</div>

Bab 3: Saturation (Kejenuhan)

Saturation menentukan seberapa "murni" warna tersebut. Nilainya dalam Persen (%).

• 100%: Warna murni (Sangat cerah/hidup).
• 50%: Warna agak pudar (Keabu-abuan).
• 0%: Sepenuhnya abu-abu (Tidak ada warna sama sekali).

<div style="background-color:hsl(0, 100%, 50%);">Merah Penuh</div>
<div style="background-color:hsl(0, 50%, 50%);">Merah Pudar</div>
<div style="background-color:hsl(0, 0%, 50%);">Abu-abu</div>

Bab 4: Lightness (Kecerahan)

Lightness menentukan seberapa terang atau gelap warna tersebut. Nilainya juga dalam Persen (%).

• 0%: Hitam total (Gelap gulita).
• 50%: Warna normal (Seimbang).
• 100%: Putih total (Terang benderang).

<div style="background-color:hsl(240, 100%, 20%);">Biru Gelap</div>
<div style="background-color:hsl(240, 100%, 50%);">Biru Normal</div>
<div style="background-color:hsl(240, 100%, 80%);">Biru Terang</div>

Bab 5: HSLA (Transparansi)

Sama seperti RGBA dan HEX, HSL juga mendukung transparansi dengan format hsla(). Parameter keempat adalah Alpha (0.0 - 1.0).

<!-- Hijau Transparan 50% -->
<div style="background-color:hsla(120, 100%, 50%, 0.5);"></div>

⚡ Proyek Kilat: Monochromatic Design

Misi Anda adalah membuat skema warna Monokromatik (Satu Hue, beda Lightness). Ini adalah teknik desain yang sangat elegan dan mudah dibuat dengan HSL.

Pusat Dokumentasi Developer

Jangan hafalkan kodenya, cukup pahami logikanya. Kalau kamu butuh jawaban cepat saat lagi ngoding, kamu bisa intip dokumentasi teknis di bawah ini: