RGB vs HEX vs HSL vs CMYK: The Ultimate Color Format Guide

Hvis du nogensinde har prøvet at designe en hjemmeside, oprette et logo eller printe et visitkort, er du straks styrtet ind i den forvirrende alfabetsuppe af farvekoder: HEX, RGB, HSL og CMYK. Hvorfor er der så mange måder at beskrive en simpel blå nuance på?

Sandheden er, at computere og printere "ser" lys på fundamentalt forskellige måder. Desuden er hvordan computere behandler lys ikke nødvendigvis, hvordan den menneskelige hjerne fortolker farver. At forstå disse formater er ikke kun teori – det vil spare dig for at implementere websteder med utilgængelige kontrastforhold, eller betale tusindvis af dollars for markedsføringsfoldere, der udskrives til at se mudrede og mørke ud.

Additiv vs subtraktiv lys

Før vi dykker ned i koden, skal vi fastslå den fysiske forskel mellem skærme og papir.

• Skærmbilleder udsender lys (additiv). Hvis du slår alle pixels fra, er skærmen sort. For at gøre hvid affyrer en skærm rødt, grønt og blåt lys med maksimal intensitet.
• Papir reflekterer lys (subtraktiv). Et blankt stykke papir er allerede hvidt (det reflekterer alt lys). For at gøre sort, lægger en printer cyan, magenta og gul blæk oven på hinanden for at absorbere alt lyset.

1. RGB (rød, grøn, blå)

RGB er modersmålet på din computerskærm. Den definerer en farve ved at fortælle skærmen nøjagtigt, hvor meget rødt, grønt og blåt lys der skal udsende. Hver kanal er repræsenteret af et heltal fra 0 (fra) til 255 (maksimal intensitet).

For eksempel er ren rød rgb(255, 0, 0). Ren hvid er rgb(255, 255, 255).

Bedst til: Billedredigering (Photoshop) og digital fotografering. Det manipulerer direkte hardwarepixels.

2. HEX (hexadecimal)

HEX-koder, som #FF5733, er nøjagtig det samme som RGB. Den eneste forskel er matematikken. I stedet for at bruge base-10-tal (0-255), bruger den base-16 hexadecimale tal (00 til FF). De første to bogstaver dikterer rød, de midterste to grønne og de sidste to blå.

Hvorfor bruger webudviklere HEX? Fordi den er kortere. At skrive #FFF er meget hurtigere for en CSS-udvikler end at skrive rgb(255, 255, 255).

Bedst til: Hardkodning af mærkefarver i CSS. Det er kortfattet og nemt at kopiere ind mellem designværktøjer som Figma og kodeeditorer.

3. HSL (Hue, Saturation, Lightness)

RGB og HEX er forfærdelige for mennesker. Hvis jeg viser dig koden #4A90E2, kan du ikke nemt gætte, hvilken farve det er. Hvis jeg beder dig om at "gøre den blå 20% mørkere", er det næsten umuligt at lave matematikken i HEX.

HSL er designet til menneskelige hjerner. Det definerer farve på tværs af et 360-graders farvehjul.

• Nuance (0-360): Den faktiske farve. 0 er rød, 120 er grøn, 240 er blå.
• Mætning (0-100%): Hvor intens farven er. 0% er grå, 100% er levende.
• Lysstyrke (0-100%): Hvor mørkt eller lyst det er. 0% er sort, 100% er hvid.

Hvis din brandblå er hsl(210, 100%, 50%), og du vil have en mørkere nuance til en effekt på knappen, skal du blot ændre det sidste tal: hsl(210, 100%, 40%). Det er magi for CSS-arkitektur.

4. CMYK (cyan, magenta, gul, nøgle/sort)

CMYK er udelukkende til den fysiske verden. Det dikterer, hvordan en printer blander fysisk blæk. Fordi blæk absorberer lys, er farverummet fysisk mindre end RGB. Der er levende neongrønt, som en skærm kan udsende (i RGB), som en printer fysisk ikke kan udskrive (i CMYK).

Den gyldne regel: Send aldrig en RGB-fil til en kommerciel printer. Printeren vil kraftigt konvertere den til CMYK, hvilket resulterer i, at dine livlige farver ser mudrede og udvaskede ud. Konverter altid dine designs til CMYK, før du sender dem til trykkeriet.

Sammenligningsmatrix

Format	Environment	Readability	Primary Use Case
HEX	Digital	Low	Standard web design, copying from Figma
RGB	Digital	Medium	Manipulating alpha transparency (rgba)
HSL	Digital	High	Dynamic CSS theming, Dark Modes
CMYK	Physical Print	N/A	Business cards, flyers, packaging

Ofte stillede spørgsmål (FAQ)