HSL is die vriendelike manier om ’n kleur te kies; RGB is wat skerms, canvas-API’s en beeldkode werklik verbruik. Hierdie omskakelaar sit enige tint, versadiging en ligtheidsdrieklank om in presiese 0–255-kanale.
Hoe HSL na RGB omskakeling werk
- Skakel S en L om na breuke en bereken die chroma C = (1 − |2L − 1|) × S.
- Deel die tint deur 60 om sy segment op die kleurwiel te vind en bereken die intermedière waarde X = C × (1 − |(H/60 mod 2) − 1|).
- Ken C, X en 0 toe aan die R-, G- en B-gleuwe volgens daardie segment.
- Voeg die ligtheidsverskuiwing L − C/2 by al drie kanale en vermenigvuldig met 255.
Werkende voorbeeld
Die resultaat is presies tot by die finale afronding na heelkanale. Breukwaardes vir tint of versadiging word ondersteun en land eenvoudig op die naaste RGB-drieklank.
HSL en RGB verduidelik
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
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()
HSL na RGB verwysingstabel
Die mees algemene CSS-kleure, omgeskakel van HSL na RGB.
| Kleur | 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) |