HSL er den venlige måde at vælge farve på, RGB er hvad skærme, canvas-API'er og billedkode rent faktisk bruger. Denne konverter omsætter enhver hue-, saturation- og lightness-triple til præcise 0–255-kanaler.
Sådan fungerer konvertering fra HSL til RGB
- Konvertér S og L til brøker og beregn chroma C = (1 − |2L − 1|) × S.
- Divider hue med 60 for at finde segmentet på farvehjulet og beregn den mellemste værdi X = C × (1 − |(H/60 mod 2) − 1|).
- Tildel C, X og 0 til R-, G- og B-pladserne i henhold til det fundne segment.
- Tilføj lightness-offsettet L − C/2 til alle tre kanaler og gang med 255.
Eksempel
Resultatet er eksakt indtil den endelige afrunding til hele kanaler. Brøkværdier for hue eller saturation understøttes og lander blot på den nærmeste RGB-triple.
HSL og RGB forklaret
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
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()
HSL til RGB referenceoversigt
De mest almindelige CSS-farver, konverteret fra HSL til RGB.
| Farve | 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) |