I-RGB itshela isikrini ukuthi likhiphe kangakanani ukukhanya; i-HSL ikutshela ukuthi umbala ubukeka kanjani ngempela. Ukuguqula ama-channel amathathu ube i-hue, saturation kanye ne-lightness kwenza umbala ube lula ukulungisa ngesandla.
Indlela okuhunyushwa ngayo RGB kuya ku-HSL
- Hlukanisa R, G no-B ngo-255 ukuze inani ngalinye libe phakathi kuka-0 no-1.
- Thatha okukhulu kakhulu nokuncane kakhulu kwala mathathu — isilinganiso sawo yikukhanya L.
- Uma okukhulu nokuncane kufana, umbala uyigrayi: i-hue ne-saturation zombili ziyi-0.
- Kungenjalo thola i-S kusatshalaliswa phakathi kokukhulu nokuncane, bese ufunda i-H kusuka ku-channel eyinqwaba.
Isibonelo esisebenzayo
Kuyiqiniso ngokoqobo. Njengoba i-H, S ne-L ngokuvamile ziboniswa njengezinombolo ezijiywe, ukuguqula ubuyele kungashintsha i-channel ngesinyathelo noma ezimbili.
RGB no-HSL kuchazwe
Iyini RGB?
I-RGB ichaza umbala njengesiteshi sesithathu sokukhanya — red, green kanye ne-blue — ngakunye kusuka ku-0 kuya ku-255. Ikhombisa ukuthi izikrini zisebenza ngempela: zonke ezintathu ku-255 zenza umhlophe, zonke ku-0 zenza mnyama. I-RGB ifanele uma kudingeka ukubala ngombala, kanti i-rgba() yengeza ukuphelelwa ukucacisa.
- Isakhiwo:
- rgb(R, G, B)
- Ibanga:
- 0–255 per channel
- Ilungele:
- ikhodi, canvas, ukuphelelwa ukucacisa nge-rgba()
Iyini HSL?
I-HSL ihlukanisa umbala ibe yi-hue (0–360° kukhawunta yombala), i-saturation (ubungako bombala, 0–100%) kanye ne-lightness (ukukhanya, 0–100%). Njengoba ingxenye ngayinye ihambisana nendlela abantu abachaza ngayo umbala, i-HSL iyifomethi elula kakhulu yokwakha ama-tints, ama-shades nama-palettes ahlale efana — ngesandla noma ekhodini.
- Isakhiwo:
- hsl(H, S%, L%)
- Ibanga:
- 0–360°, 0–100%, 0–100%
- Ilungele:
- ama-palettes, tints nama-shades, theming
Ithebula lokubhekisela le-RGB kuya ku-HSL
Imibala ye-CSS evame ukusetshenziswa, iguqulwe ukusuka ku-RGB iye ku-HSL.
| Umbala | 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%) |