HSL adalah cara mesra untuk memilih warna, RGB pula adalah apa yang skrin, API canvas dan kod imej sebenarnya gunakan. Penukar ini menukarkan sebarang gabungan hue, saturation dan lightness kepada saluran tepat 0–255.
Bagaimana penukaran HSL ke RGB berfungsi
- Tukarkan S dan L kepada pecahan dan kira chroma C = (1 − |2L − 1|) × S.
- Bahagikan hue dengan 60 untuk mencari segmennya pada roda warna dan kira nilai antara X = C × (1 − |(H/60 mod 2) − 1|).
- Tetapkan C, X dan 0 ke slot R, G dan B mengikut segmen itu.
- Tambah offset lightness L − C/2 ke ketiga-tiga saluran dan darabkan dengan 255.
Contoh terperinci
Keputusan tepat sehingga pembundaran akhir kepada saluran bulat. Nilai hue atau saturation pecahan disokong dan akan mendarat pada triple RGB terdekat.
HSL dan RGB diterangkan
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
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()
Jadual rujukan HSL ke RGB
Warna CSS paling biasa, ditukar 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) |