Färgkonverterare – HEX, RGB, HSL, HSV, CMYK med WCAG-kontrast
Komplett färgkonverterare med tillgänglighetskontroll
Vår färgkonverterare gör fyra saker som du sällan hittar samlat på samma plats: konverterar mellan alla vanliga färgformat, mäter WCAG-kontrast mot vit och svart bakgrund, genererar sex färgscheman baserat på färgcirkeln och visar elva nyans-steg från ljust till mörkt. Allt sker direkt i webbläsaren utan att data skickas till någon server.
Verktyget är byggt för designers, utvecklare och alla som arbetar med färg digitalt eller i tryck. Stödjer både svensk färgkultur (kalla, naturnära toner) och internationella konventioner.
Fem färgformat i ett gränssnitt
- HEX: webbens standard, sex hexadecimala tecken efter #-tecknet
- RGB: röd, grön och blå mellan 0 och 255 (additiv färgblandning)
- HSL: färgton, mättnad och ljushet (intuitivt för färgjustering)
- HSV: färgton, mättnad och värde (närmar sig hur människor uppfattar färg)
- CMYK: cyan, magenta, gul och svart (tryckindustrins standard)
Varje färgkod har en kopiera-knapp som lägger värdet i urklipp. Klistra direkt in i CSS, Figma, Sketch, Adobe-program eller var du nu behöver det. Verktyget formaterar koderna med rätt prefix (rgb(), hsl() etc) så de fungerar direkt i CSS.
HEX, RGB och HSL: när används vad?
De tre vanligaste färgformaten på webben representerar samma information men på olika sätt. Förståelsen för när man bör använda vilket är central för effektiv designarbete.
HEX för statiska värden
HEX-koden består av sex hexadecimala tecken (0-9 och A-F) efter ett #-tecken. De första två representerar rött, de två mittersta grönt och de två sista blått. Eftersom hexadecimal har 16 möjliga värden per position blir varje par 0-255 i decimal, exakt samma intervall som RGB. HEX är webbens standard eftersom den är kompakt och stöds av alla CSS-versioner.
Använd HEX när du har en exakt färg som inte ska justeras, varumärkesfärger, ikoner, statiska element. #06B6D4 är till exempel cyan i Tailwind CSS och fungerar identiskt i alla webbläsare och designprogram.
RGB för transparens och programmatisk hantering
RGB anger samma färg men som tre tal mellan 0 och 255. Fördelen är att man kan lägga till alpha-kanal för transparens: rgba(6, 182, 212, 0.5) är cyan med 50 procents genomskinlighet. RGB är också enklare att manipulera programmatiskt eftersom värdena är decimala, perfekt när JavaScript ska ändra färger dynamiskt baserat på data.
HSL för designjusteringar
HSL beskriver färg på samma sätt som vi människor uppfattar den: vilken färgton (0-360 grader runt färgcirkeln), hur mättad färgen är (0-100 procent från grå till klar) och hur ljus den är (0-100 procent från svart till vit). Det gör HSL idealiskt när du vill skapa färgvarianter, sätt samma hue och sat men varierande lightness, så får du automatiskt en färgsvit som passar ihop.
I CSS Custom Properties (variabler) är HSL ofta att föredra för temasystem eftersom du kan justera bara en av de tre dimensionerna och få förutsägbara resultat. Vår nyans-skala längst ner i verktyget visar exakt detta, samma färgton i elva olika ljushetsgrader.
WCAG-kontrast: varför det spelar roll
WCAG (Web Content Accessibility Guidelines) är de internationella riktlinjerna för digital tillgänglighet. Sedan 2019 är WCAG 2.1-nivå AA juridiskt bindande för svenska offentliga aktörer enligt DOS-lagen (Lag om tillgänglighet till digital offentlig service). Sedan 28 juni 2025 omfattas även privata aktörer av tillgänglighetskraven genom Lag (2023:254) om vissa produkters och tjänsters tillgänglighet, som implementerar EU:s European Accessibility Act (EAA). Lagen gäller bland annat e-handel, banker, streamingtjänster och appar, undantaget mikroföretag med färre än 10 anställda och under 2 miljoner euro i omsättning.
Kontraststandarder
| Nivå | Brödtext | Stor text (≥18 pt) | Status |
|---|---|---|---|
| AAA | 7,0:1 eller högre | 4,5:1 eller högre | Förstärkt nivå |
| AA | 4,5:1 eller högre | 3,0:1 eller högre | Lagkrav i Sverige |
| A (otillräcklig) | Under 4,5:1 | Under 3,0:1 | Bör undvikas |
Vanliga fel
Ljusgrå text på vit bakgrund är klassikern. Webben är full av designs där grå text i nyanser som #999 eller #AAA placeras på vit bakgrund, kontrasten ligger då mellan 2,8 och 2,5, långt under AA-kravet. Den ser möjligen elegant ut för normalseende men är oläslig för många med synnedsättning, särskilt äldre.
Verktyget visar omedelbart om din valda färg klarar kraven mot vit eller svart bakgrund. Använd det innan du skickar designspecen till utvecklare, eller när du diskuterar tillgänglighet med en kund.
Färgscheman med harmonier från färgcirkeln
Färgcirkeln är ett verktyg som funnits sedan 1700-talet och bygger på hur människor uppfattar färgrelationer. Vissa kombinationer ”fungerar” estetiskt eftersom hjärnan tolkar dem som harmoniska. Vår färgkonverterare genererar sex sådana scheman automatiskt baserat på din valda färg.
Komplementfärg (180°)
Den färg som ligger rakt motsatt på cirkeln. Skapar maximal kontrast och energi. Fungerar bra för knappar och CTA mot bakgrunder, men kan bli skrikigt om du använder båda färgerna i lika stora ytor.
Triadiska färger (3 × 120°)
Tre färger jämnt fördelade. Mycket levande och balanserade. Klassiskt mönster inom barnböcker, sportlogotyper och energiska varumärken.
Splitkomplement (komplementfärg ±30°)
Mjukare än ren komplementfärg. Behåller kontrasten men minskar visuell stress. Bra utgångspunkt för seriösa varumärken.
Analoga färger (±30° från huvudfärg)
Tre närliggande färger på cirkeln. Skapar lugn och samhörighet. Vanligt i naturfotografi och organiska designs (skogar, soluppgångar, hav).
Tetradisk (4 färger i fyrkant)
Fyra färger som bildar en rektangel på cirkeln. Mest komplext schema att balansera men med rikast paletten. Lämpar sig för design med många kategorier (dashboards, infografik).
Monokromt schema
Samma färgton i tre olika ljushetsgrader. Den säkraste vägen till en proffsig design, låter färgen göra jobbet utan distraktion. Vanligt inom minimalistiska och tekniska gränssnitt.
CMYK och tryck
CMYK är pigmentbaserad färgblandning för fysiskt tryck. Cyan, magenta, gul och svart (kallad ”key” på engelska) blandas i olika mängder för att skapa en färg på papper. Det är en subtraktiv process, pigmenten absorberar olika våglängder av ljus och det reflekterade ljuset blir färgen vi ser.
Varför ser tryck inte alltid likadan ut som skärm?
Skärmar visar färg i RGB (additiv blandning av ljus), tryck använder CMYK (subtraktiv blandning av pigment). Färgrymderna är olika stora, RGB kan visa färger som CMYK inte kan trycka och vice versa. Klart blå och klart grön är särskilt svåra att överföra till tryck, medan svart och naturliga jordtoner fungerar nästan identiskt.
Verktyget visar matematisk konvertering, men vid kommersiellt tryck bör du alltid använda färgprofiler från tryckeriet (ICC-profiler) och göra provtryck innan stora upplagor. CMYK-värdena vi visar är en uppskattning enligt standardalgoritm, inte en exakt återgivning för en specifik tryckpress.
Praktiska användningsområden
Webbdesign
- Konvertera designerns HEX-värden till HSL för CSS-variabler
- Snabbkoll om huvudfärgen klarar WCAG mot vit bakgrund
- Generera hovervarianter automatiskt via nyans-skalan
- Hitta komplementfärger för accent och CTA-knappar
Grafisk design
- Översätt skärmbild till tryckbar CMYK-uppskattning
- Bygg färgsystem från en huvudfärg via scheman
- Verifiera att text uppfyller läsbarhetskrav i broschyrer
Varumärkesarbete
- Dokumentera primär färg i alla tänkbara format för stilguide
- Hitta sekundär- och accentfärger som harmoniserar
- Kontrollera tillgänglighet på all text i logotyp
Andra verktyg på Monc
Vi har byggt tolv kostnadsfria verktyg som löser vardagsproblem direkt i webbläsaren. Testa till exempel: dagräknare · lösenordsgenerator · åldersräknare · hashverktyg. Alla körs lokalt utan att data lämnar din enhet.
Källor och vidare läsning
