🟢 Beginner

RGB till HEX färgomvandlare

Omvandla RGB-färgvärden till HEX-koder omedelbart. Viktigt för webbdesign, CSS och grafisk design. Kostnadsfri omvandlare. Omedelbara, exakta resultat.

Färgsystemen RGB och HEX förklarade

RGB (Röd, Grön, Blå) och HEX (hexadecimal) är två sätt att representera samma färger — de använder bara olika notationsystem. Båda beskriver färger genom att blanda tre primärfärger (röd, grön, blå) på olika intensiteter. Förstå båda systemen är viktigt för webbdesign, CSS, grafisk design, fotoredigering och digital konst.

I RGB-modellen har var och en av de tre kanaler (röd, grön, blå) en intensitetsvärde från 0 till 255. Noll betyder inget av den färgen; 255 betyder maximal intensitet. Blandning av alla tre på 255 ger vit (rgb(255,255,255)). Alla tre på 0 ger svart (rgb(0,0,0)). Med 256 möjliga värden per kanal och 3 kanaler kan RGB representera 256³ = 16 777 216 unika färger (cirka 16,7 miljoner).

I HEX-modellen uttrycks samma tre kanaler som var och en som en 2-siffrig hexadecimaltal (00 till FF), föregångna med #. Hexadecimal använder siffrorna 0–9 och bokstäverna A–F, där A=10, B=11, C=12, D=13, E=14, F=15. FF i hex = 15×16 + 15 = 255 i decimal. Så #FFFFFF = rgb(255,255,255) = vit. Omvandlingen är enbart en basändring: decimal (bas 10) till hexadecimal (bas 16).

Så konverterar du RGB till HEX: Steg-för-steg

Att konvertera varje RGB-kanal till hex kräver att du delar med 16 och uttrycker kvot och rest som hex-siffror:

Ta det kanalvärdet (0–255)
Del på 16: kvot = första hex-siffran, rest = andra hex-siffran
Om de är 10–15 (A–F) konvertera dem till hex
Kombinera: första siffran + andra siffran = 2-karakter hex-värde
Upprepa för G- och B-kanalerna
Konkatenera: # + R_hex + G_hex + B_hex

Exempel: Konvertera rgb(255, 99, 71) till hex (tomatröd).

R=255: 255÷16=15 rest 15 → F + F → FF
G=99: 99÷16=6 rest 3 → 6 + 3 → 63
B=71: 71÷16=4 rest 7 → 4 + 7 → 47
Resultat: #FF6347

Decimal	÷16 Kvot	Rest	Hex
0	0	0	00
16	1	0	10
128	8	0	80
160	10 (A)	0	A0
200	12 (C)	8	C8
238	14 (E)	14 (E)	EE
255	15 (F)	15 (F)	FF

Vanliga webbfärger: RGB och HEX-referens

Här är en omfattande referenslista för de vanligaste webbfärgerna:

Färgnamn	HEX	RGB	Användningsområde
vit	#FFFFFF	rgb(255,255,255)	Bakgrund, text på mörk bakgrund
svart	#000000	rgb(0,0,0)	Text, kontrastrika bakgrunder
röd	#FF0000	rgb(255,0,0)	Varningar, felmeddelanden, stoppsignaler
grön	#00FF00	rgb(0,255,0)	Lyckomeddelanden
blå	#0000FF	rgb(0,0,255)	Länkar, primärfärger
gul	#FFFF00	rgb(255,255,0)	Varningar, högglans
cyan	#00FFFF	rgb(0,255,255)	Accent, modern UI
magenta	#FF00FF	rgb(255,0,255)	Accent, höglans
orange	#FFA500	rgb(255,165,0)	Skapa tillfällen, energi
lila	#800080	rgb(128,0,128)	Lux, kreativitet
grå	#808080	rgb(128,128,128)	UI-element, neutral
navy	#000080	rgb(0,0,128)	Professionell, trovärdig
tomat	#FF6347	rgb(255,99,71)	Varm röd, matappar
korall	#FF7F50	rgb(255,127,80)	Vänlig, varm design
teal	#008080	rgb(0,128,128)	Professionell, balanserad

Användning av RGB och HEX i CSS och webbdesign

CSS accepterar flera färgformat. HEX och RGB är de vanligaste, men modern CSS stöder också HSL, namngivna färger och de nya oklch- och oklch-färgrymderna för bredare färgutrymme på skärmar.

I CSS kan färger anges som:

color: #FF6347; (HEX)
color: rgb(255, 99, 71); (RGB)
color: rgba(255, 99, 71, 0.5); (RGB + alfa-transparens, 0=transparent, 1=opac)
color: hsl(9, 100%, 64%); (Hue, Saturation, Lightness)
color: tomato; (CSS-namngiven färg)

HEX-koder kan också skrivas i 3-siffrig förkortning när varje par är ett upprepat siffertal: #FF0000 = #F00, #FFFFFF = #FFF, #336699 kan inte förkortas. Förkortningen halverar skrivtid och stöds i alla webbläsare.

För designkonsistens använder moderna designsystem (Material Design, Tailwind CSS, Bootstrap) fördefinierade färgpaletter uttryckta som HEX-koder. Tailwind CSS, till exempel, tillhandahåller 22 färgfamiljer, var och en med 10 nyanser (grå-100 till grå-900), alla angivna som HEX-koder i konfigurationsfilen.

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "name": "Vad är RGB och HEX?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "RGB (Röd, Grön, Blå) och HEX (hexadecimal) är två sätt att representera samma färger — de använder bara olika notationsystem."
      }
    },
    {
      "name": "Hur konverterar jag RGB till HEX?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Del med 16 och uttryck kvot och rest som hex-siffror."
      }
    }
  ]
}

RGBA och alfa-transparens

RGBA lägger till en fjärde kanal till RGB: alfa, som kontrollerar transparensen. Alfa-värden sträcker sig från 0 (fullt genomskinlig, osynlig) till 1 (fullt opak, ingen transparens). Delvisa värden skapar halvgenomskinliga färger.

Exempel: rgba(0, 0, 0, 0,5) är en halvgenomskinlig svart (som en genomskinlig överlagring). rgba(255, 255, 255, 0,8) är en 80% opak vit. Detta används ofta för överlagringseffekter, glasartade UI-element och hover-state-höjande.

I modern CSS finns också HEX med alfa: 8-teckniga hex-koder där de sista två tecknen anger alfa. #FF6347CC skulle vara Tomat med 80% opacity (CC i hex = 204 i decimal; 204/255 ≈ 0,8). Denna format infördes i CSS Color Level 4-specifikationen och stöds i alla moderna webbläsare.

Den ekvivalenta i RGBA är enklare för människor: rgba(255, 99, 71, 0,8) vs #FF6347CC. Vilken format du använder beror på personlig preferens och verktyg – designverktyg som Figma visar och exporterar vanligtvis i HEX, medan CSS-preprocessorer (Sass, Less) ofta använder RGBA för dess läsbarhet.

Färgteori för grund för designare

Att förstå RGB-färgmodellen går hand i hand med att förstå färgteori. RGB är ett additivt färgsystem – färger skapas genom att lägga till ljus. Mixa R+G+B på full intensitet = vit (allt ljus). Detta är motsatsen till subtraktiv färg (pigment/print), där mixning av alla färger = svart.

Komplementära färger i RGB sitter mot varandra på färgcirkeln. Röd (FF0000) och Cyan (00FFFF) är komplementära – observera att Cyan's RGB är bitvis inverterad av Röd (0,255,255 vs 255,0,0). Likaså Blå och Gul, Grön och Magenta. Komplementära par skapar maximal kontrast och visuell vibration när de placeras sida vid sida.

Färgharmoni leder till valet av färger som fungerar bra tillsammans: analog (grannar på cirkeln), triadisk (tre lika avståndade färger), split-komplementär, och tetradisk (fyra färger som bildar en rektangel). Dessa relationer hjälper designare att skapa paletter som känns avsiktliga och visuellt balanserade.

Åtkomlighet och kontrast: WCAG (Web Content Accessibility Guidelines) kräver ett minimikontrastförhållande mellan text och bakgrund: 4,5:1 för vanlig text, 3:1 för stor text. Kontrastförhållandet beräknas från den relativa luminansen av RGB-värdena. Många online-verktyg kontrollerar WCAG-kompatibilitet – detta är betydelsefullt för användare med låg syn eller färgblindhet.

Färgutrymmen bortom RGB: HSL, HSB, CMYK

RGB är inte alltid den mest intuitiva systemet för att välja färger. Alternativa färgutrymmen kan vara mer praktiska för olika användningsfall:

Färgmodell	Komponenter	Bäst för	Används i
RGB	Röd, Grön, Blå (0–255 varje)	Skärmvisning, webb	CSS, skärmar, kameror
HEX	#RRGGBB (samma som RGB)	Webbprogrammering	CSS, HTML, designverktyg
HSL	Skala (0–360°), Sättning (%), Ljusstyrka (%)	Intuitiv designjustering	CSS, designverktyg
HSB/HSV	Skala, Sättning, Hellighet/Värde	Färgplockare UI	Photoshop, Illustrator
CMYK	Svart, Magenta, Gul, Nyckel (svart)	Tryckdesign	InDesign, tryckflöden
Pantone	Standardiserade färgkoder	Varumärkesenhetlighet	Fysiska produkter, tryck

HSL är särskilt designvänligt: skalan väljer färgen (0°=röd, 120°=grön, 240°=blå), sättningen kontrollerar hur färgen är (0% är grå, 100% är ren färg), och ljusstyrkan kontrollerar ljusstyrkan (0% är svart, 50% är ren färg, 100% är vit). Att justera endast ljusstyrkan medan skala och sättning förblir oförändrade skapar en sammanhängande färgskala – mycket användbart för att skapa hover-stater, inaktiverade stater och toner/skuggor av ett varumärkesfärg.

Ofta ställda frågor

Hur konverterar jag RGB till HEX manuellt?

Konvertera varje kanal (0–255) till 2-siffrig hex: del på 16 för den första siffran, använd resten som den andra siffran (där 10–15 = A–F). Sammanfoga alla tre resultat efter #. Exempel: rgb(128, 0, 255) → 128=80, 0=00, 255=FF → #8000FF (lila).

Vad är HEX-koden för vitt?

#FFFFFF. Vitt i RGB är (255,255,255) — maximal intensitet för alla tre kanaler. I hex är 255 = FF. Så vitt är #FF+FF+FF = #FFFFFF. Den 3-karakteriga förkortningen är #FFF.

Kan jag använda RGB i CSS?

Ja. CSS accepterar både rgb(255, 128, 0) och #FF8000 — de ger identiska resultat. RGB är ibland föredraget för läsbarhet; HEX för bredd. RGBA lägger till transparens: rgba(255, 128, 0, 0.7) för 70% genomskinlig orange.

Vad är skillnaden mellan HEX och RGB?

De representerar samma information i olika noteringar. RGB använder tre decimaltal (0–255). HEX använder tre 2-siffriga hexadecimalvärden (00–FF). HEX är mer kompakta (7 tecken vs 15+) och är den dominerande formatet i CSS och designverktyg. Omvandling mellan dem är exakt — ingen information förloras.

Varför använder HEX bas 16?

Bas 16 (hexadecimal) konfortabelt kodar 8-bitars värden (0–255) i exakt 2 tecken. Två hex-siffror representerar 4 bitar vardera, totalt 8 bitar = 1 byte. Tre RGB-byter (24 bitar) blir en 6-teckig hex-kod. Denna kompakthet och överensstämmelse med datorns binära är varför hex är standard i datorer.

Vad är en 8-siffrig HEX-kod (som #RRGGBBAA)?

Ett 8-teckig HEX-kod innehåller en alfa-kanal som den sista 2 siffrorna (00=transparent, FF=genomskinlig). #FF6347CC = Tomat vid ~80% genomskinlighet (CC hex = 204 decimal; 204/255 ≈ 0,8). Stöds i alla moderna webbläsare. Mindre vanligt än RGBA-notation men likvärdigt.

Vilken färg har lika RGB-värden?

När R=G=B är resultatet alltid en skuggning av grått. rgb(0,0,0) = svart, rgb(128,128,128) = medelgrå (#808080), rgb(255,255,255) = vitt. Gråskalan går från #000000 till #FFFFFF genom lika steg.

Hur påverkar färgkontrast tillgänglighet?

WCAG 2.1 kräver en kontrastförhållande på 4,5:1 mellan normal text och bakgrund (3:1 för stora texter och UI-komponenter). Kontrastförhållande beräknas från relativ luminans, som härleds från RGB-värden. Att inte uppfylla kontrastkraven gör innehållet ofullständigt tillgängligt för användare med nedsatt syn eller i starkt belysning.

Vad är HSL och hur relaterar det till HEX?

HSL (Hue, Saturation, Lightness) är en alternativ CSS-färgmodell designad för att vara mer intuitiv för människor. hsl(0, 100%, 50%) är ren röd = #FF0000. Konvertera genom att beräkna RGB-värden från HSL med hjälp av färgmodelltransformen, sedan konvertera RGB till HEX. CSS stöder HSL direkt, så du kan använda det utan omvandling.

Kan jag få HEX-koden från en färgplockare i designverktyg?

Ja. Alla stora designverktyg (Figma, Adobe XD, Photoshop, Sketch, Canva) visar HEX-koder när du klickar på en färg. I Figma, klicka på fyllningsfärgen i egenskapspanelen för att se och kopiera HEX-koden. I Photoshop, visar färgplockaren i fönstret nedan HEX. Webbbläsarens utvecklarverktyg (Inspektera element → Stilar) visar också färgvärden som kan ändras till HEX-format.

Färg tillgänglighet och kontrastförhållanden

Webb tillgänglighetsriktlinjer (WCAG 2.1) specificerar minimikrav för kontrastförhållanden mellan text och bakgrundsfärger för att säkerställa läsbarhet för användare med nedsatt syn eller färgblindhet. Cirka 8% av männen har någon form av färgsynssvaghet (färgblindhet), vilket gör tillgängliga färgval ett etiskt och lagligt krav för professionell webbdesign.

Kontrastförhållandet mellan två färger beräknas från deras relativa luminans: kontrastförhållande = (L1 + 0,05) / (L2 + 0,05), där L1 är den ljusare färgens luminans och L2 är den mörkare. Relativ luminans härleds från RGB-värden via en gamma-korrigeringsformel: för varje kanalvärde v = V/255, om v ≤ 0,03928 då linjär = v/12,92, annars linjär = ((v+0,055)/1,055)^2,4. Därefter L = 0,2126×R + 0,7152×G + 0,0722×B.

Minimikrav för kontrast: AA-nivån kräver 4,5:1 för vanlig text (under 18pt eller 14pt fet) och 3:1 för stor text. AAA-nivån kräver 7:1 för vanlig text och 4,5:1 för stor text. De vanligaste misslyckanden är ljusgrå text på vita bakgrunder (#999999 på vit har bara ett kontrastförhållande på 2,85:1, vilket misslyckas med AA) och mörk text på mörka bakgrunder.

Text / Bakgrundskombination	Kontrastförhållande	WCAG AA Normal	WCAG AA Stor
Svart #000 / Vit #FFF	21:1	✓ Godkänt	✓ Godkänt
Mörk blå #003366 / Vit	12,2:1	✓ Godkänt	✓ Godkänt
Mellanliggande grå #767676 / Vit	4,54:1	✓ Godkänt	✓ Godkänt
Ljus grå #999 / Vit	2,85:1	✗ Misslyckades	✗ Misslyckades
Gul #FFFF00 / Vit	1,07:1	✗ Misslyckades	✗ Misslyckades
Vit #FFF / Mörk blå #003366	12,2:1	✓ Godkänt	✓ Godkänt

Bygg en färgpalett: Från HEX till designsystem

Ett professionellt färgsystem inkluderar vanligtvis en primärfärg, sekundära accentfärger, neutrala gråtoner och semantiska färger (framgångsgrön, varningsgul, felröd, informationblå). Varje basfärg kräver flera skuggor för olika UI-tillstånd.

Från en brandfärg som #3B82F6 (Tailwinds blå-500), kan du härleda en 10-skala genom att justera ljushet i HSL-rummet: blå-50 (#EFF6FF, mycket ljus), blå-100 (#DBEAFE), till blå-900 (#1E3A5F, mycket mörk). Designtoken kartlägger sedan dessa skuggor till semantiska användningar: primär-knapp-bakgrund = blå-600, primär-knapp-hovring = blå-700, primär-knapp-text = vit, osv.

När du bygger ett varumärkesfärgsystem, överväg: 60-30-10-regeln — 60% dominerande färg (vanligtvis en neutral), 30% sekundärfärg, 10% accent. Se till att alla textkombinationer uppfyller WCAG AA-kontrastkrav. Testa färger under olika belysningsförhållanden och enhetsdisplay. Räkna med mörk läge (som kan behöva olika skuggvärden för att upprätthålla kontrasten). Ett välutformat färgsystem i kod är 8–15 HEX-värden som täcker alla användningsfall konsistent.

Färgpsykologi i design och marknadsföring

Färger utlöser psykologiska och emotionella svar, vilket gör färgvalet till en strategisk beslut i varumärkesbyggande och UI-design. Färgpsykologisk forskning (medan den ibland överdrivs i populärkulturen) ger användbara allmänna riktlinjer för att designa effektiva visuella upplevelser.

Röd (#FF0000 range): Energi, brådskande, passion, fara. Används för försäljning ("Sälj!"-tecken är vanligtvis röda), nödsignaler, stoppsignaler och matvarumärken (Coca-Cola, McDonald's, KFC - röd stimulerar aptiten och skapar brådskande känsla). Högkontrast röd är utmärkt för kall-till-aktioner när man vill få omedelbar användaråtgärd.

Blå (#0000FF range): Tillit, professionellhet, stabilitet, lugn. Det dominerande färgen i finans- och teknologi varumärken (Facebook, Twitter/X, LinkedIn, PayPal, IBM, Samsung). Studier visar att blått är det globalt föredragna färgen över kulturer. Ljusblått förmedlar öppenhet och vänlighet; mörkblått förmedlar auktoritet och expertis.

Grön (#00FF00 range): Natur, hälsa, tillväxt, framgång (pengar i USA). Används i stor utsträckning i hälsorelaterade varumärken, finansiella appar (positiva avkastningar visas i grönt), miljöorganisationer och "gå"-signaler. Mellersta toner som #28A745 (Bootstrap-success-grön) signalerar positiva tillstånd i UI utan att vara aggressiva.

Gult/Orange range: Optimism, energi, kreativitet, varning. Gult är mycket synligt (byggnadsplatsens tecken, taxibilar) men svårt att läsa som text på vitt. Orange (#FFA500 range) används ofta för kall-till-aktioner - det är synligt och energiskt utan brådskande/fara-konnotation av röd.

Färgfamilj	Typisk HEX-rang	Emotionella associationer	Varumärkesexempel
Röd	#CC0000–#FF6666	Brådskande, energi, aptit	Coca-Cola, Netflix, YouTube
Blå	#003399–#66AAFF	Tillit, lugn, professionellhet	Facebook, LinkedIn, PayPal
Grön	#006600–#66FF66	Natur, hälsa, tillväxt	Whole Foods, Spotify, Starbucks
Orange	#CC5500–#FFAA44	Energi, kreativitet, värme	Amazon, Harley-Davidson
Lila	#440088–#AA66CC	Lux, visdom, kreativitet	Cadbury, Hallmark, Twitch
Svart	#000000–#333333	Sofistikeradhet, makt, elegans	Apple, Chanel, Nike

Arbeta med färger i populära designverktyg

Varje stort designverktyg har sin egen färgflödessätt. Förstå hur man arbetar med HEX och RGB effektivt i ditt verktyg sparar betydande tid i professionell designarbete.

Figma: Klicka på någon fyllt element → Egenskapspanelen visar fyllningsfärg → Klicka på färgplattan för att öppna färgpikern. Du kan skriva in HEX-värden direkt eller växla till RGB, HSL eller HSB-läge. Figma stöder också opacity via separat opacity-fält och RGBA-notation. Kopiera och klistra in HEX-koder mellan Figma och CSS utan omvandling behövs.

Adobe Photoshop: Öppna Färgpikern (bakgrundsfärg/förfärgsfärgsfält). Färgpikerns botten visar HEX-koden i en textfält. Högerklicka på färgplattor för att lägga till dem till din palett. Färgpikerns ögonrörsverktyg utläser någon färg på skärmen - hover för att se dess HEX-kod i info-panelen.

Webbläsarutvecklingsverktyg: Inspektera något element → Egenskapspanelen visar CSS-färgvärden → Klicka på färgplattan bredvid någon färgegenskap för att öppna en inbyggd piker. Utvecklingsverktygen kan visa färger som HEX, RGB, HSL eller namn - klicka på färgförhandsgranskningen för att cirkulera genom format. Detta är oerhört värdefullt för att reversera designbeslut från befintliga webbplatser.

VS Code: Färgdekoratörer (färgade kvadrater) visas bredvid HEX- och RGB-värden i CSS-filer. Hovering visar en piker. Färgfärgförlängelsen lägger till färgförhandsgranskningar för alla färgformat. Emmet-abkort som c:f expanderar till color: #fff; för vanliga färger.

Använda denna RGB till HEX-konverterare

Inför röd, grön och blå kanalvärden (varje mellan 0 och 255). Konverteraren visar HEX-färgkoden redo att klistra in i CSS, HTML eller någon annan designverktyg. Värden utanför 0–255 klampas automatiskt. Konverteraren visar också den omvända operationen: inför en HEX-kod för att hämta upp RGB-brytningen. Använd verktyget när ett designverktyg ger dig en RGB-värde men din CSS-stilarkiv använder HEX-format, eller när du kopierar färger mellan olika program som använder olika format. HEX-koden som utdata inkluderar ledande # tecken för direkt infogning i CSS-färgegenskaper. Alla 16,7 miljoner RGB-färgkombinationer kartläggs till en unik 6-tecken HEX-kod utan ambiguitet eller avrundning.