RGB sier skjermen hvor mye lys den skal sende ut; HSL forteller deg hvordan fargen egentlig ser ut. Å konvertere de tre kanalene til hue, metning og lyshet gjør en farge enkel å justere for hånd.
Hvordan konvertering fra RGB til HSL fungerer
- Del R, G og B på 255 slik at hver verdi ligger mellom 0 og 1.
- Ta maksimum og minimum av de tre — gjennomsnittet er lysheten L.
- Hvis maksimum og minimum er like, er fargen grå: hue og metning er begge 0.
- Ellers utled S fra spennet mellom maksimum og minimum, og les H fra den kanalen som er maksimum.
Eksempel
Eksakt i prinsippet. Fordi H, S og L vanligvis vises som avrundede hele tall, kan konvertering tilbake flytte en kanal med ett eller to trinn.
RGB and HSL explained
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()
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
Referansetabell fra RGB til HSL
De vanligste CSS-fargene, konvertert fra RGB til HSL.
| Farge | 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%) |