HSL menggambarkan warna seperti orang berbicara: nuansa apa, seberapa berwarna, seberapa terang. Mengubah kode HEX ke HSL adalah cara tercepat untuk mendapatkan warna dalam bentuk yang bisa kamu ubah — mencerahkan, meredam, atau membangun seluruh skala darinya.
Cara konversi HEX ke HSL bekerja
- Konversi kode HEX ke RGB dan bagi setiap kanal dengan 255, sehingga ketiganya berada antara 0 dan 1.
- Cari nilai terbesar dan terkecil dari ketiganya. Rata-ratanya adalah lightness L.
- Jarak antara keduanya menentukan saturasi S: bagi dengan (2 − max − min) untuk warna terang, atau dengan (max + min) untuk warna gelap.
- Kanal yang memegang nilai maksimum menentukan hue H — merah pada 0°, hijau pada 120°, biru pada 240° — dan dua kanal lainnya menempatkan hue di dalam segmen tersebut.
Contoh yang bekerja
Matematikanya tepat, tetapi nilai HSL biasanya dibulatkan ke derajat dan persen utuh. Mengonversi kembali bisa membuat pergeseran satu atau dua langkah pada RGB dari aslinya — tidak terlihat dalam praktik, tapi penting diketahui jika kamu sering melakukan round-trip warna.
HEX dan HSL dijelaskan
Apa itu HEX?
Kode HEX adalah angka heksadesimal enam digit yang menyimpan kanal merah, hijau, dan biru di balik tanda #. Setiap pasangan digit mewakili satu kanal, dari 00 (tidak ada) sampai FF (penuh), memberi 16,7 juta warna yang sama seperti RGB dalam notasi yang lebih singkat. HEX adalah default di CSS, alat desain, dan panduan merek.
- Sintaks:
- #RRGGBB
- Rentang:
- 00–FF per kanal
- Terbaik untuk:
- CSS, serah terima desain, panduan merek
Apa itu HSL?
HSL membagi warna menjadi hue (0–360° pada roda warna), saturation (seberapa berwarna, 0–100%) dan lightness (seberapa terang, 0–100%). Karena tiap bagian cocok dengan cara orang menggambarkan warna, HSL adalah format termudah untuk membuat tint, shade, dan palet konsisten — secara manual atau dalam kode.
- Sintaks:
- hsl(H, S%, L%)
- Rentang:
- 0–360°, 0–100%, 0–100%
- Terbaik untuk:
- palet, tint dan shade, theming
Tabel referensi HEX ke HSL
Warna CSS yang paling umum, dikonversi dari HEX ke HSL.
| Warna | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |