HSL er den vennlige måten å velge en farge på, RGB er det skjermene, canvas-APIer og bilde-kode faktisk bruker. Denne konverteren gjør en hvilken som helst hue-, saturation- og lightness-trippel om til nøyaktige 0–255-kanaler.
Hvordan konvertering fra HSL til RGB fungerer
- Gjør om S og L til brøker og beregn kroma C = (1 − |2L − 1|) × S.
- Del hue på 60 for å finne segmentet på fargehjulet og beregn mellomverdien X = C × (1 − |(H/60 mod 2) − 1|).
- Tildel C, X og 0 til R-, G- og B-plassene i henhold til det segmentet.
- Legg lyshets-offseten L − C/2 til alle tre kanalene og multipliser med 255.
Eksempel
Resultatet er eksakt fram til siste avrunding til hele kanaler. Fraksjonelle hue- eller saturasjonsverdier støttes og lander rett og slett på nærmeste RGB-trippel.
HSL and RGB explained
Hva er HSL?
HSL deler en farge i hue (0–360° på fargesirkelen), saturation (hvor fargerik, 0–100%) og lightness (hvor lys, 0–100%). Siden hver del matcher måten folk beskriver farge på, er HSL det enkleste formatet for å bygge nyanser, skygger og konsistente paletter — for hånd eller i kode.
- Syntaks:
- hsl(H, S%, L%)
- Område:
- 0–360°, 0–100%, 0–100%
- Best egnet for:
- paletter, nyanser og skygger, tematikk
Hva er RGB?
RGB beskriver en farge som tre lyskilder — rød, grønn og blå — hver fra 0 til 255. Det speiler hvordan skjermer faktisk fungerer: alle tre på 255 gir hvitt, alle på 0 gir svart. RGB er riktig valg når du trenger å regne med en farge, og rgba() legger til gjennomsiktighet i tillegg.
- Syntaks:
- rgb(R, G, B)
- Område:
- 0–255 per kanal
- Best egnet for:
- kode, canvas, gjennomsiktighet med rgba()
Referansetabell fra HSL til RGB
De vanligste CSS-fargene, konvertert fra HSL til RGB.
| Farge | 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) |