Färgkonverterare

Vad är en färgkonverterare?

Färgkonverteraren är ett onlineverktyg som omvandlar färger direkt mellan HEX, RGB och HSL. Det är användbart när samma färg behöver behålla rätt ton i en webbdesign, ett designsystem, en komponentbibliotek eller en varumärkesguide utan att du räknar om värden manuellt.

Du kan skriva in ett färgvärde eller välja en färg visuellt i webbläsaren och får direkt motsvarande notation i de andra formaten. Verktyget låter dig dessutom kopiera enskilda värden eller färdig CSS, återanvända nyligen valda färger och göra samarbetet mellan design och frontend smidigare.

När verktyget är särskilt användbart

• Webbutveckling – Flytta färger från mockups till användbara värden i CSS, SCSS och design tokens
• UI/UX-design – Justera ljushet eller mättnad utan att lämna samma färgfamilj i en befintlig gränssnittston
• Designsystem – Dokumentera en färg konsekvent i HEX, RGB och HSL för designers och utvecklare
• Tillgänglighet – Kontrollera exakta färgvärden innan du bedömer kontrast och läsbarhet
• Arbete mellan verktyg – Hålla färger synkade mellan Figma, Photoshop, Illustrator och den slutliga implementationen
• Presentationer och varumärkesmaterial – Återanvänd projektets färger snabbt i slides, rapporter och visuella leverabler

Viktiga funktioner

• Omedelbar konvertering – När du ändrar HEX, RGB eller HSL uppdateras de andra två formaten direkt.
• Visuell färgväljare – Välj en färg direkt i webbläsaren och kontrollera resultatet i förhandsvisningen på en gång.
• Kopiera per format – Kopiera HEX, RGB, HSL eller hela CSS-deklarationen beroende på vad du behöver just nu.
• Lokal färghistorik – Nyligen använda färger sparas i webbläsaren så att du snabbt kan gå tillbaka till dem vid revisioner eller QA.
• Slumpfärg som startpunkt – Generera en ny referensfärg med ett klick när du vill testa varianter eller få idéer.
• Rimliga inmatningsgränser – RGB och HSL hålls inom giltiga intervall, och HEX fungerar även i förkortad form.

Så använder du färgkonverteraren

1. Välj startfärg – Använd färgväljaren eller skriv in ett HEX-, RGB- eller HSL-värde som du redan känner till.
2. Kontrollera förhandsvisningen – Se i det övre fältet att färgen verkligen passar din layout, komponent eller varumärkesprofil.
3. Läs av motsvarande format – Verktyget visar samma färg samtidigt i de tre vanligaste webbformaten.
4. Kopiera rätt resultat – Ta det format du behöver eller använd ”Kopiera CSS” för att klistra in färdig kod i din stylesheet.

Så tolkar du HEX, RGB och HSL

HEX

HEX är den vanligaste färgnotationen på webben och använder formen #RRGGBB. Varje teckenpar beskriver intensiteten av rött, grönt och blått i hexadecimal form, vilket gör formatet praktiskt för stylesheets, design tokens och teknisk dokumentation.

• Exempel: #D4AF37 för guld, #FF5733 för orange och #3498DB för blått
• Kortform: #FF0000 kan skrivas som #F00 när teckenparen upprepar samma symbol
• När det passar bäst: CSS, komponentdokumentation och snabb överlämning mellan design och utveckling

RGB

RGB beskriver färg via kanalerna röd, grön och blå med värden från 0 till 255. Det är särskilt användbart när färger ska manipuleras med skript, animeras eller jämföras med export från designverktyg.

• Exempel: rgb(212, 175, 55), rgb(255, 255, 255) och rgb(0, 0, 0)
• Princip: alla kanaler på 0 ger svart, alla på 255 ger vitt
• När det passar bäst: JavaScript, canvas, animationer och logik som arbetar per färgkanal

HSL

HSL ordnar färg efter nyans, mättnad och ljushet. Det gör formatet extra användbart när du vill göra en färg ljusare, mörkare eller mjukare utan att byta färgfamilj.

• Exempel: hsl(46, 67%, 52%) för guld och hsl(0, 100%, 50%) för ren röd
• Nyans (H): rör sig över ett hjul från 0° till 360°
• Mättnad (S): anger intensiteten mellan 0 % och 100 %
• Ljushet (L): placerar färgen mellan svart, ren ton och vitt

Praktiska tips

• Bygg varianter med HSL – Behåll samma nyans och arbeta främst med ljusheten för hover states och mjukare bakgrunder.
• Spara viktiga referenser – Historiken gör det enklare att jämföra flera alternativ utan att skriva in samma koder igen.
• Kontrollera kontrast före publicering – En färg som fungerar för varumärket är inte automatiskt tillräckligt läsbar i text och CTA:er.
• Välj format efter arbetsflöde – HEX är smidigt för CSS, RGB för skript och HSL för att utforska visuella varianter.

Detaljer

Resultaten från färgkonverteraren beräknas utifrån värdet du matar in och vilket källformat du börjar med.

Om färgen ingår i en brand guide eller en tillgänglighetsgranskning bör du även stämma av den mot projektets officiella referens.

Vanliga frågor