RGB fortæller en skærm, hvor meget lys den skal udsende; HSL fortæller dig, hvordan farven faktisk ser ud. At konvertere de tre kanaler til hue, saturation og lightness gør en farve nem at justere manuelt.
Sådan fungerer konvertering fra RGB til HSL
- Divider R, G og B med 255, så hver værdi ligger mellem 0 og 1.
- Tag maksimum og minimum af de tre — deres gennemsnit er lysheden L.
- Hvis maksimum og minimum er lige, er farven grå: hue og saturation er begge 0.
- Ellers udled S fra spredningen mellem maksimum og minimum, og aflæs H fra den kanal, der er maksimum.
Eksempel
Princippet er eksakt. Fordi H, S og L normalt vises som afrundede hele tal, kan konvertering tilbage forskyde en kanal med et eller to trin.
RGB og HSL forklaret
Hvad er RGB?
RGB beskriver en farve som tre lyskilder — rød, grøn og blå — hver fra 0 til 255. Det afspejler, hvordan skærme faktisk virker: alle tre på 255 giver hvid, alle på 0 giver sort. RGB er det rigtige valg, når du skal regne med en farve, og rgba() tilføjer gennemsigtighed ovenpå.
- Syntaks:
- rgb(R, G, B)
- Område:
- 0–255 per kanal
- Bedst til:
- kode, canvas, gennemsigtighed med rgba()
Hvad er HSL?
HSL deler en farve op i hue (0–360° på farvehjulet), saturation (hvor farverig, 0–100%) og lightness (hvor lys, 0–100%). Da hver del passer til, hvordan mennesker beskriver farver, er HSL det nemmeste format til at bygge tints, shades og konsistente palettes — manuelt eller i kode.
- Syntaks:
- hsl(H, S%, L%)
- Område:
- 0–360°, 0–100%, 0–100%
- Bedst til:
- paletter, tints og shades, theming
RGB til HSL referenceoversigt
De mest almindelige CSS-farver, konverteret fra RGB til HSL.
| Farve | 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%) |