RGB dicit schermo quantum luminis emittendum sit; HSL dicit quomodo color revera appareat. Conversio trium canalium in hue, saturationem et claritatem facit colorem facilem manu temperari.
Quomodo convertio RGB in HSL operatur
- Divide R, G et B per 255 ut quisque valor inter 0 et 1 sit.
- Sume maximum et minimum ex tribus — eorum mediocris est claritas L.
- Si maximum et minimum aequales sunt, color est griseus: hue et saturatio ambae sunt 0.
- Aliter derive S ex intervallo inter maximum et minimum, et lege H ex illo canali qui maximum est.
Exemplum operantis
In principio exactum. Quia H, S et L plerumque ostenduntur ut numeri integri rotundi, conversio retro potest canalem uno vel duobus gradibus movere.
RGB et HSL explicati
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()
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 RGB ad HSL
Frequentissima CSS colorum, a RGB in HSL conversae.
| Color | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |