HSL isobanura ibara uko abantu baryivuga: hue iyihe, uko ryuzuye (saturation), n'uburyo ryaka (lightness). Guhindura code ya HEX muri HSL ni uburyo bwihuse bwo kubona ibara mu buryo ushobora guhindura — kurikora hejuru, kuryambura, cyangwa kubaka urukurikirane rwabyo.
Uko guhindura HEX ujya HSL bikora
- Hindura code ya HEX muri RGB hanyuma ugabanye buri channel na 255, kugira ngo zibe hagati ya 0 na 1.
- Shaka agaciro kanini kurusha utundi ndetse n'agato kurusha utundi mu byiciro bitatu. Impuzandengo y'ibyo niyo lightness L.
- Intera iri hagati yazo igenzura saturation S: uyigabanye na (2 − max − min) ku mabara yoroheje, cyangwa na (max + min) ku mabara asembuye.
- Channel ifite agaciro kanini niyo igena hue H — umutuku kuri 0°, icyatsi kuri 120°, ubururu kuri 240° — kandi izindi channel ebyiri zishyiraho aho hue iri muri ako gace.
Urugero rwakozwe
Imibare ni nyakuri mu buryo bwa matematike, ariko HSL kenshi igahindurwa ku mpuzandengo y'ibipimo byuzuye (degrees na percentages). Guhindura ukagaruka bishobora gutuma habaho impinduka imwe cyangwa ebyiri mu RGB ugereranije n'iya mbere — ntibigaragara mu bikorwa, ariko ni byiza kubimenya niba uhora uhinduranya amabara.
HEX na HSL bisobanuwe
Icyo HEX ari cyo
Umukono wa HEX ni umubare wa hexadecimal w'ibyiciro 6 ubika imiyoboro y'umutuku, icyatsi na bleu y'ibara ukurikiranwa na # imbere. Buri pareja y'ibyiciro ihagarariye umuyoboro umwe, kuva 00 (ntayo) kugeza FF (yuzuye), bitanga amabara miliyoni 16.7 kimwe na RGB mu buryo bugufi cyane. HEX ni yo yihariye muri CSS, ibikoresho byo gushushanya n'amabwiriza y'ikirango.
- Imiterere:
- #RRGGBB
- Urutonde:
- 00–FF kuri buri muyoboro
- Byiza kuri:
- CSS, kohereza igishushanyo, amabwiriza y'ikirango
Icyo HSL ari cyo
HSL itandukanya ibara muri hue (0–360° kuri roue y'amabara), saturation (uburyo ari amabara, 0–100%) na lightness (uburyo bwaka, 0–100%). Kuko buri gice gihura n'uburyo abantu basobanura ibara, HSL ni format yoroshye gukoresha mu gukora tints, shades na palettes zihamye — ku buryo bw'intoki cyangwa muri code.
- Imiterere:
- hsl(H, S%, L%)
- Urutonde:
- 0–360°, 0–100%, 0–100%
- Byiza kuri:
- palettes, tints na shades, theming
HEX to HSL reference table
Amabara akunze gukoreshwa muri CSS, yahinduwe kuva HEX ujya HSL.
| Ibara | 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%) |