I-HSL yindlela enobuhlobo yokukhetha umbala, i-RGB yeyona idla izikrini, i-canvas APIs kunye nekhowudi yemifanekiso. Lo mtshintshi uguqula nayiphi na i-hue, saturation kunye ne-lightness ibe yimizila ye-0–255 exakileyo.
Indlela yokuguqula HSL uye ku-RGB
- Guqula i-S kunye ne-L zibe zi-fracsheni uze ucalcule i-chroma C = (1 − |2L − 1|) × S.
- Yahlula i-hue nge-60 ukuze ufumane isegmenti yayo kwiwili lombala uze ucalcule ixabiso eliphakathi X = C × (1 − |(H/60 mod 2) − 1|).
- Nika i-C, X kunye no-0 kwiindawo ze-R, G kunye ne-B ngokwelo segementi.
- Yongeza i-offset yokukhanya L − C/2 kuwo onke ama-channel amathathu uze uphinde ngokuba ngu-255.
Umzekelo osebenzayo
Isiphumo sichanekile de kube yimizuzu yokugqibela yokujikeleza kwiikaneli ezipheleleyo. Ixabiso le-hue okanye i-saturation enezicwangciso ezingezizo ezipheleleyo siyaxhaswa kwaye ziya kufika kwitriple ye-RGB ekufuphi.
HSL kunye ne-RGB zichazwe
Yintoni i-HSL?
I-HSL yahlula umbala ibe yi-hue (0–360° kwi-wheel yombala), saturation (ukuba nombala kangakanani, 0–100%) kunye ne-lightness (ukukhanya, 0–100%). Kuba ngamnye umaleko uhambelana nendlela abantu abachaza ngayo umbala, i-HSL yeyona format ilula yokudala i-tints, shades kunye neepalethi ezizinzileyo — ngesandla okanye kwi-khowudi.
- Isyntax:
- hsl(H, S%, L%)
- Ububanzi:
- 0–360°, 0–100%, 0–100%
- Ilungele kakhulu:
- ipalethi, tints kunye ne shades, theming
Yintoni i-RGB?
I-RGB ichaza umbala njengeziteshi ezintathu zokukhanya — red, green kunye ne-blue — nganye ukusuka ku-0 ukuya ku-255. Ifana nendlela izikrini ezisebenza ngayo: zonke ezintathu kwi-255 zinika umhlophe, zonke kwi-0 zinika omnyama. I-RGB lulungelelo xa kufuneka ubale nombala, kwaye i-rgba() yongeza ukungabonakali ngaphezu kwayo.
- Isyntax:
- rgb(R, G, B)
- Ububanzi:
- 0–255 per channel
- Ilungele kakhulu:
- ikhowudi, canvas, ukungabonakali nge rgba()
HSL to RGB reference table
Eyona mibala ye-CSS eqhelekileyo, iguqulelwe 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) |