Memilih warna di HSL nyaman, tapi stylesheet, handoff desain dan dokumen merek masih berjalan dengan HEX. Konverter ini menjembatani dan memberi kamu kode enam digit untuk kombinasi hue, saturation dan lightness apa pun.
Cara konversi HSL ke HEX bekerja
- Ubah saturation dan lightness menjadi pecahan: 60% menjadi 0.6.
- Hitung chroma C = (1 − |2L − 1|) × S — itu menunjukkan seberapa jauh warna dari abu-abu.
- Gunakan hue untuk menempatkan chroma itu ke kanal merah, hijau dan biru, lalu geser ketiganya dengan L − C/2.
- Kalikan tiap kanal dengan 255, bulatkan, dan tuliskan sebagai dua digit heksadesimal.
Contoh yang bekerja
Pembulatan terjadi sekali, pada langkah terakhir, saat tiap kanal dipetakan ke nilai 0–255 utuh. Hasilnya adalah kode HEX terdekat dengan input HSL-mu dan biasanya identik dengan apa yang ditampilkan alat desain.
HSL dan HEX dijelaskan
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
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
Tabel referensi HSL ke HEX
Warna CSS yang paling umum, dikonversi dari HSL ke HEX.
| Warna | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |