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

Hvis du noen gang har prøvd å designe et nettsted, lage en logo eller skrive ut et visittkort, har du umiddelbart krasjet inn i den forvirrende alfabetsuppen med fargekoder: HEX, RGB, HSL og CMYK. Hvorfor er det så mange måter å beskrive en enkel nyanse av blått på?

Sannheten er at datamaskiner og skrivere "ser" lys på fundamentalt forskjellige måter. Videre er hvordan datamaskiner behandler lys ikke nødvendigvis hvordan den menneskelige hjernen tolker farger. Å forstå disse formatene er ikke bare teori – det vil spare deg fra å distribuere nettsteder med utilgjengelige kontrastforhold, eller betale tusenvis av dollar for markedsføringsflyer som skrives ut som gjørmete og mørke.

Additiv vs subtraktiv lys

Før vi dykker inn i koden, må vi fastslå den fysiske forskjellen mellom skjermer og papir.

• Skjermer sender ut lys (additiv). Hvis du slår av alle piksler, er skjermen svart. For å gjøre hvit, skyter en skjerm rødt, grønt og blått lys med maksimal intensitet.
• Papir reflekterer lys (subtraktivt). Et blankt stykke papir er allerede hvitt (det reflekterer alt lys). For å lage svart legger en skriver cyan, magenta og gul blekk oppå hverandre for å absorbere alt lyset.

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

RGB er morsmålet til dataskjermen. Den definerer en farge ved å fortelle skjermen nøyaktig hvor mye rødt, grønt og blått lys som skal sendes ut. Hver kanal er representert med et heltall fra 0 (av) til 255 (maksimal intensitet).

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

Best for: Bilderedigering (Photoshop) og digital fotografering. Den manipulerer maskinvarepiksler direkte.

2. HEX (heksadesimal)

HEX-koder, som #FF5733, er nøyaktig det samme som RGB. Den eneste forskjellen er matematikken. I stedet for å bruke base-10-tall (0-255), bruker den base-16 heksadesimale tall (00 til FF). De to første bokstavene dikterer rødt, de to midterste grønne og de to siste blå.

Hvorfor bruker nettutviklere HEX? Fordi den er kortere. Å skrive #FFF er mye raskere for en CSS-utvikler enn å skrive rgb(255, 255, 255).

Best for: Hardkoding av merkefarger i CSS. Den er kortfattet og kan enkelt kopieres inn mellom designverktøy som Figma og koderedigerere.

3. HSL (nyanse, metning, lyshet)

RGB og HEX er forferdelig for mennesker. Hvis jeg viser deg koden #4A90E2, kan du ikke enkelt gjette hvilken farge det er. Hvis jeg ber deg om å "gjøre den blå 20 % mørkere", er det nesten umulig å regne i HEX.

HSL ble designet for menneskelige hjerner. Den definerer farge over et 360-graders fargehjul.

• Farge (0–360): Den faktiske fargen. 0 er rød, 120 er grønn, 240 er blå.
• Metning (0-100%): Hvor intens fargen er. 0 % er grå, 100 % er levende.
• Lyshet (0–100 %): Hvor mørkt eller lyst det er. 0 % er svart, 100 % er hvit.

Hvis merkeblått ditt er hsl(210, 100%, 50%) og du vil ha en mørkere nyanse for en knappeeffekt, endrer du ganske enkelt det siste tallet: hsl(210, 100%, 40%). Det er magi for CSS-arkitektur.

4. CMYK (cyan, magenta, gul, nøkkel/svart)

CMYK er utelukkende for den fysiske verden. Det dikterer hvordan en skriver blander fysisk blekk. Fordi blekk absorberer lys, er fargerommet fysisk mindre enn RGB. Det er levende neongrønt som en skjerm kan sende ut (i RGB) som en skriver fysisk ikke kan skrive ut (i CMYK).

Den gylne regel: Send aldri en RGB-fil til en kommersiell trykkeri. Skriveren vil konvertere den kraftig til CMYK, noe som resulterer i at de levende fargene dine ser gjørmete og utvaskede ut. Konverter alltid designene dine til CMYK før du sender dem til trykkeriet.

Sammenligningsmatrise

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 stilte spørsmål (FAQ)