Eligere colorem in HSL commodum est, sed stylesheets, traditio designi et documenta notae adhuc in HEX versantur. Hic converter fossam obruit et dat codicem sex-digitum pro quolibet hue, saturatio et claritas coniunctio.
Quomodo convertio HSL in HEX operatur
- Convertere saturationem et claritatem in fractas: 60% fit 0.6.
- Computa chromam C = (1 − |2L − 1|) × S — hoc demonstrat quam longe color a griseo sit.
- Utere hue ut illam chromam colloces in canalis rubri, viridis et caerulei, deinde transfere omnia tria per L − C/2.
- Multiplica quisque canalem per 255, rotunda, et scribe ut duas figuras hexadecimalis.
Exemplum operantis
Rotundatio fit semel, in ultimo gradu, cum quisque canalis ad integrum 0–255 figitur. Resultatum est proximum codicem HEX ad input HSL et plerumque identicum cum quod instrumentum designi monstrat.
HSL et HEX explicati
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
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
Tabula referentiarum HSL ad HEX
Frequentissima CSS colorum, a HSL in HEX conversae.
| Color | 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 |