HEX, RGB, HSL: Forstå webfarvekoder
Du redigerer en hjemmeside og ser #FF5733 i CSS'en. Eller du arbejder med en designer, der sender dig rgb(255, 87, 51). Eller et designværktøj viser en farve som hsl(11, 100%, 60%). De beskriver alle præcis den samme farve — en livlig rødorange — men i tre forskellige formater.
Hvis du nogensinde har været forvirret over webfarvekoder, vil denne guide rydde op i det på fem minutter.
Sådan fungerer digitale farver
Hver farve på din skærm skabes ved at blande tre primærfarver af lys: Rød, Grøn og Blå. Det er RGB-farvemodellen. Ved at variere intensiteten af hver kanal fra nul (slukket) til maksimum (fuld lysstyrke) kan du skabe et af de ca. 16,7 millioner farver, et standardskærm kan vise.
- Rød 255, Grøn 0, Blå 0 = rent rødt
- Rød 0, Grøn 255, Blå 0 = rent grønt
- Rød 0, Grøn 0, Blå 255 = rent blåt
- Rød 255, Grøn 255, Blå 255 = hvidt (alle kanaler fulde)
- Rød 0, Grøn 0, Blå 0 = sort (alle kanaler slukket)
- Rød 255, Grøn 255, Blå 0 = gult (rød + grøn)
Hvert farveformat, der bruges på nettet, er blot en anden måde at udtrykke disse kanalværdier på.
Vidste du? De 16,7 millioner farver stammer fra 256 niveauer pr. kanal (0-255) på tværs af tre kanaler: 256 × 256 × 256 = 16.777.216 mulige farver.
HEX-farver
Sådan ser de ud
#FF5733
#3498DB
#2ECC71
#000000
#FFFFFF
Sådan fungerer de
En HEX-farvekode er en seks-tegns streng forud for et havelågetegn. De seks tegn er opdelt i tre par, der hver repræsenterer en farvekanal i hexadecimalt (base 16):
| Par | Kanal | Interval |
|---|---|---|
| De to første tegn | Rød | 00 til FF |
| De to midterste tegn | Grøn | 00 til FF |
| De to sidste tegn | Blå | 00 til FF |
Hexadecimalt bruger cifrene 0-9 og bogstaverne A-F, hvor A=10, B=11, C=12, D=13, E=14, F=15. Så FF i hexadecimalt svarer til 255 i decimal (15 × 16 + 15 = 255).
#FF5733 opdelt:
- FF = Rød ved 255 (maksimum)
- 57 = Grøn ved 87
- 33 = Blå ved 51
Det producerer en livlig rødorange.
Forkortelse
Når hvert par har to identiske tegn, kan du bruge en tre-tegns forkortelse:
#FF0000kan skrives som#F00#3366FFkan skrives som#36F#000000kan skrives som#000
Tip HEX-koder er det mest udbredte format i webudvikling. Hvis du kun lærer ét format, så lær dette.
RGB-farver
Sådan ser de ud
rgb(255, 87, 51)
rgb(52, 152, 219)
rgb(46, 204, 113)
rgb(0, 0, 0)
rgb(255, 255, 255)
Sådan fungerer de
RGB-notation angiver direkte de røde, grønne og blå kanalværdier som decimaltal fra 0 til 255. Det er det mest intuitive format, fordi tallene direkte svarer til intensiteten af hver lyskilde.
rgb(255, 87, 51) betyder:
- Rød: 255 (maksimum)
- Grøn: 87 (ca. en tredjedel)
- Blå: 51 (ca. en femtedel)
RGBA: Tilføj gennemsigtighed
RGBA tilføjer en fjerde værdi for opacitet (alfa), fra 0 (fuldt gennemsigtig) til 1 (fuldt ugennemsigtig):
rgba(255, 87, 51, 0.5) /* 50% gennemsigtig */
rgba(0, 0, 0, 0.8) /* 80% ugennemsigtig sort */
Det er nyttigt til overlays, skygger og ethvert designelement, der skal vise indhold bag sig.
HSL-farver
Sådan ser de ud
hsl(11, 100%, 60%)
hsl(204, 70%, 53%)
hsl(145, 63%, 49%)
hsl(0, 0%, 0%)
hsl(0, 0%, 100%)
Sådan fungerer de
HSL står for Hue (farvetone), Saturation (mætning), Lightness (lyshed). I stedet for at tænke i røde/grønne/blå kanalblandinger beskriver HSL farven, som mennesker naturligt tænker på den.
Hue er selve farven udtrykt som grader på farvehjulet (0-360):
- 0° / 360° = Rød
- 60° = Gul
- 120° = Grøn
- 180° = Cyan
- 240° = Blå
- 300° = Magenta
Saturation er, hvor levende farven er, fra 0% (grå) til 100% (fuldt mættet).
Lightness er, hvor lys eller mørk farven er, fra 0% (sort) til 100% (hvid). 50% er den "normale" lyshed.
hsl(11, 100%, 60%) betyder:
- Hue: 11° (let orange-rød)
- Saturation: 100% (fuldt levende)
- Lightness: 60% (lidt lysere end normal)
Vidste du? HSL betragtes som det mest designervenlige farveformat, fordi det afspejler, hvordan vi naturligt beskriver farver. "Gør det lidt lysere" betyder at øge L-værdien. "Gør det mindre livligt" betyder at reducere S-værdien. "Skift det mod blåt" betyder at ændre H-værdien. Med HEX eller RGB kræver disse justeringer at ændre flere værdier samtidigt.
HSLA: Tilføj gennemsigtighed
Som RGBA tilføjer HSLA en alfa-kanal:
hsla(11, 100%, 60%, 0.5) /* 50% gennemsigtig */
Hvornår bruger man hvilket format?
| Format | Bedst til | Fordel |
|---|---|---|
| HEX | CSS-stilark, designspecifikationer | Kompakt, universelt forstået |
| RGB | Programmatisk farvemanipulation | Intuitive kanalværdier |
| HSL | Designarbejde, oprettelse af farveskemaer | Afspejler menneskelig farveperception |
Til webudvikling
HEX er de facto-standarden. Det meste CSS skrives med HEX-koder, fordi de er kompakte og alle udviklere genkender dem.
Til designsystemer
HSL er ideel til at skabe konsekvente farvepaletter. For at skabe lysere og mørkere varianter af en brandfarve justerer du blot lyshedsværdien:
- Primær:
hsl(210, 80%, 50%) - Lys variant:
hsl(210, 80%, 70%) - Mørk variant:
hsl(210, 80%, 30%)
Hue og mætning forbliver ens, hvilket garanterer, at varianterne er den samme "farve" ved forskellig lysstyrke.
Til gennemsigtighed
Brug RGBA eller HSLA, når du har brug for halvgennemsigtige farver til overlays, skygger eller glaseffekter.
Konvertering mellem formater
Du vil ofte have brug for at konvertere mellem formater. En designer sender HSL-værdier, men din kodebase bruger HEX. En brandguide specificerer RGB, men du har brug for HSL til at oprette varianter.
Matematikken er ligetil, men kedelig at gøre manuelt. Et konverteringsværktøj håndterer det øjeblikkeligt.
Tip Konvertér mellem HEX, RGB, HSL og mere: Sådan konverterer du farvekoder. Indtast en farve i et vilkårligt format og få alle de andre med det samme.
Begynd at arbejde med farver:
Alle værktøjer er gratis og fungerer direkte i din browser.