Ang HSL ay naglalarawan ng kulay sa paraang naiintindihan ng tao: anong hue, gaano ka-colorful, gaano kaliwanag. Ang pag-convert ng HEX code sa HSL ang pinakamabilis na paraan para makuha ang kulay sa porma na maaari mong ayusin — mag‑lighten, mag‑mute, o bumuo ng buong scale mula rito.
Paano gumagana ang conversion mula HEX papuntang HSL
- I-convert ang HEX code sa RGB at hatiin ang bawat channel sa 255, para ang tatlo ay nasa pagitan ng 0 at 1.
- Hanapin ang pinakamalaki at pinakamaliit sa tatlong halaga. Ang average nila ang lightness L.
- Ang agwat sa pagitan nila ang nagpapatakbo sa saturation S: hatiin ito sa (2 − max − min) para sa mga magagaan na kulay, o sa (max + min) para sa madilim na mga kulay.
- Ang channel na may maximum ang nagtatakda ng hue H — pula sa 0°, berde sa 120°, asul sa 240° — at ang dalawang natitirang channel ang nagpo‑posisyon ng hue sa loob ng segment na iyon.
Halimbawang gumagana
Eksakto ang matematika, pero ang mga HSL value kadalasan ay ira-round sa buong degrees at porsyento. Ang pag-convert pabalik ay maaaring maglagay ng isa o dalawang hakbang sa RGB ang layo mula sa orihinal — hindi nakikitang pagbabago sa praktika, pero magandang malaman kung paulit-ulit mong i-round-trip ang mga kulay.
Ipinaliwanag ang HEX at HSL
Ano ang HEX?
Ang HEX code ay isang anim na digit na hexadecimal na numero na nag-iimbak ng red, green at blue channel ng isang kulay sa likod ng nangungunang #. Bawat pares ng digit ay sumasaklaw sa isang channel, mula 00 (wala) hanggang FF (buo), na nagbibigay ng parehong 16.7 milyong kulay gaya ng RGB pero sa mas maikling notasyon. HEX ang default sa CSS, design tools at brand guidelines.
- Sintaks:
- #RRGGBB
- Saklaw:
- 00–FF per channel
- Pinakamainam para sa:
- CSS, design handoff, brand guidelines
Ano ang HSL?
Hinahati ng HSL ang kulay sa hue (0–360° sa color wheel), saturation (gaano ka-colorful, 0–100%) at lightness (gaano kabilis o liwanag, 0–100%). Dahil tumutugma ang bawat bahagi sa paraan ng paglalarawan ng kulay ng mga tao, pinakamadaling gamitin ang HSL para bumuo ng tints, shades at pare-parehong palettes — mano-mano o sa code.
- Sintaks:
- hsl(H, S%, L%)
- Saklaw:
- 0–360°, 0–100%, 0–100%
- Pinakamainam para sa:
- palettes, tints and shades, theming
HEX to HSL reference table
Ang mga pinaka-karaniwang CSS na kulay, naka-convert mula HEX papuntang HSL.
| Kulay | 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%) |