Ka kōrero te RGB ki te mata me pēhea te tuku rama; ka whakamārama te HSL he pēhea te āhua o te tae. Mā te huri i ngā hongere e toru ki te hue, wherikotanga me te mārama ka māmā ake te whakatika ā-ringa i te tae.
Me pēhea te hurihanga RGB ki HSL
- Wehehia a R, G me B mā te 255 kia noho ia uara ki waenga i te 0 me te 1.
- Tangohia te nui rawa me te iti rawa o ngā toru — ko tā rātou toharite ko te mārama L.
- Mēnā he rite te nui rawa me te iti rawa, he hina te tae: ko te hue me te wherikotanga he 0 anō.
- Ki ētahi atu āhuatanga, whiwhihia te S mai i te wehenga i waenga i te nui rawa me te iti rawa, ā, pānuihia te H i te hongere nui rawa.
Tauira mahi
He tika i te kaupapa. Nā te mea ka whakaatuhia ngā H, S me L i ngā tau poroia ki ngā tau katoa, ka taea e te huri hoki te neke i tētahi hongere kia kotahi, kia rua rānei ngā taahiraa.
Ngā whakamārama mō RGB me HSL
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()
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
Ripanga tohutoro RGB ki HSL
Ngā tae CSS tino noa, kua tahuri mai i RGB ki HSL.
| Tae | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |