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

Om du någonsin har försökt designa en webbplats, skapa en logotyp eller skriva ut ett visitkort, har du omedelbart kraschat in i den förvirrande alfabetssoppan av färgkoder: HEX, RGB, HSL och CMYK. Varför finns det så många sätt att beskriva en enkel nyans av blått?

Sanningen är att datorer och skrivare "ser" ljus på fundamentalt olika sätt. Dessutom är hur datorer bearbetar ljus inte nödvändigtvis hur den mänskliga hjärnan tolkar färg. Att förstå dessa format är inte bara teori – det kommer att rädda dig från att distribuera webbplatser med otillgängliga kontrastförhållanden, eller att betala tusentals dollar för marknadsföringsflygblad som skrivs ut som ser leriga och mörka ut.

Additiv vs subtraktivt ljus

Innan vi dyker in i koden måste vi fastställa den fysiska skillnaden mellan skärmar och papper.

• Skärmar avger ljus (additiv). Om du stänger av alla pixlar är skärmen svart. För att göra vitt avfyrar en skärm rött, grönt och blått ljus med maximal intensitet.
• Papper reflekterar ljus (subtraktivt). Ett tomt papper är redan vitt (det reflekterar allt ljus). För att göra svart, lägger en skrivare cyan, magenta och gult bläck ovanpå varandra för att absorbera allt ljus.

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

RGB är modersmålet för din datorskärm. Den definierar en färg genom att tala om för skärmen exakt hur mycket rött, grönt och blått ljus som ska avge. Varje kanal representeras av ett heltal från 0 (av) till 255 (maximal intensitet).

Till exempel är rent rött rgb(255, 0, 0). Rent vitt är rgb(255, 255, 255).

Bäst för: Bildredigering (Photoshop) och digital fotografering. Den manipulerar direkt hårdvarupixlar.

2. HEX (hexadecimal)

HEX-koder, som #FF5733, är exakt samma sak som RGB. Den enda skillnaden är matematiken. Istället för att använda bas-10-tal (0-255), använder den bas-16 hexadecimala tal (00 till FF). De två första bokstäverna dikterar rött, de mittersta två gröna och de två sista blå.

Varför använder webbutvecklare HEX? För det är kortare. Att skriva #FFF är mycket snabbare för en CSS-utvecklare än att skriva rgb(255, 255, 255).

Bäst för: Hårdkodning av varumärkesfärger i CSS. Det är kortfattat och enkelt att kopiera in mellan designverktyg som Figma och kodredigerare.

3. HSL (Hue, Saturation, Lightness)

RGB och HEX är hemska för människor. Om jag visar dig koden #4A90E2 kan du inte enkelt gissa vilken färg det är. Om jag ber dig att "göra den blåa 20% mörkare", är det nästan omöjligt att räkna ut i HEX.

HSL designades för mänskliga hjärnor. Den definierar färg över ett 360-graders färghjul.

• Hue (0-360): Den faktiska färgen. 0 är röd, 120 är grön, 240 är blå.
• Mättnad (0-100%): Hur intensiv färgen är. 0 % är grått, 100 % är levande.
• Ljusstyrka (0-100%): Hur mörkt eller ljust det är. 0% är svart, 100% är vit.

Om ditt märkesblå är hsl(210, 100%, 50%) och du vill ha en mörkare nyans för en knappsvävningseffekt, ändrar du helt enkelt den sista siffran: hsl(210, 100%, 40%). Det är magiskt för CSS-arkitektur.

4. CMYK (cyan, magenta, gul, nyckel/svart)

CMYK är enbart för den fysiska världen. Det dikterar hur en skrivare blandar fysiskt bläck. Eftersom bläck absorberar ljus är färgrymden fysiskt mindre än RGB. Det finns livfulla neongrönt som en skärm kan avge (i RGB) som en skrivare fysiskt inte kan skriva ut (i CMYK).

Den gyllene regeln: Skicka aldrig en RGB-fil till en kommersiell tryckare. Skrivaren konverterar den med kraft till CMYK, vilket resulterar i att dina livfulla färger ser leriga och urtvättade ut. Konvertera alltid dina mönster till CMYK innan du skickar dem till tryckeriet.

Jämförelsematris

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

Vanliga frågor (FAQ)