HSL describit colorem quomodo homines de eo loquuntur: quae hue, quanta saturatio, quanta claritas. Conversio codicis HEX in HSL est celerissimus modus ut colorem in formam obtineas quam revera temperare possis — clarius facere, mollire aut totam scalam ex eo construere.
Quomodo convertio HEX in HSL operatur
- Converte codicem HEX in RGB et divide quisque canalem per 255, ut omnes tria inter 0 et 1 sint.
- Inveni maximum et minimum ex tribus valoribus. Eorum mediocris est claritas L.
- Spatium inter eos regit saturationem S: divide id per (2 − max − min) pro coloribus claris, vel per (max + min) pro obscuris.
- Canalis qui maximum tenet decernit hue H — ruber ad 0°, viridis ad 120°, caeruleus ad 240° — et reliqui duo canales collocant hue intra illud segmento.
Exemplum operantis
Mathematica sunt exacta, sed valores HSL plerumque rotundantur ad gradus integros et percentas. Conversio retro ergo potest duobus gradibus RGB discedere a originali — in usu invisibilis, sed scire utile si colores iterato convertas.
HEX et HSL explicati
Quid est HEX?
Codex HEX est numerus hexadecimalis sex-digitus qui canalem rubri, viridis et caerulei coloris recondit post praefixum #. Quisque par digitorum refertur ad unum canalem, a 00 (nullus) usque ad FF (plenus), quod eadem 16.7 miliones colorum ut RGB dat sed in notatione breviore. HEX est default in CSS, instrumentis designandi et regulis brandi.
- Syntaxis:
- #RRGGBB
- Ambitus:
- 00–FF per canalem
- Optimum ad:
- CSS, traditio designandi, regulæ brandi
Quid est HSL?
HSL dividit colorem in hue (0–360° in rota colorum), saturationem (quam coloratus, 0–100%) et lucem (quam clarus, 0–100%). Quia singula pars congruit cum modo quo homines colorem describunt, HSL est facilior forma ad tintas, umbras et constantes palettes construendas — manu vel in codice.
- Syntaxis:
- hsl(H, S%, L%)
- Ambitus:
- 0–360°, 0–100%, 0–100%
- Optimum ad:
- palettes, tintae et umbrae, theming
Tabula referentiarum HEX ad HSL
Frequentissima CSS colorum, a HEX in HSL conversae.
| Color | 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%) |