RGB er ikke nok: HSL, CMYK og OKLCH – fargenotasjoner forklart

I det forrige innlegget, Slik lager datamaskiner farger: RGB, HEX og det binære systemet, så vi at en farge bare er tre tall — rød, grønn, blå, hver fra 0–255. Skjermer håndterer det fint. Men i det øyeblikket et menneske begynner å jobbe med farge, blir RGB raskt upraktisk.

RGB er praktisk, men ikke intuitivt

“Litt lysere rød.” Hvordan lager man det i RGB? Du må øke alle tre kanaler litt samtidig. “Senk bare metningen litt” — det er umulig å se ut fra RGB alene hva som skal endres. “Bruk den samme tonen på papir” — det kan RGB rett og slett ikke.

Andre fargenotasjoner oppsto for å løse disse problemene.

HSL — den menneskelige måten å tenke farger på

HSL deler farger inn i fargetone · metning · lyshet. hsl(14, 100%, 60%) er den samme fargen som #FF5733, men det er tydelig hva som styrer hva.

Hvis RGB er maskinens språk, er HSL designerens språk. Du kan jobbe med farger ut fra hva du ønsker å endre.

Hue — fargetonen er en sirkel på 360°

Fargetonen går en hel runde som en klokke — fra 0° til 360°. 0° og 360° er den samme røde.

Saturation — metning er fargenes intensitet

Selv med samme fargetone gjør lavere metning fargen mer grå.

Lightness — lyshet fra svart til hvit

L på 0% er alltid svart, 100% er alltid hvit. 50% er fargens “naturlige” lysstyrke.

Det virkelige potensialet i HSL — bygg en palett

Hold fargetonen (Hue) fast og endre bare L, så får du et naturlig koordinert sett farger. Det samme i RGB krever at du beregner ni felter manuelt. I HSL er det bare å gå fra L 12% til L 92% i trinn.

Begge palettene kan lages på én linje.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... bare endre L med 10 om gangen */
}

Det er her HSL virkelig gjør en forskjell når du bygger et designsystem.

CMYK — trykkfargenes språk

Skal du farge papir i stedet for skjerm, krever det et helt annet system. CMYK er de fire trykkfargenes blandingsforhold, som trykkere bruker.

Hvorfor heter svart “K” og ikke “B”? Fordi B ville blandes med Blue. Og “K” stammer fra trykktermen “key plate” — den platen de andre fargene justeres i forhold til.

Lys blir lysere ved tilsetning; trykkfarge mørkere

Den største forskjellen mellom RGB og CMYK er blandingsprinsippet.

Rød trykkfarge ser rød ut fordi den absorberer alt annet lys og bare reflekterer rødt. Trykkfarger subtraherer lys. Jo mer du blander, jo mørkere blir resultatet. I teorien burde CMY til sammen gi svart — i praksis blir det en skitten brun. Derfor har man en separat svart blekk (K).

Når bruker man CMYK?

Jobber du med skjermdesign, møter du sjelden CMYK. Det dukker bare opp når noe skal trykkes.

• Når du sender filer til trykkeriet — visittkort, plakater, bøker, emballasje. Trykkeriet konverterer RGB-filer til CMYK.
• Trykt arbeid i Photoshop / Illustrator — start med CMYK-fargemodus fra starten.
• Brand guidelines — oppgi både HEX for skjerm og CMYK for trykk. Brandet skal se likt ut i begge medier.

Hvorfor skjerm- og trykk-farger er forskjellige — Gamut

Fargeomfanget en skjerm kan vise (RGB gamut), og det trykkfarger kan produsere (CMYK gamut), overlapper ikke fullstendig. En skarp neonfarge på skjermen kan ikke gjengis i trykk — trykkfarger kan rett og slett ikke produsere den fargen.

Printdesignere velger derfor bare farger innenfor CMYK-gamut før de begynner. RGB-design som trykkes direkte, ser ofte flate og avdempede ut.

Slik skrives CMYK-verdier

Du angir hvor mange prosent av hver trykkfarge som brukes. 0% = ingen, 100% = full dekning.

Bare K 100% gir en gråaktig, matt svart. Trykkere legger CMY oppå for å oppnå en dypere, rikere svart.

OKLCH — menneskelige koordinater

En fargemodell som har dukket opp for alvor i 2020-årene. Nøkkelordet er ett: “naturlig for det menneskelige øyet.”

De tre koordinatene ligner HSL i navnene.

• L — Lightness (lyshet, 0–1)
• C — Chroma (metning, 0–ca. 0,4)
• H — Hue (fargetone, 0–360°)

