HEX till RGB Färgomvandlare

Vad är en HEX-färgkod?

En HEX-färgkod är en sexsiffrig alfanumerisk sträng som används inom webbdesign och digital grafik för att representera en specifik färg. Formatet följer mönstret #RRGGBB, där varje tvåsiffrig par kodar intensiteten hos en av de tre additiva primärfärgerna — röd (RR), grön (GG) och blå (BB) — med hexadecimal notation (bas 16). Varje par sträcker sig från 00 (noll intensitet) till FF (maximal intensitet, motsvarar 255 i decimal).

HEX-koder uppstod ur behovet av att definiera färger i HTML och CSS utan att förlita sig på namngivna färgnyckelord. Medan CSS nu stöder flera färgformat inklusive rgb(), hsl() och oklch(), är HEX fortfarande den mest använda notationen inom front-end-utveckling, designleveranser och varumärkesriktlinjer. Praktiskt taget varje färgväljare i verktyg som Figma, Sketch, Adobe Photoshop och Canva visar ett HEX-värde som standard.

Det totala antalet unika färger som kan representeras med sexsiffriga HEX-koder är 16 777 216 (256 × 256 × 256). Detta kallas ofta "True Color" eller "24-bitarsfärg", vilket matchar färgdjupet hos de flesta moderna skärmar. Varje kanal får 8 bitar (en byte), och tre kanaler tillsammans producerar 24 bitar färgdata.

HEX-koder är skiftlägesokänsliga, så #ff8000 och #FF8000 hänvisar till samma färg.

Hur man konverterar HEX till RGB steg för steg

Att konvertera en HEX-färgkod till sin RGB-motsvarighet är enkelt. Processen innebär att dela upp den sexsiffriga strängen i tre par och konvertera varje par från hexadecimalt (bas 16) till decimalt (bas 10). Här är steg-för-steg-metoden:

1. Ta bort hash-symbolen. Om HEX-koden börjar med #, ta bort den. Till exempel blir #1A2B3C → 1A2B3C.
2. Dela upp i tre par. Dela den återstående strängen i tre grupper om två tecken: 1A, 2B, 3C.
3. Konvertera varje par till decimal. Använd det hexadecimala platsvärdesystemet där den första siffran multipliceras med 16 och den andra siffran adderas:
   • Röd: 1A → (1 × 16) + 10 = 26
   • Grön: 2B → (2 × 16) + 11 = 43
   • Blå: 3C → (3 × 16) + 12 = 60
4. Skriv RGB-värdet. Kombinera de tre decimalvärdena: rgb(26, 43, 60).

De hexadecimala siffrorna och deras decimalekvivalenter är: 0=0, 1=1, ..., 9=9, A=10, B=11, C=12, D=13, E=14, F=15. Att memorera A till F är den enda delen som skiljer sig från standard decimalaritmetik.

För programmatisk konvertering erbjuder de flesta språk inbyggda funktioner. I JavaScript returnerar parseInt("1A", 16) värdet 26. I Python gör int("1A", 16) detsamma.

3-siffriga vs 6-siffriga HEX-koder

CSS stöder ett förkortningsformat med 3 siffror (#RGB) som en bekvämlighet när var och en av de tre paren består av identiska siffror. I denna förkortning expanderas varje enskild siffra genom att fördubblas. Till exempel:

• #F80 expanderas till #FF8800 → rgb(255, 136, 0)
• #FFF expanderas till #FFFFFF → rgb(255, 255, 255)
• #000 expanderas till #000000 → rgb(0, 0, 0)
• #09C expanderas till #0099CC → rgb(0, 153, 204)
• #A3F expanderas till #AA33FF → rgb(170, 51, 255)

3-siffrig notation minskar antalet tillgängliga färger från 16,7 miljoner till bara 4 096 (16 × 16 × 16). CSS stöder också 4-siffriga (#RGBA) och 8-siffriga (#RRGGBBAA) HEX-koder som inkluderar en alfakanal (genomskinlighet).

HEX till RGB-referenstabell

Nedan finns en referenstabell med vanliga HEX-färger och deras RGB-motsvarigheter:

Populära varumärkesfärger – HEX och RGB-värden

Utvecklare och designers behöver ofta de exakta HEX- och RGB-värdena för populära varumärkesfärger:

Färgmodeller jämförda: HEX, RGB, HSL och CMYK

Att förstå när man ska använda varje färgmodell hjälper dig att arbeta mer effektivt:

HEX och RGB är matematiskt identiska — de representerar samma färgrymd med olika notation. HSL är en transformation av RGB till ett cylindriskt koordinatsystem. CMYK är en subtraktiv färgmodell som används i tryckning.

Använda HEX och RGB i CSS och JavaScript

Både HEX och RGB-värden är giltiga i CSS och ger identiska resultat:

/* HEX-notation */
body { background-color: #1A2B3C; }

/* RGB-notation */
body { background-color: rgb(26, 43, 60); }

/* RGB med alfa (genomskinlighet) */
.overlay { background-color: rgba(26, 43, 60, 0.5); }

JavaScript-konverteringsfunktioner:

// HEX till RGB
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16)
  };
}

// RGB till HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();
}

Tillgänglighet och färgkontrast

Att konvertera HEX till RGB är ofta det första steget för att beräkna färgkontrastförhållanden för tillgänglighetsöverensstämmelse. Web Content Accessibility Guidelines (WCAG) kräver ett minimalt kontrastförhållande på 4,5:1 för normal text och 3:1 för stor text (18px+ fetstil eller 24px+ normal).

Kontrastförhållandeformeln kräver den relativa luminansen hos varje färg, vilket beräknas från linjära RGB-värden. Stegen är:

1. Konvertera HEX till RGB (0–255 per kanal).
2. Normalisera varje kanal till 0–1 genom att dividera med 255.
3. Tillämpa sRGB-lineariseringsformeln.
4. Beräkna luminansen: L = 0,2126 × R + 0,7152 × G + 0,0722 × B.
5. Beräkna kontrastförhållandet: (L1 + 0,05) / (L2 + 0,05).