He huarahi ngawari a HSL ki te tīpako tae, ā, ko RGB tonu ngā uara e kaihia ana e ngā mata, API canvas me ngā waehere whakaahua. E huri ana tēnei kaitārua i tētahi rōpū H, S, L ki ngā hongere tika 0–255.
Me pēhea te hurihanga HSL ki RGB
- Hurihia te S me te L ki ngā rapanga (fractions) ka tatau i te chroma C = (1 − |2L − 1|) × S.
- Wahia te hue mā te 60 kia kitea te wāhanga kei runga i te wira tae ka tatau i te uara waenganui X = C × (1 − |(H/60 mod 2) − 1|).
- Tukua ngā C, X me te 0 ki ngā tūranga R, G me B i runga i taua wāhanga.
- Tāpiritia te tahua marama L − C/2 ki ngā hongere katoa e toru ka whakarewahia ki te 255.
Tauira mahi
He tika te putanga tae noa ki te poroteunga whakamutunga ki ngā hongere katoa. Ka tautokohia ngā uara hue, saturation rānei i ngā wāhanga, ā, ka eke ki te RGB tata rānei.
Ngā whakamārama mō HSL me RGB
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 RGB?
Kei te whakamārama a RGB i tētahi tae hei toru ngā hongere o te rama — whero, karaka me kikorangi — ia kotahi mai i 0 ki 255. Ka whakaata i te mahi o ngā mata: ka riro ko te ma mēnā e toru katoa kei te 255, ko te pango mēnā e toru kei te 0. He pai te RGB mēnā me tatau koe ki tētahi tae, ā, ka tāpirihia e rgba() te marama ārai.
- Hōtaka:
- rgb(R, G, B)
- Awhe:
- 0–255 mō ia hongere
- Pai mō:
- waehere, canvas, marama ārai mā rgba()
Ripanga tohutoro HSL ki RGB
Ngā tae CSS tino noa, kua tahuri mai i HSL ki RGB.
| Tae | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |