HEX, RGB, HSL: Forstå fargekoder på nettet
Du redigerer en nettside og ser #FF5733 i CSS-en. Eller du jobber med en designer som sender deg rgb(255, 87, 51). Eller et designverktøy viser en farge som hsl(11, 100%, 60%). Alle disse beskriver nøyaktig den samme fargen — en livlig rødoransje — men i tre ulike formater.
Hvis du noen gang har blitt forvirret av fargekoder på nettet, vil denne guiden rydde opp på fem minutter.
Slik fungerer digitale farger
Alle farger på skjermen din skapes ved å blande tre primærfarger av lys: Rød, Grønn og Blå. Dette er RGB-fargemodellen. Ved å variere intensiteten til hver kanal fra null (av) til maksimum (full lysstyrke), kan du skape alle de omtrent 16,7 millioner fargene en standardskjerm kan vise.
- Rød 255, Grønn 0, Blå 0 = ren rød
- Rød 0, Grønn 255, Blå 0 = ren grønn
- Rød 0, Grønn 0, Blå 255 = ren blå
- Rød 255, Grønn 255, Blå 255 = hvit (alle kanaler fulle)
- Rød 0, Grønn 0, Blå 0 = svart (alle kanaler av)
- Rød 255, Grønn 255, Blå 0 = gul (rød + grønn)
Hvert fargeformat som brukes på nettet er ganske enkelt en annen måte å uttrykke disse kanelverdiene på.
Visste du? Tallet 16,7 millioner farger kommer fra 256 nivåer per kanal (0–255) på tvers av tre kanaler: 256 × 256 × 256 = 16 777 216 mulige farger.
HEX-farger
Slik ser de ut
#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF
Slik fungerer de
En HEX-fargekode er en sekstegns streng med et nummertegn foran. De seks tegnene er delt inn i tre par, der hvert par representerer en fargekanal i heksadesimal (tallsystem med grunntall 16):
| Par | Kanal | Område |
|---|---|---|
| To første tegn | Rød | 00 til FF |
| To midterste tegn | Grønn | 00 til FF |
| To siste tegn | Blå | 00 til FF |
Heksadesimalt bruker sifrene 0–9 og bokstavene A–F, der A=10, B=11, C=12, D=13, E=14, F=15. Så FF i heksadesimalt tilsvarer 255 i desimalt (15 × 16 + 15 = 255).
Analysen av #FF5733:
- FF = Rød på 255 (maksimum)
- 57 = Grønn på 87
- 33 = Blå på 51
Dette gir en livlig rødoransje.
Stenografi
Når hvert par har to identiske tegn, kan du bruke en tretegns stenografi:
#FF0000kan skrives som#F00#3366FFkan skrives som#36F#000000kan skrives som#000
Tips HEX-koder er det mest brukte formatet i webutvikling. Hvis du bare skal lære ett format, lær dette.
RGB-farger
Slik ser de ut
rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)
Slik fungerer de
RGB-notasjon angir direkte verdiene for rød-, grønn- og blåkanalene som desimaltall fra 0 til 255. Det er det mest intuitive formatet fordi tallene direkte tilsvarer intensiteten til hvert lys.
rgb(255, 87, 51) betyr:
- Rød: 255 (maksimum)
- Grønn: 87 (omtrent en tredjedel)
- Blå: 51 (omtrent en femtedel)
RGBA: Legg til gjennomsiktighet
RGBA legger til en fjerde verdi for ugjennomsiktighet (alfa), som spenner fra 0 (helt gjennomsiktig) til 1 (helt ugjennomsiktig):
rgba(255, 87, 51, 0.5) /* 50% gjennomsiktig */
rgba(0, 0, 0, 0.8) /* 80% ugjennomsiktig svart */
Dette er nyttig for overlegg, skygger og designelementer som trenger å vise innhold bak seg.
HSL-farger
Slik ser de ut
hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)
Slik fungerer de
HSL står for Farge (Hue), Metning (Saturation), Lyshet (Lightness). I stedet for å tenke i form av rød/grønn/blå-kanalmiks, beskriver HSL farge på den måten mennesker naturlig tenker om det.
Fargetone er selve fargen, uttrykt som en grad på fargehjulet (0–360):
- 0° / 360° = Rød
- 60° = Gul
- 120° = Grønn
- 180° = Cyan
- 240° = Blå
- 300° = Magenta
Metning er hvor levende fargen er, fra 0 % (grå) til 100 % (fullt mettet).
Lyshet er hvor lys eller mørk fargen er, fra 0 % (svart) til 100 % (hvit). 50 % er «normal» lyshet.
hsl(11, 100%, 60%) betyr:
- Fargetone: 11° (lett oransjerød)
- Metning: 100 % (fullt levende)
- Lyshet: 60 % (litt lysere enn normalt)
Visste du? HSL anses som det mest designervennlige fargeformatet fordi det stemmer overens med måten vi naturlig beskriver farger på. «Gjør det litt lysere» betyr øk L-verdien. «Gjør det mindre levende» betyr reduser S-verdien. «Flytt det mot blått» betyr endre H-verdien. Med HEX eller RGB krever disse justeringene å endre flere verdier samtidig.
HSLA: Legg til gjennomsiktighet
Som RGBA legger HSLA til en alfa-kanal:
hsla(11, 100%, 60%, 0.5) /* 50% gjennomsiktig */
Når du bruker hvilket format
| Format | Best for | Fordel |
|---|---|---|
| HEX | CSS-stilark, designspesifikasjoner | Kompakt, universelt forstått |
| RGB | Programmatisk fargemanipulering | Intuitive kanelverdier |
| HSL | Designarbeid, opprette fargepaletter | Samsvarer med menneskelig fargeoppfatning |
For webutvikling
HEX er de facto-standarden. Mesteparten av CSS er skrevet med HEX-koder fordi de er kompakte og alle utviklere kjenner dem igjen.
For designsystemer
HSL er ideelt for å lage konsistente fargepaletter. For å lage lysere og mørkere varianter av en merkefarge, justerer du ganske enkelt lyshetsverdien:
- Primær:
hsl(210, 80%, 50%) - Lys variant:
hsl(210, 80%, 70%) - Mørk variant:
hsl(210, 80%, 30%)
Fargetone og metning forblir de samme, noe som garanterer at variantene er den samme «fargen» ved ulike lysheter.
For gjennomsiktighet
Bruk RGBA eller HSLA når du trenger halvgjennomsiktige farger for overlegg, skygger eller glasseffekter.
Konvertering mellom formater
Du vil ofte trenge å konvertere mellom formater. En designer sender HSL-verdier, men kodebasen din bruker HEX. En merkevareveiledning spesifiserer RGB, men du trenger HSL for å lage varianter.
Matematikken er grei, men kjedelig å gjøre manuelt. Et konverteringsverktøy håndterer det øyeblikkelig.
Tips Konverter mellom HEX, RGB, HSL og mer: Slik konverterer du fargekoder. Skriv inn en farge i et format og få alle de andre øyeblikkelig.
Begynn å jobbe med farger:
Alle verktøy er gratis og fungerer direkte i nettleseren din.