Du hittade den perfekta färgen i HEX-format, men designverktyget du använder kräver RGB. Eller en kund skickade en färg i RGB och du behöver HSL-värdet till din CSS. Konvertering av färgformat är en daglig uppgift för designers och utvecklare. Vår Färgkonverterare gör det omedelbart.
Vad du behöver
- Ett färgvärde i vilket format som helst (HEX, RGB, HSL eller andra)
- En webbläsare (Chrome, Firefox, Safari eller Edge)
- Inget konto eller installation krävs
Steg-för-steg-guide
Ange ditt färgvärde
Öppna Färgkonverteraren. Skriv eller klistra in ditt färgvärde i vilket format som stöds. Ange t.ex. #3B82F6 som ett HEX-värde, rgb(59, 130, 246) som RGB eller hsl(217, 91%, 60%) som HSL. Verktyget känner igen formatet automatiskt.
Visa alla formatkonverteringar
Verktyget visar omedelbart din färg i alla format som stöds: HEX, RGB, HSL och mer. Du kan se en liveförhandsvisning av färgen tillsammans med alla motsvarande värden. Om du behöver justera färgen använder du färgväljaren för att finjustera den visuellt.
Kopiera det format du behöver
Klicka på kopieringsknappen bredvid vilket format som helst för att kopiera värdet till urklipp. Klistra in det direkt i din CSS-fil, ditt designverktyg eller var du än behöver det. Ingen manuell omskrivning krävs.
Bra att veta Färgkonverteraren körs helt i webbläsaren. Den fungerar offline när den väl laddats och kräver inget konto eller installation.
Förstå färgformat
Olika verktyg och sammanhang använder olika färgformat. Här är när du ska använda vart och ett:
HEX
Det vanligaste formatet på webben. En HEX-färg börjar med # följt av sex tecken (bokstäver och siffror), som #FF5733.
- Används i: CSS, HTML, designverktyg (Figma, Sketch, Photoshop)
- Format:
#RRGGBBdär varje par är ett hexadecimalt värde från 00 till FF - Exempel:
#3B82F6(en mellanblå)
RGB
Beskriver en färg med hjälp av dess röda, gröna och blå komponenter, var och en i intervallet 0 till 255.
- Används i: CSS (
rgb()-funktionen), programmeringsspråk, LED-belysning - Format:
rgb(röd, grön, blå) - Exempel:
rgb(59, 130, 246)
HSL
Beskriver en färg med hjälp av nyans (0–360 grader på färghjulet), mättnad (0–100 %) och ljushet (0–100 %).
- Används i: CSS (
hsl()-funktionen), färgteori, designsystem - Format:
hsl(nyans, mättnad%, ljushet%) - Exempel:
hsl(217, 91%, 60%)
Tips HSL är det mest intuitiva formatet för att justera färger. Vill du ha en ljusare nyans? Öka ljushetsvärdet. Vill du ha en mer dämpad ton? Minska mättnaden. Det gör HSL idealiskt för att bygga färgsystem och skapa variationer av en basfärg.
När du ska använda vilket format
| Situation | Rekommenderat format |
|---|---|
| Skriva CSS för hand | HEX (kort och bekant) eller HSL (enkelt att justera) |
| Specifikationer i designverktyg | HEX (branschstandard) |
| Dynamisk färghantering i kod | HSL (enklast att justera programmatiskt) |
| Kommunicera färger till kunder | HEX (mest allmänt igenkänt) |
| Trycksaksdesign | CMYK (separat från skärmformat) |
Utöver enskilda färger
När du har konverterat din färg kanske du vill utforska relaterade verktyg:
- Gradientgenerator: Skapa mjuka CSS-gradienter med dina färger. Ange två eller fler färger och få gradientkoden redo att klistra in i ditt stylesheet.
- Färgpalettgenerator: Generera harmoniska färgpaletter baserade på din startfärg. Få komplementära, analoga, triadiska och andra färgscheman automatiskt.
Dessa verktyg fungerar hand i hand med Färgkonverteraren för att hjälpa dig bygga ett komplett färgsystem för ditt projekt.
Viktigt Färger kan se olika ut på olika skärmar på grund av skärmkalibrering, färgprofiler och ljusstyrkeinställningar. När färgnoggrannhet är avgörande (varumärkesdesign, trycksaker) bör du alltid verifiera dina färger på målmediet, inte bara på din skärm.
Vanliga frågor
Vad är skillnaden mellan HEX och RGB?
De representerar samma information i olika notationer. HEX använder hexadecimalt (bas 16) och RGB använder decimalt (bas 10). #FF0000 och rgb(255, 0, 0) är båda rent rött.
Kan jag konvertera till CMYK för tryck? Skärmfärgformat (HEX, RGB, HSL) och tryckformat (CMYK) är fundamentalt olika färgmodeller. En matematisk konvertering finns, men för noggranna tryckfärger bör du använda ett professionellt färghanteringsverktyg.
Vad gäller transparens (alfa)?
HEX stöder alfa med två extra tecken (#3B82F680). RGB och HSL stöder det som rgba()- och hsla()-funktioner. Färgkonverteraren hanterar dessa format också.
Nästa steg
Med dina färger konverterade kan du prova Gradientgeneratorn för att skapa vackra CSS-gradienter, eller använda Färgpalettgeneratorn för att bygga ett komplett färgschema kring din valda färg.