He māmā te tīpako tae i HSL, engari ko ngā tauira, ngā tuku hoahoa me ngā tuhinga waitohu e whakamahi tonu ana i te HEX. Ka hopukia e tēnei kaitohu taua ara ka hoatu ki a koe te waehere e ono-taimana mō te huarere, wherikotanga me te mārama.
Me pēhea te hurihanga HSL ki HEX
- Hurihia te wherikotanga me te mārama hei wāwāhi: ka riro a 60% hei 0.6.
- Tātaihia te chroma C = (1 − |2L − 1|) × S — koia tēnei te tawhiti o te tae i te hina.
- Whakamahia te hue kia whakaū ai taua chroma ki runga i ngā hongere whero, kākāriki me kahurangi, katahi ka whakawhiti i ngā toru katoa mā te L − C/2.
- Whakapaihia ia hongere ki te 255, poroia, ka tuhia hei rua ngā tohu heksētekimera.
Tauira mahi
Ka poroia kotahi te wā, i te hipoki whakamutunga, ina whakakapia ia hongere ki te tau katoa 0–255. Ko te putanga ko te waehere HEX e tata ana ki tō tuku HSL, ā, he rite noa ki tā tētahi taputapu hoahoa e whakaatu ana.
Ngā whakamārama mō HSL me HEX
He aha te HSL?
Ka wewetehia e HSL tētahi tae kia hū (0–360° i runga i te wiri tae), whārite (te kaha o te tae, 0–100%) me te māramatanga (te kaha o te rama, 0–100%). Nā te mea e hāngai ana ia wāhanga ki te āhua e kōrero ai te tangata mō te tae, ko HSL te hōputu ngawari mō te hanga tints, shades me ngā papa tae tōtika — ā-ringa, ā-waehere rānei.
- Hōtaka:
- hsl(H, S%, L%)
- Awhe:
- 0–360°, 0–100%, 0–100%
- Pai mō:
- papa tae, tints me shades, kaupapa kaupapa
He aha te HEX?
He waehere HEX he nama heksadesimera e ono-matua e rokiroki ana i ngā rereketanga whero, karaka me kikorangi o tētahi tae i muri i te tohu #. Ia mātua tokorua e hipoki ana i tētahi hongere, mai i 00 (kahore) ki FF (katoa), nā reira ka whiwhi i ngā tae e 16.7 miriona rite tonu ki RGB engari he poto ake te tuhi. Ko HEX te taunoa i roto i CSS, taputapu hoahoa me ngā aratohu waitohu.
- Hōtaka:
- #RRGGBB
- Awhe:
- 00–FF mō ia hongere
- Pai mō:
- CSS, tuku hoahoa, aratohu waitohu
Ripanga tohutoro HSL ki HEX
Ngā tae CSS tino noa, kua tahuri mai i HSL ki HEX.
| Tae | 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 |