RGB vertel 'n skerm hoeveel lig om uit te straal; HSL vertel jou hoe die kleur eintlik lyk. Om die drie kanale in tint, versadiging en ligtheid om te skakel maak 'n kleur maklik om met die hand aan te pas.
Hoe RGB na HSL omskakeling werk
- Deel R, G en B deur 255 sodat elke waarde tussen 0 en 1 val.
- Neem die maksimum en die minimum van die drie — hul gemiddelde is die ligtheid L.
- As maksimum en minimum gelyk is, is die kleur grys: tint en versadiging is albei 0.
- Andersins lei S af uit die verskil tussen maksimum en minimum, en lees H uit watter kanaal die maksimum is.
Werkende voorbeeld
Presies in beginsel. Omdat H, S en L gewoonlik as afgeronde heelgetalle vertoon word, kan terugskakeling 'n kanaal een of twee stappe skuif.
RGB en HSL verduidelik
Wat is RGB?
RGB beskryf ’n kleur as drie ligkanale — rooi, groen en blou — elk van 0 tot 255. Dit weerspieël hoe skerms werklik werk: almal by 255 gee wit, almal by 0 gee swart. RGB is die regte keuse wanneer jy met die nommers moet reken, en rgba() voeg deursigtigheid bo-op.
- Sintaks:
- rgb(R, G, B)
- Reeks:
- 0–255 per kanaal
- Beste vir:
- kode, canvas, deursigtigheid met rgba()
Wat is HSL?
HSL verdeel ’n kleur in hue (0–360° op die kleurwiel), versadiging (hoe kleurvol, 0–100%) en ligtheid (hoe helder, 0–100%). Omdat elk van hierdie dele ooreenstem met hoe mense kleur beskryf, is HSL die maklikste formaat om tint-, skadu- en konsekwente palette te bou — met die hand of in kode.
- Sintaks:
- hsl(H, S%, L%)
- Reeks:
- 0–360°, 0–100%, 0–100%
- Beste vir:
- palette, tint- en skaduwerk, theming
RGB na HSL verwysingstabel
Die mees algemene CSS-kleure, omgeskakel van RGB na HSL.
| Kleur | 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%) |