Ukukhetha umbala ku-HSL kulula, kodwa ama-stylesheet, ukulethwa kwemiklamo kanye namadokhumenti e-brand kusebenzisa i-HEX. Lo mciji uyagcwalisa le ngxenye futhi ukukupha ikhodi enezinombolo eziyisithupha yanoma iyiphi inhlanganisela ye-hue, saturation kanye ne-lightness.
Indlela okuhunyushwa ngayo HSL kuya ku-HEX
- Guqula i-saturation ne-lightness zibe izigaxa: 60% iba 0.6.
- Bala i-chroma C = (1 − |2L − 1|) × S — lokho kukhomba ukuthi umbala ukude kangakanani nokuthungwa okuluhlaza-agra.
- Sebenzisa i-hue ukubeka le chroma kuma-channel e-red, green futhi blue, bese ushintsha wonke amathathu ngo L − C/2.
- Phindaphinda wonke channel ngo-255, uyirounde, bese uyibhala njengamadijithi amabili e-hexadecimal.
Isibonelo esisebenzayo
Ukujiywa kwenzeka kanye, esinyathelweni sokugcina, lapho i-channel ngayinye iqiniswa yaba inani eliphelele le-0–255. Umphumela uyikho i-HEX eduze kakhulu kwe-HSL oyifakile futhi ngokuvamile ifana nalokho ithuluzi lokuklama elibonisa.
HSL no-HEX kuchazwe
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
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
Ithebula lokubhekisela le-HSL kuya ku-HEX
Imibala ye-CSS evame ukusetshenziswa, iguqulwe ukusuka ku-HSL iye ku-HEX.
| Umbala | 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 |