Konverter HEX til RGB

Hvad er en HEX-farvekode, og hvordan læses den?

En HEX-farvekode er en kompakt måde at repræsentere en farve på ved hjælp af seks hexadecimaltegn (base-16) – eller tre tegn i en forkortet version. Formatet #RRGGBB indeholder tre kanaler: rød (RR), grøn (GG) og blå (BB). Hver kanal går fra 00 til FF i hex, hvilket svarer til decimaltallene 0 til 255. Når du indtaster #4f46e5 eller #abc på denne side, konverteres hex-koden direkte til de tre RGB-tal, som skærme og grafiksoftware bruger til at blande lys.

Det, der adskiller denne side fra andre farvekonvertere, er præcisionen og de specifikke regler for HEX-konvertering. Mens mange værktøjer accepterer ottecifrede hex-koder eller udfører afrunding, arbejder denne side udelukkende med seks- eller trecifrede koder og returnerer eksakte heltal. #-præfikset er valgfrit – #4f46e5 og 4f46e5 behandles ens. Resultatet er en integer i intervallet 0–255 for hver kanal, uden nogen form for afrunding, fordi konverteringen fra base-16 til base-10 er deterministisk og reversibel.

Sådan konverteres HEX til RGB – matematikken bag

Konverteringen følger en fast matematisk procedure. Hvert hex-par (RR, GG, BB) omregnes separat. Hex-systemet bruger cifrene 0–9 og bogstaverne A–F, hvor A = 10, B = 11, C = 12, D = 13, E = 14 og F = 15. For at konvertere et hex-par som 4f ganges det første ciffer med 16, og det andet ciffer lægges til: 4 × 16 + 15 = 64 + 15 = 79. Hvis hex-tallet er FF, bliver det 15 × 16 + 15 = 255. Hvis det er 00, bliver det 0.

For #4f46e5 ser konverteringen sådan ud:

• Rød: 4f → 4 × 16 + 15 = 79
• Grøn: 46 → 4 × 16 + 6 = 70
• Blå: e5 → 14 × 16 + 5 = 229

Resultatet er RGB(79, 70, 229). Hver værdi er et heltal mellem 0 og 255, fordi hver hex-kanal netop dækker de 256 mulige niveauer i en 8-bit farvekanal.

Her er et tabel over grundlæggende konverteringer, som ofte bruges i praksis:

Trecifret shorthand: Hvordan #abc bliver til #aabbcc

Tre-cifrede hex-koder som #abc bruges ofte i CSS og designværktøjer som en kompakt form for farver med gentagne cifre. Shorthand-reglen er enkel: Hvert ciffer fordobles. #abc bliver #aabbcc. Konverteringen udføres derefter på det udvidede sekscifrede tal.

Eksempel: #abc →

• Rød: aa → A = 10 → 10 × 16 + 10 = 170
• Grøn: bb → B = 11 → 11 × 16 + 11 = 187
• Blå: cc → C = 12 → 12 × 16 + 12 = 204

Resultat: RGB(170, 187, 204). Denne udvidelsesmekanisme er standard i CSS og anvendes automatisk af værktøjet. Siden accepterer både #abc og abc som gyldige input.

Hvorfor findes der overhovedet en shorthand? I den tidlige webudvikling sparede trecifrede koder plads i CSS-filer, og de svarer til farver, der i virkeligheden har identiske kanalværdier – som #f00 for rød, #0f0 for grøn og #fff for hvid. Det er en praktisk forkortelse, men det er vigtigt at huske, at den kun virker, når hver kanal består af to ens cifre. En kode som #1a2 er ugyldig og vil udløse en fejlmeddelelse.

Håndtering af ugyldige input og kanttilfælde

Hvis du indtaster et format, der ikke er genkendeligt som en gyldig seks- eller trecifret hex-kode, viser værktøjet fejlmeddelelsen:
"Indtast en hex-farve som #4f46e5 eller #abc."

Dette dækker over flere situationer:

