HSL nerangkeun warna cara jalma ngobrol: hue naon, sabaraha warna (saturated), sabaraha caang. Ngarobah kode HEX ka HSL nyaéta jalan panggancangna pikeun meunangkeun warna dina bentuk anu bisa maneh atur — ngagedéan, ngaleueutkeun, atawa nyieun sakumna skala tina éta.
Kumaha konvérsi HEX ka HSL jalanna
- Robah kode HEX jadi RGB jeung bagi unggal saluran ku 255, sangkan katiluna aya antara 0 jeung 1.
- Panggihan nilai panggedéna jeung pangleutikna tina tilu nilai éta. Rata-ratana nyaéta lightness L.
- Sebaran antara maranéhna ngatur saturation S: bagi ku (2 − max − min) pikeun warna caang, atawa ku (max + min) pikeun nu poék.
- Saluran anu nyekel nilai maksimum nentukeun hue H — red di 0°, green di 120°, blue di 240° — jeung dua saluran séjén maréntahkeun posisi hue di jero segmén éta.
Conto nu jalan
Itunganana tuntas, tapi nilai HSL biasana dibunderkeun kana derajat jeung persénan bulat. Ngarobah deui bisa jadi nyababkeun bénten hiji atawa dua léngkah RGB ti aslina — jeung éta teu katingali dina prakték, tapi alus apal lamun maneh sering ngalakukeun round-trip warna.
HEX jeung HSL dijelaskeun
Naon éta HEX?
Kode HEX nyaéta angka hexadecimal genep-digit anu nyimpen kanal beureum, héjo jeung biru tina warna sanggeus tanda #. Unggal pasang digit ngawengku hiji kanal, ti 00 (teu aya) nepi ka FF (penuh), anu masihan jumlah warna anu sarua jeung RGB (16.7 juta) dina notasi leuwih singket. HEX jadi default dina CSS, alat desain jeung pedoman merk.
- Sintaks:
- #RRGGBB
- Rentang:
- 00–FF per kanal
- Pangalusna pikeun:
- CSS, handoff desain, pedoman merk
Naon éta HSL?
HSL mecah warna jadi hue (0–360° dina roda warna), saturation (sabaraha warna, 0–100%) jeung lightness (sabaraha caang, 0–100%). Kusabab masing-masing bagian cocog jeung cara jalma ngajelaskeun warna, HSL mangrupa format anu paling gampang pikeun nyieun tint, shade jeung palét anu konsisten — sacara manual atawa dina kode.
- Sintaks:
- hsl(H, S%, L%)
- Rentang:
- 0–360°, 0–100%, 0–100%
- Pangalusna pikeun:
- palét, tint jeung shade, theming
tabel rujukan HEX ka HSL
Warna CSS anu paling umum, dikonversi ti HEX ka 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%) |