I-HSL ichaza umbala ngendlela abantu abakhuluma ngayo: iyiphi hue, ubungako bombala (saturation), nokukhanya (lightness). Ukuguqula ikhodi ye-HEX iye ku-HSL kuyindlela esheshayo yokuthola umbala ongawuguqula — uwukhanyise, uwuthule, noma wakhe isikali esiphelele kuso.
Indlela okuhunyushwa ngayo HEX kuya ku-HSL
- Guqula ikhodi ye-HEX iye ku-RGB bese wahlukanisa wonke channel ngo-255, ukuze wonke amathathu abe phakathi kuka-0 no-1.
- Thola inani elikhulu kunawo wonke nelincane kuwo wonke amathathu. Isilinganiso sawo singukukhanya L.
- Ukusatshalaliswa phakathi kwawo kuyakwazi ukushayela i-saturation S: yahlukanisa ngo (2 − max − min) kumibala ekhanyayo, noma ngo (max + min) kweyamnyama.
- I-channel enenani eliphezulu inquma i-hue H — red ku-0°, green ku-120°, blue ku-240° — futhi ezinye ezimbili zifaka i-hue ngaphakathi kwalelo segimenti.
Isibonelo esisebenzayo
Izibalo ziqinile, kodwa amanani e-HSL ngokuvamile ayajiywa abe amazinga aphelele namaphesenti. Ukuguqula ubuyele kungaholela ekutheni ube nezigaba ze-RGB eziyodwa noma ezimbili kude nomthombo — akwabonakali empeleni, kodwa kuhle ukwazi uma uphinda uguqule imibala kaningi.
HEX no-HSL kuchazwe
Iyini HEX?
Ikhodi ye-HEX iyi-hexadecimal yezinombolo eziyisithupha egcina iziteshi ezibomvu, eziluhlaza kanye neziluhlaza okwesibhakabhaka zombala ngemuva kwe-#. Iphara ngalinye lamadijithi limela isiteshi esisodwa, kusuka ku-00 (akukho) kuya ku-FF (kugcwele), okunikeza imibala eyizigidi ezingama-16.7 njengase-RGB ngokufaka okubhaliwe okufushane. I-HEX iyinketho ezicini ze-CSS, amathuluzi okwakha nomhlahlandlela webhrendi.
- Isakhiwo:
- #RRGGBB
- Ibanga:
- 00–FF per channel
- Ilungele:
- CSS, ukudluliswa kokuklama, imihlahlandlela ye-brand
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-HEX kuya ku-HSL
Imibala ye-CSS evame ukusetshenziswa, iguqulwe ukusuka ku-HEX iye ku-HSL.
| Umbala | 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%) |