• Ottecifrede hex-koder (f.eks. #4f46e5ff med alfa-kanal) accepteres ikke. Siden forventer udelukkende sekscifrede (#RRGGBB) eller trecifrede (#RGB) koder.
• Bogstaver uden for A–F, som #GGH eller #12Z, betragtes som ugyldige.
• Fire eller fem cifre giver heller ikke mening – værktøjet kræver enten tre eller seks cifre (plus eventuelt #).
• Indtastning af tal alene, f.eks. 123456, accepteres kun, hvis de kan tolkes som en hex-kode. Du skal ikke skrive et decimaltal som 255 0 0 – det er en anden konvertering.

Når du redigerer et felt (f.eks. RGB-feltet) på denne side, opdateres alle andre farvefelter øjeblikkeligt. Det sker uden nogen forsinkelse og uden at dataene forlader din browser. Intet uploades, og intet gemmes – konverteringen udføres lokalt.

HEX, RGB og den additive farvemodel

RGB står for rød, grøn og blå, de primære farver i additive farveblanding. En skærm består af millioner af små lyspunkter (pixels), som hver kan afgive lys i disse tre farver med varierende intensitet. Når alle tre kanaler er på 0 (sort), er pixel slukket. Når alle er på 255 (hvid), er pixel maksimalt oplyst.

HEX-koder er i virkeligheden kun en maskinlæsbar forkortelse for de samme tre tal. Hvorfor bruges HEX så meget i CSS? Fordi formatet er kompakt: I stedet for rgb(255, 102, 0) skriver du #ff6600. I de tidlige dage af webudvikling sparede det plads i båndbredde og kildekode, og det blev standarden i de fleste designværktøjer og farvevælgere.

I moderne CSS kan du frit vælge mellem color: #ff6600 og color: rgb(255,102,0). De er semantisk identiske, og browseren fortolker dem på samme måde. Forskellen er rent syntaktisk. Når du arbejder med JavaScript, canvas API eller biblioteker som D3.js, kræver mange funktioner RGB-arrays (f.eks. ``), og derfor er konverteringen nødvendig.

Praktisk anvendelse og almindelige fejl

Frontend-udviklere støder ofte på situationer, hvor de har en HEX-værdi fra en designmockup og skal bruge den i en canvas-kontekst, en farveberegning eller en WCAG-kontrastudregning. Her er RGB-værdier nødvendige, fordi kontrastformler (som dem i WCAG 2.1) arbejder med lineære RGB-værdier, der udledes af kanalernes 0–255 tal.

Typiske fejl omfatter:

• At antage, at en ottecifret HEX-kode kan konverteres på samme måde.
• At glemme at udvide trecifret shorthand før omregning.
• At tro, at alpha-værdier indgår – denne side håndterer kun fuld dækning.
• At forveksle HEX- og HSL-format, som er en helt anden repræsentation.

For designere, der modtager branding-vejledninger i HEX og skal taste dem ind i software med RGB-skyder, er værktøjet et tidsbesparende og fejlreducerende mellemled. Studerende, der lærer farveteori, kan bruge konverteringen til at se, hvordan hex-cifrene direkte afspejler kanalernes styrke.

---

Ofte stillede spørgsmål

Hvad betyder # i en hex-farve?
#-tegnet er en konvention, der signalerer, at der følger en hex-farvekode. I CSS er det påkrævet, men i dette værktøj er det valgfrit. Begge indtastninger – #4f46e5 og 4f46e5 – fungerer.

Hvorfor kan jeg ikke bruge en 8-cifret HEX-kode (med alpha) her?
Siden er designet til at konvertere seks- eller trecifrede koder alene for at holde konverteringen ren og forudsigelig. Alpha-værdier kræver en separat konvertering og er ikke nødvendige for almindelige RGB-brug.

Hvordan udvider jeg en trecifret kode manuelt?
Du fordobler hvert ciffer. #f00 bliver #ff0000, #abc bliver #aabbcc, #123 bliver #112233. Værktøjet gør dette automatisk.

Hvorfor er RGB-værdierne altid heltal mellem 0 og 255?
Fordi hex-koden repræsenterer otte bit per kanal. Otte bit giver 256 mulige værdier (0–255), og konverteringen er en direkte base-16 til base-10 omregning uden nogen mulighed for decimaler eller afrunding.

Hvad sker der, hvis jeg indtaster ugyldige tegn som ‘G’ eller ‘Z’?
Værktøjet viser fejlmeddelelsen om at indtaste en gyldig hex-farve. Bogstaverne A–F er de eneste, der er gyldige ud over cifrene 0–9.

Kan jeg bruge hex-farver med mellemrum eller kommaer?
Nej. HEX-koder skrives som en sammenhængende streng af tegn uden mellemrum eller tegnsætning. #4f 46 e5 eller 4f,46,e5 er ugyldige input.