RGB memberitahu skrin berapa banyak cahaya untuk dipancarkan; HSL memberitahu apa rupa sebenar warna itu. Menukar tiga saluran kepada hue, saturation dan lightness membuatkan warna mudah diselaraskan secara manual.
Bagaimana penukaran RGB ke HSL berfungsi
- Bahagikan R, G dan B dengan 255 supaya setiap nilai berada antara 0 dan 1.
- Ambil nilai maksimum dan minimum daripada tiga itu — purata mereka ialah lightness L.
- Jika maksimum dan minimum sama, warna itu kelabu: hue dan saturation kedua-duanya 0.
- Jika tidak, terbitkan S dari jarak antara maksimum dan minimum, dan baca H dari saluran yang menjadi maksimum.
Contoh terperinci
Tepat pada prinsipnya. Kerana H, S dan L biasanya dipaparkan sebagai nombor bulat yang dibundarkan, menukar kembali mungkin mengalih satu saluran satu atau dua langkah.
RGB dan HSL diterangkan
Apakah RGB?
RGB menerangkan warna sebagai tiga saluran cahaya — merah, hijau dan biru — setiap satu dari 0 hingga 255. Ia menggambarkan cara skrin berfungsi: ketiga-tiganya pada 255 memberi putih, ketiga pada 0 memberi hitam. RGB adalah pilihan tepat bila anda perlu mengira dengan warna, dan rgba() menambah ketelusan di atasnya.
- Sintaks:
- rgb(R, G, B)
- Julat:
- 0–255 per saluran
- Terbaik untuk:
- kod, canvas, ketelusan dengan rgba()
Apakah HSL?
HSL memecah warna kepada hue (0–360° pada roda warna), saturation (betapa berwarnanya, 0–100%) dan lightness (betapa cerahnya, 0–100%). Kerana setiap bahagian sepadan dengan cara orang menggambarkan warna, HSL adalah format paling mudah untuk membina tona, nuansa dan palet yang konsisten — secara manual atau dalam kod.
- Sintaks:
- hsl(H, S%, L%)
- Julat:
- 0–360°, 0–100%, 0–100%
- Terbaik untuk:
- palet, tona dan nuansa, theming
Jadual rujukan RGB ke HSL
Warna CSS paling biasa, ditukar 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%) |