RGB memberitahu layar seberapa banyak cahaya yang harus dipancarkan; HSL memberitahumu bagaimana warna itu sebenarnya terlihat. Mengubah tiga kanal menjadi hue, saturation dan lightness membuat warna mudah disesuaikan secara manual.
Cara konversi RGB ke HSL bekerja
- Bagi R, G dan B dengan 255 sehingga setiap nilai berada antara 0 dan 1.
- Ambil nilai maksimum dan minimum dari ketiganya — rata-ratanya adalah lightness L.
- Jika maksimum dan minimum sama, warnanya abu-abu: hue dan saturasi keduanya 0.
- Jika tidak, turunkan S dari penyebaran antara maksimum dan minimum, dan baca H dari kanal yang bernilai maksimum.
Contoh yang bekerja
Tepat pada prinsipnya. Karena H, S dan L biasanya ditampilkan sebagai angka utuh yang dibulatkan, mengonversi kembali bisa menggeser sebuah kanal satu atau dua langkah.
RGB dan HSL dijelaskan
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()
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 RGB ke HSL
Warna CSS yang paling umum, dikonversi dari RGB ke HSL.
| Warna | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |