Komportable pumili ng kulay sa HSL, pero ang stylesheets, design handoffs at brand documents ay karaniwan pa rin gumagamit ng HEX. Pinupunan ng converter na ito ang puwang at binibigay ang six‑digit code para sa anumang kombinasyon ng hue, saturation at lightness.
Paano gumagana ang conversion mula HSL papuntang HEX
- Gawing fraction ang saturation at lightness: ang 60% ay magiging 0.6.
- Kalkulahin ang chroma C = (1 − |2L − 1|) × S — ito ang sukat kung gaano kalayo ang kulay mula sa grey.
- Gamitin ang hue para ilagay ang chroma sa red, green at blue channels, pagkatapos i-shift ang lahat ng tatlo ng L − C/2.
- I-multiply ang bawat channel sa 255, i-round, at isulat ito bilang dalawang hexadecimal na digit.
Halimbawang gumagana
Nagaganap ang rounding nang isang beses, sa huling hakbang, kapag ang bawat channel ay isinara sa buong 0–255 na halaga. Ang resulta ang pinakamalapit na HEX code sa iyong HSL input at karaniwan ay kapareho ng ipinapakita ng design tool.
Ipinaliwanag ang HSL at HEX
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
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
HSL to HEX reference table
Ang mga pinaka-karaniwang CSS na kulay, naka-convert mula HSL papuntang HEX.
| Kulay | 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 |