Ang HSL nag-describe sa kolor sama sa pagstorya sa tawo: unsang hue, unsa ka colorful, unsa ka hayag. Ang pag-convert sa usa ka HEX code ngadto sa HSL mao ang labing paspas nga paagi aron makuha nimo ang kolor sa porma nga imong ma-tweak — pagpasiga, pag-neutralize, o pagtukod ug tibuok scale gikan niini.
Giunsa pagtrabaho ang konbersyon gikan sa HEX ngadto sa HSL
- I-convert ang HEX code ngadto sa RGB ug bahinon ang matag channel sa 255, aron ang tulo tanan magpabilin tali sa 0 ug 1.
- Pangitaa ang kinadako ug kinagagmay sa tulo ka values. Ang ilang average mao ang lightness L.
- Ang gilapdon tali nila mao ang nagmando sa saturation S: bahinon kini sa (2 − max − min) para sa mga hayag nga kolor, o sa (max + min) para sa mga ngitngit.
- Ang channel nga nagkupot sa maximum maoy mobutang sa hue H — red sa 0°, green sa 120°, blue sa 240° — ug ang uban nga duha ka channel moposisyon sa hue sulod ana nga segment.
Gihimong pananglitan
Eksakto ang math, pero ang HSL values kasagarang gi-round sa whole degrees ug percentages. Ang pag-convert pabalik mahimong mopahimutang sa RGB usa o duha ka steps layo sa orihinal — dili makita sa praktis, pero angay hinumduman kung pirmi ka mag-round-trip sa mga kolor.
HEX ug HSL gipatin-aw
Unsa ang HEX?
Ang HEX code usa ka unom-ka-digit nga hexadecimal nga numero nga nag-imbak sa red, green ug blue channel sa usa ka kolor nga gisundan sa #. Ang matag pares sa digit nagrepresentar sa usa ka channel, gikan sa 00 (wala) hangtod FF (puno), nga naghatag sa samang 16.7 milyones nga kolor sama sa RGB apan sa mas mubo nga notasyon. Ang HEX ang default sa CSS, design tools ug brand guidelines.
- Sintaks:
- #RRGGBB
- Range:
- 00–FF per channel
- Pinakamaayo para sa:
- CSS, design handoff, brand guidelines
Unsa ang HSL?
Ang HSL nagbahin sa usa ka kolor ngadto sa hue (0–360° sa color wheel), saturation (kung unsa ka kolorful, 0–100%) ug lightness (kung unsa ka hayag, 0–100%). Tungod kay ang matag bahin mohaom sa paagi sa paghulagway sa kolor sa tawo, ang HSL mao ang pinakasayon nga format para sa paghimo og tints, shades ug konsistenteng palettes — manwal o sa code.
- Sintaks:
- hsl(H, S%, L%)
- Range:
- 0–360°, 0–100%, 0–100%
- Pinakamaayo para sa:
- palettes, tints and shades, theming
HEX ngadto sa HSL reference nga lamesa
Ang kasagarang CSS nga mga kolor, gikombertir gikan sa HEX ngadto sa HSL.
| Kolor | 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%) |