RGB diras al ekrano kiom da lumo elsendi; HSL diras al vi kiel la koloro fakte aspektas. Konverti la tri kanalojn en nuancon, saturiĝon kaj lumecon faras koloron facilan por adapti per mano.
Kiel funkcias konvertado de RGB al HSL
- Dividu R, G kaj B per 255 por ke ĉiu valoro situu inter 0 kaj 1.
- Prenu la maksimumon kaj la minimumon el la tri — ilia mezumo estas la lumeco L.
- Se maksimumo kaj minimumo estas egalaj, la koloro estas griza: nuanco kaj saturiĝo ambaŭ estas 0.
- Alie derivu S el la disvastiĝo inter maksimumo kaj minimumo, kaj legu H el kiu ajn kanalo estas maksimuma.
Efektiva ekzemplo
Preciza en principo. Ĉar H, S kaj L kutime estas montrataj kiel rondigitaj entjeroj, konverti reen povas ŝanĝi kanalon per unu aŭ du paŝoj.
RGB kaj HSL klarigo
Kio estas RGB?
RGB priskribas koloron kiel tri lumkanalojn — ruĝa, verda kaj blua — ĉiu de 0 ĝis 255. Ĝi spegulas kiel ekranoj fakte funkcias: ĉiuj tri je 255 donas blankon, ĉiuj je 0 donas nigrion. RGB estas la ĝusta elekto kiam vi bezonas kalkuli kun koloro, kaj rgba() aldona travideblecon supre.
- Sintekso:
- rgb(R, G, B)
- Gamo:
- 0–255 po kanalo
- Plej taŭga por:
- kodo, canvas, travidebleco kun rgba()
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
RGB al HSL referenctabelo
La plej oftaj CSS-koloroj, konvertitaj de RGB al HSL.
| Koloro | 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%) |