RGB er ikke nok: HSL, CMYK og OKLCH – farvenotationer forklaret

I det forrige indlæg, Sådan laver computere farver: RGB, HEX og det binære system, så vi, at en farve blot er tre tal — rød, grøn, blå, hver fra 0–255. Skærme håndterer det fint. Men i det øjeblik et menneske begynder at arbejde med farve, bliver RGB hurtigt besværligt.

RGB er praktisk, men ikke intuitivt

“Lidt lysere rød.” Hvordan laver man det i RGB? Du skal øge alle tre kanaler lidt på én gang. “Sænk kun mætningen lidt” — det er umuligt at se ud fra RGB alene, hvad der skal ændres. “Brug den samme tone på papir” — det kan RGB slet ikke.

Andre farvenotationer opstod for at løse disse problemer.

HSL — den menneskelige måde at tænke farver på

HSL opdeler farver i farvetone · mætning · lyshed. hsl(14, 100%, 60%) er den samme farve som #FF5733, men det er tydeligt, hvad der styrer hvad.

Hvis RGB er computerens sprog, er HSL designerens sprog. Du kan arbejde med farver ud fra, hvad du ønsker at ændre.

Hue — farvetonen er en cirkel på 360°

Farvetonen løber en hel omgang som et ur — fra 0° til 360°. 0° og 360° er den samme rød.

Saturation — mætning er farvens intensitet

Selv med samme farvetone gør lavere mætning farven mere grå.

Lightness — lyshed fra sort til hvid

L på 0% er altid sort, 100% er altid hvid. 50% er farvens “naturlige” lysstyrke.

Det virkelige potentiale i HSL — byg en palette

Hold farvetonen (Hue) fast og skift kun L, så får du et naturligt koordineret sæt farver. Det samme i RGB kræver, at du beregner ni felter manuelt. I HSL er det bare at gå fra L 12% til L 92% i trin.

Begge paletter kan laves på én linje.

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

Det er her, HSL virkelig gør en forskel, når du bygger et designsystem.

CMYK — trykfarvernes sprog

Skal du farve papir i stedet for skærm, kræver det et helt andet system. CMYK er de fire trykfarvers blandingsforhold, som trykkere bruger.

Hvorfor hedder sort “K” og ikke “B”? Fordi B ville forveksles med Blue. Og “K” stammer fra trykbegrebet “key plate” — den plade de andre farver justeres i forhold til.

Lys bliver lysere ved tilsætning; trykfarve mørkere

Den største forskel mellem RGB og CMYK er blandingsprincippet.

Rød trykfarve ser rød ud, fordi den absorberer alt andet lys og kun reflekterer rødt. Trykfarver subtraherer lys. Jo mere du blander, jo mørkere bliver resultatet. I teorien burde CMY tilsammen give sort — i praksis bliver det en snavset brun. Derfor har man en separat sort blæk (K).

Hvornår bruger man CMYK?

Arbejder du med skærmdesign, møder du sjældent CMYK. Det dukker kun op, når noget skal trykkes.

• Når du sender filer til trykkeriet — visitkort, plakater, bøger, emballage. Trykkeren konverterer RGB-filer til CMYK.
• Trykt arbejde i Photoshop / Illustrator — start med CMYK-farvetilstand fra begyndelsen.
• Brand guidelines — angiv både HEX til skærm og CMYK til tryk. Brandet skal se ens ud i begge medier.

Hvorfor skærm- og trykfarver er forskellige — Gamut

Farveskalaen, en skærm kan vise (RGB gamut), og den, trykfarver kan producere (CMYK gamut), overlapper ikke fuldstændigt. En skærps neonpink kan ikke gengives i tryk — trykfarver kan simpelthen ikke producere den farve.

Printdesignere vælger derfor kun farver inden for CMYK-gamut, inden de begynder. RGB-designs, der trykkes direkte, ser ofte flade og afdæmpede ud.

Sådan skrives CMYK-værdier

Du angiver, hvor mange procent af hver trykfarve der bruges. 0% = ingen, 100% = fuld dækning.

Kun K 100% giver en grå-agtig, mat sort. Trykkere lægger CMY ovenpå for at opnå en dybere, rigere sort.

OKLCH — menneskelige koordinater

En farvemodel der er dukket op for alvor i 2020’erne. Nøgleordet er ét: “naturligt for det menneskelige øje.”

De tre koordinater ligner HSL i navnene.