Men HSL har et skjult problem. Selv med den samme L = 50% oppleves den faktiske lysheten svært forskjellig fra farge til farge. Se sammenligningen nedenfor.

Kort sagt: RGB og HSL er maskinens koordinater. OKLCH er menneskets koordinater.

L · C · H — hva gjør hver enkelt?

Se hva som skjer når du bare endrer én koordinat om gangen.

Når brukes OKLCH?

• Ensartet lyshet på tvers av en palett — alle 8 kategoriformer skal se like lyse ut
• Automatisk mørk/lys modus — inverter L-verdien, og du får et naturlig mørkt tema
• Tilgjengelighet — nøyaktig prediksjon av kontrastforhold mellom tekst og bakgrunn
• Gradienter — ingen grå “dødssone” midt i overgangen

OKLCH er offisielt en del av CSS Color Level 4 og fungerer direkte i moderne nettlesere.

.btn { background: oklch(67% 0.18 30); }       /* oransje */
.btn:hover { background: oklch(60% 0.18 30); } /* L senket med 7 → akkurat så mye mørkere */

Når bruker du hva?

RGB/HEX holder til det meste av digitalt arbeid. HSL er nyttig når du bygger paletter, og OKLCH er til stor hjelp ved mørk/lys-modus-design.

Slik håndterer fns farger

Når du vet at farge er tall, er neste steg å ha de fargene du bruker ofte lett tilgjengelig. fns samler det å fange, lagre og gjenbruke farger bak én tast.

Hent en farge fra skjermen med Eyedropper — ⌘+Shift+K

Eyedropper fanger den nøyaktige fargen fra et hvilket som helst piksel på skjermen. Det er som å ta Figma/Photoshops fargevelger og gjøre den tilgjengelig i hele systemet.

Trykk ⌘+Shift+K fra et hvilket som helst sted, og fns’ Eyedropper åpner seg. Ett enkelt piksel i et designdokument, et bestemt område i et foto, bakgrunnsfargen i en annen app — flytt musen dit og klikk for å fange den nøyaktige fargen.

• Fargen kopieres automatisk til utklippstavlen ved hvert klikk. Ingen separat “kopier”-handling nødvendig.
• I Eyedropper-widgeten velger du om fargen skal kopieres som RGB, HEX, HSL, CMYK eller OKLCH.
• Du ser en visuell forhåndsvisning av den fangede fargen samt nærliggende systemfarger.

Eyedropper → automatisk til utklippstavlen → hent igjen fra utklippstavlens velger — flyten avbrytes aldri. Du trenger ikke å åpne Macs Digitale Fargmåler separat eller trykke Kopier manuelt hver gang.

Utklippstavlen gjenkjenner farger automatisk

fns’ utklippstavlehistorikk registrerer automatisk om kopiert tekst er en fargekode — uavhengig av format.

Når du henter en kopiert farge fra historikken, er det vanskelig å huske hvilken farge det var hvis du bare ser teksten. fns viser et lite fargeeksempel ved siden av hvert element, så du med det samme kan se hva det er.

Filtrer til bare farger

Med ett trykk kan du filtrere utklippstavlehistorikken til bare å vise fargekoder. Midt i designarbeidet, når du vil finne de sist brukte fargene, trenger du ikke grave gjennom tekst, URL-er og kode.

• Bruk filtreringsordet color: i den samme velgeren → bare fargeelementer vises
• Søk på fargenavn — “blue”, “red” filtrerer til de tilhørende nyansene
• Lignende farger grupperes visuelt

Konverter én farge til et annet format

Du kan konvertere og hente en farge i et annet format. Kopierte du #FF5733 fra Figma og vil lime det inn som rgb(...) i CSS, velger du bare det elementet i fns’ utklippstavlevelger og trykker én snarvei.

Du trenger ikke å åpne en konverter hver gang du bytter mellom Figma (HSB) og CSS (HSL/HEX/OKLCH).

Tekstutvidelse og snarveier

Registrer de hyppige brandfargene dine som tekstsnarveier.

Den samme snarveien fungerer overalt — i CSS, Figmas fargeinntasting, Slack-meldinger og kodeeditorer. Du trenger aldri å søke etter og kopiere brandets farger igjen.

Prøv å spare den tiden du bruker på å åpne konvertere og flytte fargekoder mellom formater, med fns.

Lurer du på hvor disse tallene egentlig kommer fra — grunnlaget for RGB’s tre kanaler, binærtall og HEX-notasjon? Start med Slik lager datamaskiner farger: RGB, HEX og det binære systemet.