Milih warna ing HSL nyaman, nanging stylesheet, handoff desain lan dokumen merek isih nganggo HEX. Konverter iki nutupi jurang kuwi lan menehi kode enem digit kanggo kombinasi hue, saturation lan lightness apa wae.
Carane konversi saka HSL dadi HEX
- Gawé saturation lan lightness dadi fraksi: 60% dadi 0.6.
- Itung chroma C = (1 − |2L − 1|) × S — kuwi jarak warna saka abu-abu.
- Gunakake hue kanggo nempatake chroma mau ing channel abang, ijo lan biru, banjur geser telung channel mau nganggo L − C/2.
- Kali saben channel karo 255, bundherake, banjur tulis minangka rong digit heksadesimal.
Conto kerja
Bundher kedadeyan sakwisé, ing langkah pungkasan, nalika saben channel dipasrahake dadi nilai utuh 0–255. Hasil yaiku kode HEX paling cedhak karo input HSL lan biasane padha karo sing dituduhake alat desain.
HSL lan HEX dijlentrehake
Apa iku HSL?
HSL mecah warna dadi hue (0–360° ing roda warna), saturation (sepira werna, 0–100%) lan lightness (sepira padhang, 0–100%). Amarga saben bagean cocog karo cara wong njlèntrèhaké warna, HSL dadi format sing paling gampang kanggo nggawe tint, shade lan palet sing konsisten — kanthi manual utawa ing kode.
- Sintaksis:
- hsl(H, S%, L%)
- Rentang:
- 0–360°, 0–100%, 0–100%
- Paling cocog kanggo:
- palet, tint lan shade, theming
Apa iku HEX?
Kode HEX iku angka heksadesimal 6-digit sing nyimpen channel abang, ijo lan biru saka sawijining warna kanthi tandha # ing ngarep. Saben pasangan digit makili siji channel, saka 00 (ora ana) nganti FF (penuh), menehi jumlah warna sing padha karo RGB (16.7 yuta) ing notasi sing luwih cendhak. HEX minangka default ing CSS, piranti desain lan pandhuan merek.
- Sintaksis:
- #RRGGBB
- Rentang:
- 00–FF saben channel
- Paling cocog kanggo:
- CSS, handoff desain, pandhuan merek
Tabel referensi saka HSL menyang HEX
Werna CSS sing paling umum, dikonversi saka HSL menyang 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 |