HSL wehewehe i ka waihoʻoluʻu i ka ʻōlelo a ka poʻe: ʻo ka hue hea, pehea ka ʻono kala (saturation), a pehea ka mālamalama (lightness). ʻO ka hoʻololi mai HEX i HSL ka wikiwiki loa e loaʻa ai ka waihoʻoluʻu i ke ʻano e hiki iā ʻoe ke hoʻololi — e ʻālohilohi, e kānana, a i ʻole e kūkulu i kahi pae piha mai ia.
Pehea e hana ai ka kahuli mai HEX i HSL
- ʻOia i ka HEX i RGB a wehe i kēlā me kēia ʻāpana ma 255, no laila aia nā ʻekolu i waena o 0 a 1.
- E huli i ka mea nui loa a me ka liʻiliʻi mua o nā wai. ʻO ko lāua waena nō ka mālamalama L.
- ʻO ka ʻokoʻa ma waena o lāua ka mea e hoʻohuli i ka ʻono kala S: kahe ia ma (2 − max − min) no nā kala mālamalama, a i ʻole ma (max + min) no nā mea pouli.
- Ke ʻāpana i loaʻa ka nui loa ka mea e hoʻoholo i ka hue H — ʻulaʻula ma 0°, ʻōmaʻomaʻo ma 120°, polū ma 240° — a ʻo nā ʻāpana ʻē aʻe e kau i ka hue i loko o kēlā segment.
Laʻana i hana
Pololei ka helu ʻana, akā maʻamau hoʻopiha ʻia nā waiwai HSL i nā kekelē piha a me nā pākāpuka. No laila, inā hoʻololi hou ʻoe, hiki ke neʻe kekahi mau ʻanuʻu RGB mai ka mea mua — ʻaʻole ʻike ʻia i ka wikiō, akā pono ke ʻike inā hoʻoliʻiliʻi mau ʻoe i nā kala.
HEX a me HSL wehewehe
He aha ka HEX?
He helu HEX ka code he ʻekolu mau helu hekanoma e mālama i ka ʻulaʻula, ʻōmaʻomaʻo a me ke kanaloku polū o kahi waihoʻoluʻu ma hope o ka # alakaʻi. Hoʻokahi pā pā no kēlā me kēia kanaloku, mai 00 (ʻaʻole) a i FF (piha), e hāʻawi ana i nā waihoʻoluʻu 16.7 miliona like me RGB i kahi ʻōlelo pōkole. HEX ka maʻamau i CSS, nā mea hana hoʻolālā a me nā lula inoa brand.
- Hana kikokiko:
- #RRGGBB
- Awāwa:
- 00–FF per channel
- Mākou kūpono no:
- CSS, hoʻokaʻaʻike hoʻolālā, lula inoa
He aha ka HSL?
Māhele ka HSL i kahi waihoʻoluʻu i ka hue (0–360° ma ke huila waihoʻoluʻu), saturation (pehea ka waihoʻoluʻu, 0–100%) a me ka lightness (pehea ka ʻālohilohi, 0–100%). No ka mea e hoʻopili ana kēlā me kēia ʻāpana i ke ʻano e wehewehe ai nā kānaka i ka waihoʻoluʻu, ʻo HSL ka ʻano maʻalahi no ka hana i nā tints, shades a me nā paʻi pūnāwai pono — ma lima a i ʻole ma ke code.
- Hana kikokiko:
- hsl(H, S%, L%)
- Awāwa:
- 0–360°, 0–100%, 0–100%
- Mākou kūpono no:
- nā paʻi pūnāwai, tints a me nā shades, theming
HEX to HSL reference table
Nā waihoʻoluʻu CSS maʻamau loa, i kahuli ʻia mai HEX a i HSL.
| Waihoʻoluʻu | 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%) |