Memilih warna dalam HSL selesa, tetapi stylesheet, penyerahan reka bentuk dan dokumen jenama masih menggunakan HEX. Penukar ini menutup jurang itu dan memberi kamu kod enam digit untuk sebarang kombinasi hue, saturation dan lightness.
Bagaimana penukaran HSL ke HEX berfungsi
- Tukar saturation dan lightness kepada pecahan: 60% menjadi 0.6.
- Hitung chroma C = (1 − |2L − 1|) × S — itulah sejauh mana warna itu menjauh dari kelabu.
- Gunakan hue untuk meletakkan chroma itu pada saluran merah, hijau dan biru, kemudian geser ketiga-tiganya dengan L − C/2.
- Darab setiap saluran dengan 255, bulatkan, dan tulis sebagai dua digit heksadesimal.
Contoh terperinci
Pembundaran berlaku sekali, pada langkah terakhir, apabila setiap saluran dipadankan kepada nilai bulat 0–255. Hasilnya ialah kod HEX paling hampir dengan input HSL kamu dan biasanya sama dengan apa yang alat reka bentuk paparkan.
HSL dan HEX 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 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
Jadual rujukan HSL ke HEX
Warna CSS paling biasa, ditukar dari HSL ke HEX.
| Warna | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |