RGB räcker inte: HSL, CMYK och OKLCH – färgnotationer förklarade

I det föregående inlägget, Hur datorer skapar färger: RGB, HEX och binära tal, såg vi att en färg bara är tre tal — rött, grönt, blått, var och ett 0–255. Skärmar hanterar det utmärkt. Men i det ögonblick en människa börjar arbeta med färg blir RGB snabbt besvärligt.

RGB är praktiskt, men inte intuitivt

“Lite ljusare rött.” Hur gör du det i RGB? Du måste justera alla tre kanaler lite grann. “Sänk bara mättnaden” — i RGB vet du inte vilken kanal du ska röra. “Skriv ut det här i samma ton” — RGB klarar inte det alls.

Alternativa färgnotationer uppstod för att lösa de här problemen.

HSL — hur människor tänker på färg

HSL delar upp färg i nyans · mättnad · ljushet. hsl(14, 100%, 60%) är samma färg som #FF5733, men det är tydligt vad som är vad.

Om RGB är datorns språk är HSL designerns språk. Du kan arbeta med samma färg utifrån vad du vill förändra.

Hue — nyansen är en cirkel med 360°

Nyansen löper som ett ur runt ett varv — från 0° till 360°. 0° och 360° är båda rött.

Saturation — mättnaden bestämmer intensiteten

Samma nyans med lägre mättnad rör sig mot grå.

Lightness — ljusheten går från svart till vitt

L vid 0% är alltid svart, vid 100% alltid vitt. 50% är färgens “naturliga” ljushet.

HSL:s verkliga styrka — skapa paletter

Håll nyansen (Hue) konstant och ändra bara L, så får du en naturligt harmonisk färgfamilj. I RGB måste du beräkna alla 9 rutor för hand — i HSL är det bara att stega L från 12% till 92%.

Båda paletter ovan kan skapas med en enda rad kod.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... bara ändra L med 10 åt gången */
}

Det är här HSL verkligen lyser i design systems.

CMYK — bläckets språk

Ska du sätta färg på papper snarare än en skärm behöver du ett helt annat system. CMYK är proportionerna för de fyra bläck som tryckerier använder.

Varför kallas svart “K” och inte “B”? B förväxlas lätt med Blue. Det kommer dessutom från tryckeriuttrycket “key plate” — den platta som de övriga bläcken justeras mot.

Ljus adderas, bläck subtraheras

Den viktigaste skillnaden mellan RGB och CMYK är hur de blandas.

Rött bläck ser rött ut för att det absorberar andra ljusvåglängder och reflekterar tillbaka bara rött. Bläck tar bort ljus. Blandar du mer bläck blir det mörkare. I teorin skulle CMY tillsammans ge svart, men i praktiken ger det en grumlig brun. Därför finns ett separat svart bläck (K).

Var används CMYK?

Om du arbetar med skärmdesign kommer du sällan i kontakt med CMYK. Det dyker upp när du ska trycka på papper.

• När du skickar filer till tryckeriet — visitkort, affischer, böcker, förpackningar. Tryckerier konverterar RGB-filer till CMYK.
• Tryckarbeten i Photoshop / Illustrator — börja med färgläget inställt på CMYK.
• Varumärkesguider — noter både HEX (skärm) och CMYK (tryck). Samma varumärkesfärg ska se likadan ut i båda medierna.

Varför skärm- och tryckt färg ser olika ut — Gamut

Färgrymden som en skärm kan återge (RGB-gamut) och den ett tryckeri kan reproducera (CMYK-gamut) är inte identiska. En lysande neonrosa på skärm kan inte återskapas i tryck — det finns inget bläck för den.

Därför väljer tryckdesigners bara färger inom CMYK-gamut innan de börjar. Direktöverföring av en RGB-design till tryck ger ofta bleka, livlösa färger.

Så skriver du CMYK-värden

Varje bläck anges i procent — hur mycket som läggs på. 0% = inget bläck, 100% = fullt.

Bara K 100% ger ett grumligt, gråaktigt svart. Tryckerier lägger därför till CMY för ett djupare svart.

OKLCH — människans koordinater

Den här färgmodellen slog igenom på allvar på 2020-talet. Nyckelordet är ett enda — “naturligt för det mänskliga ögat.”

De tre koordinaterna liknar HSL:s namn:

• L — Lightness (ljushet, 0–1)
• C — Chroma (mättnad, 0–ca 0,4)
• H — Hue (nyans, 0–360°)

Men HSL har ett dolt problem. Samma L = 50% upplevs som helt olika ljushet beroende på färg. Jämför direkt.

Sammanfattat på en rad — RGB och HSL är maskinens koordinater. OKLCH är människans koordinater.

L · C · H, var och ens roll

Här är vad som händer om du ändrar bara en koordinat i taget för samma färg.

Var används det?

• Paletter med jämn ljushet — när du vill ha 8 kategorifärger med exakt samma upplevda ljushet
• Automatisk mörkt/ljust läge — invertera L-värdet för ett naturligt mörkt tema
• Tillgänglighet — förutsäga exakt ljushetskontrasten mellan text och bakgrund
• Gradienter — mjuka övergångar utan grå band i mitten

OKLCH är officiellt antaget i CSS Color Level 4 och kan användas direkt i moderna webbläsare.

.btn { background: oklch(67% 0.18 30); }       /* orange */
.btn:hover { background: oklch(60% 0.18 30); } /* bara L sänkt med 7 → exakt mörkare */

Vad ska du använda när?

För de flesta digitala arbeten räcker RGB/HEX. HSL är värt att ha i minnet när du skapar paletter, och OKLCH är ett stort hjälpmedel för mörkt/ljust läge-design.

Hantera färger med fns

Nu när du vet att färg är siffror är nästa steg att ha de färger du använder ofta portabelt tillgängliga. fns samlar hämta, spara och återanvända färger bakom en enda tangent.

Eyedropper — plocka färg var som helst på skärmen — ⌘+Shift+K

Eyedropper plockar exakt den färg som finns i vilken pixel som helst på skärmen. Det är som att ta ut färgväljaren i Figma eller Photoshop och göra den tillgänglig för hela systemet.

Tryck ⌘+Shift+K var som helst och fns Eyedropper visas. En pixel i en designskiss, ett område i ett foto, bakgrundsfärgen i en annan app — håll muspekaren över det och klicka, så fångas exakt den färgen.

• Varje klick sparar automatiskt till urklipp. Ingen separat “kopiera”-åtgärd behövs.
• I Eyedropper-widgeten väljer du vilket format som sparas till urklipp: RGB / HEX / HSL / CMYK / OKLCH.
• Du ser en visuell förhandsgranskning av den hämtade färgen samt närmaste systemfärger.

Eyedropper → automatiskt urklipp → hämta igen från urklippsväljaren — flödet bryts aldrig. Ingen separat Digital Color Meter att öppna, inga manuella kopieringsgenvägar varje gång.

Urklipp känner igen färgkoder automatiskt

fns urklippshistorik identifierar automatiskt kopierad text som är en färgkod. Formatet spelar ingen roll.

När du hämtar en kopierad färg från historiken är det svårt att komma ihåg vilken färg det var bara från texten. fns visar ett litet färgchip bredvid varje post så du ser direkt vad det är.

Filtrera och visa bara färger

En knapptryckning filtrerar urklippshistoriken för att visa bara färgkoder. När du arbetar med design och vill se de senaste färgerna du använde slipper du leta igenom text, URL:er och kod.

• Skriv filterordet color: i samma väljare → bara färgposter visas
• Sök efter färgnamn — “blue”, “red” visar bara poster i den färgfamiljen
• Liknande färger grupperas visuellt

Konvertera en färg till ett annat format

Du kan konvertera en färg till en annan notation och klistra in den. Kopierade du #FF5733 från Figma men behöver rgb(...) i CSS — markera posten i fns urklippsväljare, tryck en genvägstangent och den konverteras automatiskt.

Inget behov av en separat konverterare när du rör dig mellan Figma (HSB) och CSS (HSL/HEX/OKLCH).

Textexpansion och genvägar

Registrera dina vanligaste varumärkesfärger som textgenvägar.

Samma genväg fungerar oavsett om du är i CSS-fältinmatning i Figma, Slack, kodredigeraren eller någon annanstans. Inget mer letande efter varumärkesfärger och kopiera varje gång.

Prova fns och slipp de ständiga rundturerna till konverteringsverktyg.

Undrar du var dessa tal egentligen kommer ifrån — grunderna i RGB:s tre kanaler, binära tal och HEX-notation? Börja med Hur datorer skapar färger: RGB, HEX och binära tal.