Gutoranya ibara muri HSL biroroshye, ariko stylesheets, guhererekanya design na brand documents biracyakoresha HEX. Uyu mukura uhuriza icyo cyuho kandi aguha code ya digits esheshatu ku bwo hue, saturation na lightness icyo ari cyo cyose.
Uko guhindura HSL ujya HEX bikora
- Hindura saturation na lightness muri fractions: 60% iba 0.6.
- Bara chroma C = (1 − |2L − 1|) × S — ni byo bigaragaza uburyo ibara riri kure ya grey.
- Koresha hue gushyira uwo chroma kuri channel za red, green na blue, hanyuma uhindure izo channel zose na L − C/2.
- Kuba buri channel na 255, uyizunge, uyandike nka digits ebyiri za hexadecimal.
Urugero rwakozwe
Guzunguruka (rounding) kiba rimwe gusa, mu cyiciro cya nyuma, igihe buri channel isigajwe ku gaciro k'umutwe wa 0–255. Ibyo bitanga HEX iri hafi cyane y'icyo watanze muri HSL kandi kenshi ihuye n'icyo igikoresho cy'igishushanyo kigaragaza.
HSL na HEX bisobanuwe
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
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
HSL to HEX reference table
Amabara akunze gukoreshwa muri CSS, yahinduwe kuva HSL ujya HEX.
| Ibara | 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 |