Webbdesign och CSS
Omvandla en färg från en designfil eller en skärmdumpsväljare till den hexadecimala kod som din stilmall behöver.
RGB-till-HEX-omvandlare — Omvandla RGB-värden till hexadecimala koder och hexadecimala koder till RGB, med förhandsgranskning i realtid.
Ange siffror för rött, grönt och blått, välj en färg eller klistra in en hexkod och se alla format samtidigt: HEX, RGB och HSL. En förhandsgranskning i realtid och en kontrastkontroll visar vilken textfärg som passar bäst. Allt körs direkt i din webbläsare.
Konvertera en färg
Dina färger sparas i din webbläsare
Välj eller skriv in en färg
Aa
Färgkoder
HEX
–RGB (CSS)
–HSL (CSS)
––Best text color on it
–Kontrastförhållande
Guiden
Guide till RGB till HEX: Färgkoder, HSL och kontrast
Lär dig hur färgkoder fungerar och hur man väljer lättlästa färgkombinationer.
Vad gör en RGB-till-HEX-omvandlare?
Skärmar återger alla färger genom att blanda rött, grönt och blått ljus. RGB uttrycker blandningen som tre siffror mellan 0 och 255. HEX uttrycker samma tre siffror i bas 16 som en kort kod, till exempel #1F3A5F, vilket är vad CSS, designverktyg och varumärkesriktlinjer vanligtvis använder.
Ange de tre siffrorna, välj en färg med färgväljaren eller klistra in en hexkod. Alla format uppdateras samtidigt, och du får dessutom en HSL-version samt en rekommendation om vilken textfärg som syns bäst på den.
Varför människor konverterar RGB till HEX
Varumärke och dokument
Se till att varumärkets färger är enhetliga i logotypen, presentationsmaterialet och på webbplatsen.
Tillgänglighet
Kontrollera vilken textfärg som passar mot bakgrunden och se till att kontrastförhållandet är tillräckligt innan du publicerar.
Hur RGB omvandlas till HEX
Var och en av de tre siffrorna omvandlas till ett tvåsiffrigt tal i bas 16, varefter de tre paren sammanfogas.
RGB: 31, 58, 95
31 = 1F (1 × 16 + 15)
58 = 3A (3 × 16 + 10)
95 = 5F (5 × 16 + 15)
HEX: #1F3A5F
I bas 16 används siffrorna 0–9 och bokstäverna A–F, där A motsvarar 10 och F motsvarar 15. En kortkod som #FA0 är en förkortning: varje siffra räknas dubbelt, så den betyder egentligen #FFAA00.
Vanliga färger i RGB och HEX
| Färg | RGB | HEX |
|---|---|---|
| Svart | 0, 0, 0 | #000000 |
| Vit | 255, 255, 255 | #FFFFFF |
| Röd | 255, 0, 0 | #FF0000 |
| Grön | 0, 255, 0 | #00FF00 |
| Blå | 0, 0, 255 | #0000FF |
| Gul | 255, 255, 0 | #FFFF00 |
| Orange | 255, 165, 0 | #FFA500 |
| Grå | 128, 128, 128 | #808080 |
Så här använder du RGB-till-HEX-omvandlaren
- Ange värdena för rött, grönt och blått, eller klicka på färgprovet för att använda färgväljaren.
- Eller klistra in en hexadecimal kod i fältet ”Hex” för att göra tvärtom.
- Läs av HEX-, RGB- och HSL-koderna och kontrollera kontrastförhållandet samt vilken textfärg som är bäst.
- Klicka på ”Kopiera” bredvid det format du behöver.
Enkla tips för att arbeta med färger
- För att texten ska vara lättläst bör du sträva efter ett kontrastförhållande på minst 4,5 : 1 för normal text och 3 : 1 för stor text.
- Hexkoder är inte skiftlägeskänsliga, så #1f3a5f och #1F3A5F är samma färg.
- Ledande # krävs i CSS men är valfritt här. Du kan klistra in kod med eller utan det.
- Skärmar och skrivare återger färger på olika sätt, vilket innebär att en utskriven färg kanske inte stämmer överens med det du ser på skärmen.
Begränsningar och integritet
Sekretess
Dina färger omvandlas i din webbläsare. Ingenting skickas till vår server eller lagras. Endast valet av gemener sparas på din enhet.
Begränsningar
Verktyget arbetar med standardmässiga 8-bitars sRGB-färger, 0 till 255 per kanal. Det stöder inte transparens (RGBA eller 8-siffriga hexadecimala värden), CMYK för utskrift eller färgrymder med bred färgskala.
Vanliga frågor
Vanliga frågor om RGB-till-HEX-omvandlaren
Hur konverterar jag RGB till HEX?
Ange värdena för rött, grönt och blått, vardera mellan 0 och 255. Verktyget omvandlar varje tal till två siffror i bas 16 och sätter ihop dem, så att 31, 58, 95 blir #1F3A5F.
Hur konverterar jag HEX till RGB?
Klistra in hexkoden i fältet ”Hex”. De tre RGB-värdena fylls i automatiskt. Till exempel motsvarar #FF8800 värdena 255, 136, 0.
Måste hexkoden innehålla ett #-tecken?
Nej. Du kan skriva det med eller utan #, och kortkoder som #FA0 fungerar också. I resultatet ingår alltid #, så det är klart för CSS.
Vad betyder de tre RGB-värdena?
De anger mängden rött, grönt och blått ljus, från 0 (inget) till 255 (fullt). 0, 0, 0 är svart och 255, 255, 255 är vitt.
Vad används HSL-värdet till?
HSL beskriver en färg som nyans, mättnad och ljushet. Det är ofta enklare att justera manuellt, till exempel för att göra en färg lite ljusare, och det fungerar direkt i CSS.
Vad säger kontrastförhållandet mig?
Det visar hur väl svart eller vit text framträder mot din bakgrundsfärg. Ett kontrastförhållande på 4,5:1 eller mer är det vanliga minimikravet för normal text enligt WCAG:s riktlinjer för tillgänglighet.
Kan jag använda genomskinlighet?
Inte här. Det här verktyget hanterar endast täckande färger, utan alfakanal. Om du vill ha genomskinlighet måste du själv lägga till ett alfavärde i rgba() i din CSS.
Sparas eller skickas mina uppgifter någonstans?
Nej. Konverteringen sker i din webbläsare och inga uppgifter lämnar din enhet. Endast ditt val av gemener sparas till nästa gång.
Från personer som använder det här verktyget
Recensioner
Laddar recensioner…
Fortsätt
Fler verktyg i verktygslådan
På hemsidan finns ytterligare dussintals kostnadsfria verktyg som inte kräver någon API-nyckel.
UUID-generator
Skapa slumpmässiga UUID:er av typen v4, v7 och v5 i stor skala.
Öppna verktygetVerktyg för att ta bort blanksteg
Ta bort extra mellanslag, tabbar och tomma rader.
Öppna verktygetEnhetsomvandlare
Omvandla längd, vikt, hastighet och mycket mer.
Öppna verktygetOmvandlare av romerska siffror
Konvertera siffror till romerska siffror och tvärtom.
Öppna verktyget