Elekti koloron en HSL estas komforta, sed stilfolioj, transdono de projektado kaj markaj dokumentoj ankoraŭ uzas HEX. Ĉi tiu konvertilo fermas tiun interspacon kaj donas al vi la ses-ciferan kodon por ajna kombino de nuanco, saturiĝo kaj lumeco.
Kiel funkcias konvertado de HSL al HEX
- Konvertu saturiĝon kaj lumecon al frakcioj: 60% fariĝas 0.6.
- Kalkulu la kromon C = (1 − |2L − 1|) × S — tio indikas kiom for la koloro estas de griza.
- Uzu la nuancon por poziciigi tiun kromon sur la ruĝajn, verdajn kaj blua-kanalojn, poste ŝovu ĉiujn tri per L − C/2.
- Multobligu ĉiun kanalon per 255, rondigu ĝin, kaj skribu ĝin kiel du heksadecimajn ciferojn.
Efektiva ekzemplo
Rondigo okazas unufoje, en la lasta paŝo, kiam ĉiu kanalo estas glatigita al entjera valoro 0–255. La rezulto estas la plej proksima HEX-kodo al via HSL-enigo kaj normale identa al tio, kion montras projektila ilo.
HSL kaj HEX klarigo
Kio estas HSL?
HSL dividas koloron en nuancon (0–360° sur la kolorrado), saturiĝon (kiom kolora, 0–100%) kaj lumon (kiom hela, 0–100%). Ĉar ĉiu parto kongruas kun la maniero kiel homoj priskribas koloron, HSL estas la plej simpla formato por konstrui kolorkopiojn, nuancojn kaj konsekvencajn paletrojn — per mano aŭ en kodo.
- Sintekso:
- hsl(H, S%, L%)
- Gamo:
- 0–360°, 0–100%, 0–100%
- Plej taŭga por:
- paletroj, nuancoj kaj ombroj, temigado
Kio estas HEX?
HEX-kodo estas ses-cifera heksadecima nombro kiu stokas la ruĝan, verdan kaj bluan kanalon de koloro post antaŭa #. Ĉiu paro da ciferoj kovras unu kanalon, de 00 (neniu) ĝis FF (plena), kio donas la samajn 16.7 milionojn da koloroj kiel RGB en multe pli mallonga notacio. HEX estas la defaŭlta en CSS, dizajnotiloj kaj markgvidlinioj.
- Sintekso:
- #RRGGBB
- Gamo:
- 00–FF po kanalo
- Plej taŭga por:
- CSS, transdono de dezajno, markgvidlinioj
HSL al HEX referenctabelo
La plej oftaj CSS-koloroj, konvertitaj de HSL al HEX.
| Koloro | 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 |