HSL adalah cara yang ramah untuk memilih warna, sementara RGB adalah yang sebenarnya dikonsumsi layar, canvas API dan kode gambar. Konverter ini mengubah triple hue, saturation, dan lightness menjadi saluran 0–255 yang tepat.
Cara konversi HSL ke RGB bekerja
- Ubah S dan L menjadi pecahan dan hitung chroma C = (1 − |2L − 1|) × S.
- Bagi hue dengan 60 untuk menemukan segmennya pada roda warna dan hitung nilai antara X = C × (1 − |(H/60 mod 2) − 1|).
- Tetapkan C, X dan 0 ke slot R, G dan B sesuai segmen tersebut.
- Tambahkan offset lightness L − C/2 ke ketiga saluran dan kalikan dengan 255.
Contoh yang bekerja
Hasilnya tepat sampai pembulatan akhir ke saluran utuh. Nilai hue atau saturation yang berupa pecahan didukung dan akan dibulatkan ke triple RGB terdekat.
HSL dan RGB 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 RGB?
RGB menggambarkan warna sebagai tiga kanal cahaya — merah, hijau, dan biru — masing‑masing dari 0 sampai 255. Ini mencerminkan cara kerja layar sebenarnya: ketiganya di 255 memberi putih, semuanya di 0 memberi hitam. RGB tepat ketika kamu perlu menghitung dengan warna, dan rgba() menambahkan transparansi di atasnya.
- Sintaks:
- rgb(R, G, B)
- Rentang:
- 0–255 per kanal
- Terbaik untuk:
- kode, canvas, transparansi dengan rgba()
Tabel referensi HSL ke RGB
Warna CSS yang paling umum, dikonversi dari HSL ke RGB.
| Warna | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |