RGB till hex – så fungerar den exakta omvandlingen
Sidan omvandlar tre decimala RGB-värden (rött, grönt och blått, vardera 0–255) till en hexadecimal färgkod som #1E90FF. Verktyget visar omedelbart färgen visuellt och uppdaterar samtidigt alla andra färgformat (HSL, HSV, CMYK, LAB och färgväljaren). Eftersom RGB och hex båda arbetar i samma färgrymd – sRGB – blir omvandlingen förlustfri och reversibel. Ingen approximation eller gamut-klippning inträffar. Hex-utdata har alltid sex siffror och börjar med #. Inga alfakanaler ingår (såvida du inte använder åttasiffrig hex i CSS, men det hanteras inte här på utsidan).
Hur RGB och hex hänger ihop
RGB bygger på additiv färgblandning. Rött, grönt och blått ljus blandas för att skapa en färg. Varje kanal lagras som ett heltal mellan 0 (inget ljus) och 255 (fullt ljus). Det ger 256 möjliga nyanser per kanal, totalt 16,7 miljoner färger (256³). Hexadecimala färgkoder representerar exakt samma värden, men i bas 16 i stället för bas 10.
En hex-kod består av # följt av sex hexadecimala siffror (0–9 och A–F). De första två siffrorna anger rött, de mittersta två grönt och de sista två blått. Exempel: #4F46E5 betyder R=79, G=70, B=229. Precis som i decimalvarianten är varje kanal 0–255, men skrivet som sex hexadecimala siffror. Eftersom 255 är FF i hex, räcker två siffror per kanal.
Verktyget använder tre decimala tal separerade med kommatecken eller mellanslag som indata. Exemplet 79, 70, 229 ger #4F46E5. Om du skriver in #abc (tresiffrigt) i hex-fältet, expanderar verktyget det internt till sex siffror (#AABBCC). Detta följer CSS-regeln där varje par dubbleras.
Så fungerar omvandlingen – från decimal till hexadecimal
Omvandlingen är rent aritmetisk. För varje decimalt R-, G- eller B-värde mellan 0 och 255 görs följande:
- Dividera värdet med 16. Heltalskvoten (0–15) blir den första hex-siffran.
- Resten (0–15) blir den andra hex-siffran.
- Konvertera varje kvot och rest till motsvarande hex-tecken (0–9, A, B, C, D, E, F).
Exempel med R=79: 79 ÷ 16 = 4 rest 15. 4 → hex 4, 15 → hex F, så röddelen blir 4F. För G=70: 70 ÷ 16 = 4 rest 6 → 46. För B=229: 229 ÷ 16 = 14 rest 5 → E5. Sammansatt: #4F46E5.
Om värdet är 0 blir resultatet 00. Om 255 blir det FF. Alla beräkningar sker i din webbläsare – inga data skickas till någon server.
Eftersom konverteringen är exakt inom sRGB-rymden, finns det inga approximationsfel. Samma hex-kod kan alltid omvandlas tillbaka till samma RGB-triplett. Det är därför verktyget inte har någon ”konvertera”-knapp: varje redigering i något fält uppdaterar alla andra omedelbart. Du skriver in tre tal, och hex-utdata visas synkront.
Verktygets funktioner och edge cases
Indatafältet för RGB accepterar tre heltal mellan 0 och 255, avskilda med kommatecken eller mellanslag (eller en blandning). Exempel på giltig indata: 79,70,229, 79 70 229, 79, 70, 229. Ledande nollor är tillåtna: 079, 070, 229 fungerar, men verktyget ignorerar dem eftersom det räknar om värdet.
Följande situationer genererar ett felmeddelande:
– Något av talen ligger utanför intervallet 0–255.
– Formatet är ogiltigt, till exempel bara ett eller två tal, eller text blandat med siffror.
– Decimaltal (flyttal) tillåts normalt inte – endast heltal.
I sådana fall visas meddelandet: ”Ange RGB som tre tal 0–255, till exempel 79, 70, 229.” (fritt översatt från engelska). Observera att det exakta meddelandet på sidan är på engelska eftersom verktyget är på engelska, men här beskriver vi logiken på svenska.
Hex-indatafältet accepterar både sexsiffriga koder (#4F46E5) och tresiffriga (#abc). Tresiffriga koder expanderas automatiskt till sex siffror, eftersom CSS tolkar dem som dubbletter av varje siffra. Verktyget sparar alltid den sexsiffriga formen i utdatafältet.
Eftersom RGB och hex delar samma färgrymd (sRGB), finns det inget gamutproblem. Om du däremot jämför med CMYK eller LAB kan skillnader uppstå, men det beror på att dessa färgrymder har olika omfång. Verktyget visar i så fall skillnaden visuellt, men konverteringen mellan RGB och hex är alltid exakt.
Vem har nytta av den här sidan?
Frontend-utvecklare som skriver CSS och behöver hex-koder för färger som color eller background-color. Många designverktyg (Figma, Sketch, Photoshop) anger färger som RGB-tripletter, och utvecklaren måste omvandla dem till hex för att använda i kod. Verktyget eliminerar manuell huvudräkning.
UI/UX-designers som får färgspecifikationer i RGB från exempelvis bildredigering och vill ha hex för designhandover eller kodgenerering. Grafiska formgivare som arbetar med webbtillgångar och vill säkerställa färgkonsistens mellan RGB-prototyper och slutgiltiga hex-kodade implementationer.
Studenter eller hobbyister som lär sig digital färglära och vill förstå sambandet mellan decimal och hexadecimal representation. Verktyget ger omedelbar visuell feedback och hjälper till att förankra teorin i praktik.
Alla som använder färgväljare från utvecklarverktyg i webbläsare (Chrome DevTools, Firefox Inspector) och vill kopiera hex-värdet för att använda i ett stylesheet. I stället för att manuellt räkna om 79,70,229 till #4F46E5, skriver du bara in siffrorna och får koden direkt.
Vanliga frågor
Varför visas inte åttasiffrig hex (med alpha)?
Verktyget omvandlar från RGB utan alfakanal. Hex-utdata är alltid sexsiffrig. Om du behöver alfakanal (till exempel #1E90FF80) måste du lägga till den manuellt i efterhand. Verktyget hanterar endast RGB i sRGB-rymden utan transparens.
Kan jag mata in decimala RGB-värden som 0.5?
Nej. Varje kanal måste vara ett heltal mellan 0 och 255. Flyttal som 0,5 tolkas inte som en färgkanal, eftersom färger i digitala sammanhang representeras av heltal (8 bitar per kanal).
Vad händer om jag skriver #123 i hex-fältet?
Verktyget expanderar det till sex siffror: #112233. Samma princip som i CSS där varje siffra dubbleras. Utdatafältet visar den sexsiffriga formen.
Är konverteringen mellan RGB och hex alltid exakt?
Ja, om båda uttrycken använder sRGB-rymden. Det är fallet här. Du kan konvertera fram och tillbaka hur många gånger som helst utan förlust. Skillnader uppstår först när du byter till andra färgrymder som CMYK.
Varför får jag ett felmeddelande när jag skriver 255, 255, 300?
Eftersom det tredje värdet (300) ligger utanför det tillåtna intervallet 0–255. Verktyget accepterar inte värden där. Ändra det till 255 eller lägre.
Kan jag använda mellanslag i stället för kommatecken?
Ja. Både komma, mellanslag och kombinationer fungerar. Exempel: 255 255 255 eller 255,255,255. Verktyget extraherar talen oavsett.