HSL priskribas koloron tiel kiel homoj parolas pri ĝi: kiu nuanco, kiom kolora, kiom hela. Konverti HEX-kodon al HSL estas la plej rapida maniero por akiri koloron en formo, kiun vi efektive povas ŝanĝi — malheligi, malintensiĝi, aŭ konstrui tutan skalon el ĝi.
Kiel funkcias konvertado de HEX al HSL
- Konvertu la HEX-kodon al RGB kaj dividu ĉiun kanalon per 255, tiel ke ĉiuj tri valoroj situas inter 0 kaj 1.
- Trovu la plej grandan kaj la plej malgrandan el la tri valoroj. Ilia mezumo estas la lumeco L.
- La disvastiĝo inter ili determinigas la saturiĝon S: dividu ĝin per (2 − max − min) por helaj koloroj, aŭ per (max + min) por malhelaj.
- La kanalo kiu tenas la maksimumon decidas la nuancon H — ruĝa ĉe 0°, verda ĉe 120°, blua ĉe 240° — kaj la aliaj du kanaloj lokigas la nuancon ene de tiu segmento.
Efektiva ekzemplo
La matematiko estas preciza, sed HSL-valores normale estas rondigitaj al entjeraj gradoj kaj procentaĵoj. Konverti reen povas tial finiĝi unu aŭ du RGB-paŝojn for de la originalo — nevidebla en praktiko, sed utila scii se vi ripete rondigas kolorojn.
HEX kaj HSL klarigo
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
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
HEX al HSL referenctabelo
La plej oftaj CSS-koloroj, konvertitaj de HEX al HSL.
| Koloro | 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%) |