HSL amicus est ad colorem eligendum, RGB vero est quod schermi, canvas API et codex imaginum revera consumunt. Hic convertor quilibet triplex hue, saturation et lightness in exactas canales 0–255 convertit.
Quomodo convertio HSL in RGB operatur
- Converte S et L in fractio nes et computa chromam C = (1 − |2L − 1|) × S.
- Divide hue per 60 ut segmentum in rota colorum invenias et computa valor intermedius X = C × (1 − |(H/60 mod 2) − 1|).
- Assigna C, X et 0 ad locos R, G et B secundum illud segmentum.
- Adde offset lightness L − C/2 ad omnes tres canales et multiplica per 255.
Exemplum operantis
Eventus est exactus usque ad ultimam approximationem ad canales integros. Valoribus fractionalibus pro hue vel saturation sustentatis, solum in proximum RGB triplex cadunt.
HSL et RGB 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 RGB?
RGB describit colorem ut tres canales luminis — ruber, viridis et caeruleus — quisque ab 0 ad 255. Repraesentat quomodo screenia revera operantur: omnia tria ad 255 efficiunt album, omnia ad 0 efficiunt nigrum. RGB est aptissimus cum necesse est cum numero operari, et rgba() addit transparentiam.
- Syntaxis:
- rgb(R, G, B)
- Ambitus:
- 0–255 per canalem
- Optimum ad:
- codex, canvas, transparentia cum rgba()
Tabula referentiarum HSL ad RGB
Frequentissima CSS colorum, a HSL in RGB conversae.
| Color | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |