HEX, RGB, HSL och CMYK – fyra sätt att beskriva samma sak: en färg. De dyker upp överallt i design och webb, men vad betyder de egentligen och när använder du vilket? Här reder vi ut skillnaderna på svenska, utan krångel, så att du vet vilket format du ska välja för just ditt projekt.
Samma färg, olika språk
Tänk på formaten som olika språk för att uttrycka en och samma färg. En
klarblå ton kan skrivas som #3498DB i HEX, som
rgb(52, 152, 219) i RGB eller som hsl(204, 70%, 53%)
i HSL – det är exakt samma färg på din skärm. Skillnaden ligger i hur de
är uppbyggda och vad de är bra på.
RGB – ljusets byggstenar
RGB står för rött, grönt och blått. Alla skärmar bygger upp färg genom att blanda dessa tre ljus, var och en från 0 till 255. Noll av allt ger svart, max av allt ger vitt. RGB är additivt: ju mer ljus du lägger till, desto ljusare blir resultatet. Det är det naturliga formatet för allt som visas på en skärm, och det du oftast möter i bildredigering.
HEX – webbens standard
HEX är egentligen bara RGB skrivet på ett kompaktare sätt. De sex tecknen
i #3498DB är tre par – ett för rött, ett för grönt och ett
för blått – fast i det hexadecimala talsystemet (0–9 och A–F). Varje par
motsvarar alltså ett värde mellan 0 och 255. HEX är standarden i CSS och
webbdesign eftersom det är kort och enkelt att kopiera. Vill du växla
mellan formaten är vår HEX till RGB-konverterare
gjord just för det.
HSL – gjort för människor
HSL står för nyans (hue), mättnad (saturation) och ljushet (lightness). Istället för att blanda ljus beskriver du färgen som vi faktiskt tänker på den: vilken färg (nyans, 0–360 grader runt färgcirkeln), hur klar den är (mättnad) och hur ljus den är. Det gör HSL överlägset när du vill justera en färg – dra upp ljusheten för en ljusare variant, eller sänk mättnaden för en dovare ton, utan att tappa själva färgtonen. Vill du förstå nyansernas relationer bättre kan du utforska dem i vårt färghjul.
CMYK – för tryck på papper
CMYK är helt annorlunda, för det är gjort för tryck och inte för skärmar. Bokstäverna står för cyan, magenta, gult (yellow) och svart (key). Till skillnad från RGB är CMYK subtraktivt: du börjar med ett vitt papper och lägger på färg som absorberar ljus. Ju mer färg, desto mörkare. Ska något tryckas – visitkort, affischer, förpackningar – är det CMYK-värden tryckeriet vill ha. Tänk på att skärmens klaraste färger ibland inte går att återge exakt i tryck.
Vilket ska du använda?
- Webb och CSS: HEX eller RGB – båda fungerar överallt.
- Justera och finslipa en färg: HSL, tack vare de intuitiva reglagen.
- Transparens: RGBA eller HSLA, som lägger till ett alfavärde.
- Tryck: CMYK, alltid i dialog med tryckeriet.
Konvertera enkelt
Det fina är att du sällan behöver välja ett format för alltid. Med rätt verktyg växlar du mellan dem på ett ögonblick. Vår färgpalett visar alla format sida vid sida, och på startsidan hittar du en färgväljare som ger dig HEX, RGB, HSL och CMYK samtidigt. Letar du efter en specifik namngiven färg finns hela listan med HTML-färgnamn med sina koder. Och vill du förstå varför färgerna beter sig som de gör bakom kulisserna rekommenderar vi vår guide till färgteori.
Kort sagt: RGB och HEX för skärmen, HSL när du vill finjustera och CMYK för tryck. Samma färg – bara olika sätt att skriva ner den.