Konvertera HEX till RGB

HEX till RGB – exakt färgomvandling utan gissningar

Hexadecimalkoder som #4f46e5 är standard i CSS och designfilerna, men de underliggande displayerna och de flesta programmeringsgränssnitten arbetar med siffror mellan 0 och 255 för röd, grön och blå. Den här sidan omvandlar en HEX-kod till dess exakta RGB-triplett, och gör det utan avrundning eller tolkning – bara en deterministisk bas‑16‑till‑bas‑10‑beräkning.

Resultatet visas omedelbart, oavsett om du skriver #4f46e5, abc eller #1E90FF. Verktyget accepterar både sexsiffriga och tresiffriga förkortningar, och det inbyggda färgväljaren låter dig prova visuellt. Alla fält – HSL, HSV, CMYK och LAB – uppdateras samtidigt, så du får en komplett bild av färgen.

Vad HEX och RGB egentligen är

HEX står för hexadecimal, ett talsystem med bas 16. Varje tecken representerar ett värde från 0 till 15, där bokstäverna a–f motsvarar 10–15. En sexsiffrig HEX-kod skrivs som #RRGGBB, där varje par styr en färgkanal: de första två siffrorna för röd, de mittersta för grön och de sista för blå.

RGB (röd, grön, blå) är det additiva färgsystem som skärmar använder. Varje kanal kan vara ett heltal mellan 0 och 255 – 0 innebär ingen ljusstyrka, 255 maximal. Totalt finns 256³ ≈ 16,7 miljoner färger. Eftersom 256 = 16² krävs precis två hexadecimala siffror per kanal för att täcka hela intervallet. #ff blir 255 i decimal, #00 blir 0, och #80 blir 128.

Relationen är rent matematisk och reversibel: #4f46e5 betyder att rödkanalen är 4f₁₆ = 4·16 + 15 = 79, grönkanalen 46₁₆ = 4·16 + 6 = 70, och blåkanalen e5₁₆ = 14·16 + 5 = 229. RGB-värdet blir alltså (79, 70, 229).

Hur konverteringen fungerar på denna sida

Verktyget förväntar sig en giltig HEX-kod med sex siffror (som #ff6600) eller tre siffror (som #f60). #‑prefixet är frivilligt – du kan skriva abc eller #abc – och tolkas på samma sätt.

Tresiffrig förkortning utökas automatiskt till sex siffror genom att varje siffra dubbleras. #abc blir #aabbcc. Detta följer CSS‑standarden (CSS Color Module Level 4) där en tresiffrig HEX är tillåten som kortform för färger där varje kanalvärde är en multipel av 17 (vilket ger 0, 17, 34, …, 255).

Invalida inmatningar ger ett tydligt felmeddelande:
"Enter a hex color like #4f46e5 or #abc."

Om du skriver in en åttasiffrig HEX (t.ex. #4f46e580 som innehåller alfakanal) accepteras den inte – sidan är strikt inriktad på HEX‑till‑RGB med sex eller tre siffror. Det finns inte heller någon alfastöd i omvandlingen.

Beräkningen utförs direkt i din webbläsare. Ingenting skickas till en server, så du kan mata in känsliga färgscheman utan att oroa dig för datalagring.

Real-tidsuppdatering av alla andra färgformat sker så fort du ändrar ett fält. Du kan därmed experimentera med olika HEX-koder och se hur RGB, HSL, CMYK och LAB ändras momentant.

Varför ett separat HEX‑till‑RGB‑verktyg?

Det finns många generiska färgkonverterare, men den här sidan är specialiserad på just den omvandling som är vanligast i praktiken: från den kompakta hexadecimala representationen till de numeriska RGB-värden som krävs i JavaScript, canvas‑API:er, datavisualiseringar och färgmatematik.

Exakthet är avgörande. Eftersom konverteringen är deterministisk kan du vara säker på att #rrggbb alltid ger samma siffror. Inga avrundningsfel, ingen gammakorrigering eller färgrymdsclippning – bara ren basomvandling.

Direkt flerfältsuppdatering sparar tid. I stället för att konvertera en HEX manuellt och sedan slå upp HSL eller CMYK i separata verktyg, ser du allt på en gång. För en frontend‑utvecklare som behöver ett HSL‑värde för en CSS‑animation är detta ett steg mindre.

Inbyggd färgväljare gör det möjligt att visuellt navigera bland färger och omedelbart se motsvarande HEX och RGB. Användbart när du har en idé om färgen men inte exakt kod.

Tresiffrig förkortning stöds explicit – många äldre verktyg eller manuella beräkningar glömmer att expandera #abc korrekt till #aabbcc. Detta verktyg gör det automatiskt.

Användningsområden i praktiken

Frontend‑utvecklare som arbetar med CSS, JavaScript eller canvas‑API:er behöver ofta omvandla en HEX-kod (given i en designfil) till RGB-siffror. document.body.style.backgroundColor = 'rgb(79,70,229)' fungerar i de flesta moderna webbläsare, och vissa äldre stöder bara RGB-syntax. Dessutom kräver färgmanipulation i canvas eller WebGL numeriska kanaler för att beräkna blandningar, gradienter eller färgkorrigeringar.

Designers som får färgspecifikationer som HEX från varumärkesriktlinjer men arbetar i program (t.ex. Sketch, Figma, Photoshop) som föredrar RGB‑reglage eller numeriska fält, kan direkt kopiera den resulterande triplett från denna sida.

Digitala konstnärer och spelutvecklare som behöver exakta kanalvärden för algorithmer – till exempel för att skapa färgpaletter, interpolera färger eller beräkna kontrast enligt WCAG‑2.1.

Studerande som lär sig om färgsystem och sambandet mellan hexadecimalt och decimalt kan använda sidan för att testa och verifiera sina egna beräkningar.

Vanliga misstag och kantfall

Tresiffrig förkortning #rgb är en kvarleva från tidiga CSS‑versioner och fungerar bara när varje kanalvärde är en multipel av 17 (dvs. 0, 17, 34, 51, 68, 85, 102, 119, 136, 153, 170, 187, 204, 221, 238, 255). Det är därför #abc är möjligt (a=170, b=187, c=204) medan #123 (1=17, 2=34, 3=51) också är giltigt – alla tre är multiplar av 17. Verktyget expanderar korrekt oavsett.

Vanliga frågor (FAQ)

1. Varför blir #abc till RGB (170,187,204) och inte (10,11,12)?
En tresiffrig HEX utökas enligt CSS‑standarden genom att varje siffra dubbleras, inte genom att lägga till nollor. a₁₆ = 10, dubblerat blir aa₁₆ = 170. Detta ger färger som är jämnt fördelade i 16 steg per kanal.

2. Kan jag konvertera en åttasiffrig HEX (med alfa) med det här verktyget?
Nej. Sidan förväntar sig sex eller tre siffror. En åttasiffrig kod (#rrggbbaa) innehåller en alfakanal och omfattas inte av denna HEX‑till‑RGB‑konvertering. Du får felmeddelandet som nämns ovan.

3. Används någon form av avrundning vid konverteringen?
Nej. Konverteringen från bas‑16 till bas‑10 är exakt för varje hexadecimalt par. Det finns inga decimaler att avrunda. RGB-värdena är alltid heltal mellan 0 och 255.

4. Vad händer om jag klistrar in ett färgnamn som red eller rebeccapurple?
Verktyget accepterar endast hexadecimalkoder. Färgnamn eller andra format som rgb(255,0,0) tolkas inte och ger felmeddelandet. Du måste först slå upp HEX-motsvarigheten.

5. Sparas eller överförs mina inmatningar till någon server?
Nej. Alla beräkningar sker lokalt i webbläsaren med JavaScript. Ingenting skickas över nätverket.

6. Kan jag använda verktyget offline?
Ja, om du laddar sidan när du är online och sedan kopplar från internet, fungerar allt fortfarande eftersom ingen serverkommunikation krävs.

Sammanfattning av konverteringslogik

• Indata: En sträng med 3 eller 6 hexadecimala tecken, med eller utan inledande #.
• Validering: Endast tecken 0–9, a–f, A–F tillåts. Längden måste vara 3 eller 6 (efter eventuellt #).
• Expansion: Om 3 tecken, duplicera varje tecken: "abc" → "aabbcc".
• Parsning: Dela upp i tre par: RR, GG, BB.
• Omvandling: För varje par, beräkna (första_tecken × 16 + andra_tecken). T.ex. "4f" → 4×16 + 15 = 79.
• Utdata: Tre heltal inom, presenterade som R, G, B.

Denna enkla, deterministiska process gör att verktyget alltid är korrekt och omedelbart. Oavsett om du är webbutvecklare, grafisk designer eller bara nyfiken på hur datorskärmar skapar färger, får du exakt den information du behöver – inget mer, inget mindre.