• L — Lightness (lyshed, 0–1)
• C — Chroma (mætning, 0–ca. 0,4)
• H — Hue (farvetone, 0–360°)

Men HSL har et skjult problem. Selv med den samme L = 50% opleves den faktiske lyshed meget forskelligt fra farve til farve. Se sammenligningen herunder.

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

L · C · H — hvad gør hver enkelt?

Se, hvad der sker, når du kun ændrer én koordinat ad gangen.

Hvornår bruges OKLCH?

• Ensartet lyshed på tværs af en palette — alle 8 kategoriformer skal se lige lyse ud
• Automatisk mørk/lys tilstand — invert L-værdien, og du får et naturligt mørkt tema
• Tilgængelighed — nøjagtig forudsigelse af kontrastforhold mellem tekst og baggrund
• Gradienter — ingen gråt “dødspunkt” midt i overgangen

OKLCH er officielt en del af CSS Color Level 4 og virker direkte i moderne browsere.

.btn { background: oklch(67% 0.18 30); }       /* orange */
.btn:hover { background: oklch(60% 0.18 30); } /* L sænket med 7 → præcis så meget mørkere */

Hvornår bruger du hvad?

RGB/HEX er nok til det meste digitale arbejde. HSL er nyttig, når du bygger paletter, og OKLCH er en stor hjælp ved mørk/lys-mode design.

Sådan håndterer fns farver

Når du ved, at farve er tal, er næste skridt at have dine hyppigt brugte farver ved hånden. fns samler det at fange, gemme og genbruge farver bag én tast.

Hent en farve fra skærmen med Eyedropper — ⌘+Shift+K

Eyedropper fanger den præcise farve fra ethvert pixel på skærmen. Det er som at tage Figma/Photoshops farvevælger og gøre den tilgængelig i hele systemet.

Tryk ⌘+Shift+K fra et vilkårligt sted, og fns’ Eyedropper åbner. Ét enkelt pixel i et designdokument, et bestemt område i et foto, baggrundsfarven i en anden app — flyt musen derhen og klik for at fange den præcise farve.

• Farven kopieres automatisk til udklipsholderen ved hvert klik. Ingen separat “kopier”-handling nødvendig.
• I Eyedropper-widgetten vælger du, om farven skal kopieres som RGB, HEX, HSL, CMYK eller OKLCH.
• Du ser en visuel forhåndsvisning af den fangede farve samt nærliggende systemfarver.

Eyedropper → automatisk til udklipsholder → hent igen fra udklipsholderens vælger — flowet afbrydes aldrig. Du behøver ikke at åbne Macs Digitale Farvemåler separat eller trykke Kopier manuelt hver gang.

Udklipsholderen genkender farver automatisk

fns’ udklipsholderhistorik registrerer automatisk, om kopieret tekst er en farvekode — uanset format.

Når du henter en kopieret farve fra historikken, er det svært at huske, hvilken farve det var, hvis du kun ser teksten. fns viser et lille farveeksempel ved siden af hvert element, så du med det samme kan se, hvad det er.

Filtrer til kun farver

Med ét tryk kan du filtrere udklipsholderhistorikken til kun at vise farvekoder. Midt i designarbejdet, når du vil finde de senest brugte farver, behøver du ikke grave igennem tekst, URL’er og kode.

• Brug filterordet color: i den samme vælger → kun farveelementer vises
• Søg på farvenavn — “blue”, “red” filtrerer til de tilhørende nuancer
• Lignende farver grupperes visuelt

Konverter én farve til et andet format

Du kan konvertere og hente en farve i et andet format. Kopierede du #FF5733 fra Figma og vil indsætte det som rgb(...) i CSS, skal du blot vælge det element i fns’ udklipsholdervælger og trykke én genvej.

Du behøver ikke åbne en konverter, hver gang du skifter mellem Figma (HSB) og CSS (HSL/HEX/OKLCH).

Tekstudvidelse og genveje

Registrer dine hyppige brandfarver som tekstgenveje.

Den samme genvej virker overalt — i CSS, Figmas farveindtastning, Slack-beskeder og kodeeditorer. Du behøver aldrig søge efter og kopiere brandets farver igen.

Prøv at spare den tid, du bruger på at åbne konvertere og flytte farvekoder mellem formater, med fns.

Nysgerrig på, hvad disse tal egentlig stammer fra — grundlaget for RGB’s tre kanaler, binære tal og HEX-notation? Start med Sådan laver computere farver: RGB, HEX og det binære system.