Ukukhetha umbala ku-HSL kuyakhululeka, kodwa i-stylesheets, i-hand off yedesign kunye namaxwebhu e-brand kusafuna i-HEX. Lo mguquli uvala elo gqibela kwaye ukunika ikhowudi enamadijithi amathandathu kuyo nayiphi na i-hue, saturation kunye ne-lightness.
Indlela yokuguqula HSL uye ku-HEX
- Guqula i-saturation kunye ne-lightness zibe zi-fraction: 60% iba yi-0.6.
- Bala i-chroma C = (1 − |2L − 1|) × S — yindlela umbala okude ngayo ukusuka ku-grey.
- Sebenzisa i-hue ukubeka i-chroma kwi-red, green kunye ne-blue channels, emva koko shifta zonke ezintathu nge L − C/2.
- Phindaphinda isiteshi ngasinye ngo-255, ujikeleze, uze ulubhale njengamanani amabili e-hexadecimal.
Umzekelo osebenzayo
Ukujikeleza kwenzeka kanye, kwinyathelo lokugqibela, xa isiteshi ngasinye sijongwa sibe yinxalenye epheleleyo ye-0–255. Iziphumo zii-HEX ezikufuphi ne-HSL oyifakileyo kwaye ngokuqhelekileyo ziyafana nento esiboniswa sisixhobo sokuyila.
HSL kunye ne-HEX 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-HEX?
Ikhowudi ye-HEX yinombolo ye-hexadecimal eneenani ezintandathu egcina i-red, green kunye ne-blue channel yombala ngokuqala nge-. Yibini nganye yee-dijithi imele i-channel enye, ukusuka ku-00 (akukho) ukuya ku-FF (ugcino), nto leyo ebonelela ngemibala efanayo eyi-16.7 yezigidi njenge-RGB ngendlela emfutshane. I-HEX yeyona nto isetyenziswa ngokungagqibekanga kwi-CSS, izixhobo zokuyila kunye neenkcukacha zesimbo sebrand.
- Isyntax:
- #RRGGBB
- Ububanzi:
- 00–FF per channel
- Ilungele kakhulu:
- CSS, ukudluliselwa koyilo, izikhokelo ze-brand
HSL to HEX reference table
Eyona mibala ye-CSS eqhelekileyo, iguqulelwe 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 |