HSL menerangkan warna seperti cara orang bercakap tentangnya: hue yang mana, betapa berwarnanya, betapa cerahnya. Menukar kod HEX ke HSL adalah cara terpantas untuk mendapatkan warna dalam bentuk yang boleh kamu ubah suai — cerahkan, kurangkan kecerahan, atau bina keseluruhan skala daripadanya.
Bagaimana penukaran HEX ke HSL berfungsi
- Tukar kod HEX kepada RGB dan bahagi setiap saluran dengan 255, supaya ketiga-tiganya berada antara 0 dan 1.
- Cari nilai terbesar dan nilai terkecil daripada ketiga-tiga. Purata mereka ialah lightness L.
- Jarang antara mereka menentukan saturation S: bahagi ia dengan (2 − max − min) untuk warna terang, atau dengan (max + min) untuk warna gelap.
- Saluran yang memegang maksimum menentukan hue H — merah pada 0°, hijau pada 120°, biru pada 240° — dan dua saluran lain meletakkan hue di dalam segmen itu.
Contoh terperinci
Pengiraan adalah tepat, tetapi nilai HSL biasanya dibundarkan kepada darjah penuh dan peratus. Menukar kembali boleh menyebabkan perbezaan satu atau dua langkah RGB dari asal — tak nampak dalam praktik, tetapi patut diketahui jika kamu kerap melakukan round-trip warna.
HEX dan HSL diterangkan
Apakah HEX?
Kod HEX adalah nombor enam digit heksadesimal yang menyimpan saluran merah, hijau dan biru sesuatu warna dengan awalan #. Setiap pasangan digit mewakili satu saluran, dari 00 (tiada) hingga FF (penuh), yang memberi jumlah 16.7 juta warna sama seperti RGB tetapi dalam notasi lebih pendek. HEX adalah lalai dalam CSS, alat reka bentuk dan garis panduan jenama.
- Sintaks:
- #RRGGBB
- Julat:
- 00–FF per saluran
- Terbaik untuk:
- CSS, serahan reka bentuk, garis panduan jenama
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 HEX ke HSL
Warna CSS paling biasa, ditukar dari HEX ke HSL.
| Warna | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |