I-HSL iyindlela enobungane yokukhetha umbala, kanti i-RGB yile ekhonjwa ama-skrini, ama-canvas APIs kanye nekhodi yezithombe. Lo mguquli uguqula noma yiliphi i-hue, saturation kanye ne-lightness ube amashaneli anembile angu-0–255.
Indlela okuhunyushwa ngayo HSL kuya ku-RGB
- Guqula i-S ne-L zibe ama-fraksi bese ubala i-chroma C = (1 − |2L − 1|) × S.
- Hlukanisa i-hue ngo-60 ukuze uthole isigaba sayo esibhakabhakeni sembala bese ubala inani eliphakathi X = C × (1 − |(H/60 mod 2) − 1|).
- Nikeza i-C, X kanye no-0 kumaslot we-R, G kanye ne-B ngokusho kwaleso sigaba.
- Faka i-offset yokukhanya L − C/2 kuzo zonke iziteshi ezintathu bese uphindaphinda ngo-255.
Isibonelo esisebenzayo
Umphumela unembile kuze kube ukugingqika kokugcina kuya eziteshini eziphelele. Amanani e-hue noma e-saturation anama-fraksi asekelwa futhi alinganiselwa nje eduze kwe-RGB triple eliseduze.
HSL no-RGB 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 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()
Ithebula lokubhekisela le-HSL kuya ku-RGB
Imibala ye-CSS evame ukusetshenziswa, iguqulwe ukusuka ku-HSL iye ku-RGB.
| Umbala | 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) |