ToolDecks färgverktyg låter dig konvertera mellan färgformat, kontrollera tillgängliga kontrastförhållanden, generera paletter, bygga CSS-gradienter och slå upp färgnamn eller Tailwind-klasser direkt i din webbläsare. Color Converter hanterar HEX, RGB, HSL och HSV i båda riktningarna. Contrast Checker testar efterlevnad av WCAG 2.1 AA och AAA. Palette Generator skapar komplementära, analoga, triadiska och tetradiska scheman utifrån valfri basfärg. CSS Gradient Generator genererar klar att kopiera-kod för linjära och radiella gradienter. Color Name Finder matchar valfritt värde mot närmaste CSS-namngivna färg, och Tailwind Color Finder mappar godtyckliga färger till Tailwind-verktygsklasser. Alla verktyg körs på klientsidan utan att data skickas till någon server.
Vad är färgverktyg?
Färgverktyg är hjälpmedel som hjälper utvecklare och designers att arbeta med digitala färgvärden. Varje färg på skärmen lagras som tal: tre kanaler för RGB (röd, grön, blå), ett hex-triplet för CSS-förkortning, eller vinkelbaserad färgton plus mättnad och ljushet för HSL. Att manuellt växla mellan dessa representationer är långsamt och felbenäget, särskilt när man också behöver ta hänsyn till alfatransparens eller nyare modeller som OKLCH.
Utöver formatkonvertering innefattar färgarbete tillgänglighetstestning, palettframtagning och gradientredigering. WCAG 2.1 definierar lägsta kontrastförhållanden (4,5:1 för normal text vid AA, 7:1 för AAA) som är svåra att verifiera med blotta ögat. Att generera harmoniska färgscheman kräver exakta vinkelberäkningar på HSL-färghjulet. CSS-gradienter kräver korrekt syntax för riktning, färgstopp och reservvärden. Att göra allt detta manuellt i ett designsystem med dussintals tokens blir snabbt tidsödande.
Färgverktyg automatiserar dessa uppgifter. De tar emot en färg i ett format, utför beräkningarna och returnerar det resultat du behöver — oavsett om det är ett konverterat värde, ett godkänt/underkänt tillgänglighetsomdöme, en uppsättning harmoniska färgprover eller ett CSS-kodfragment. När verktyget körs i webbläsaren slipper du dessutom ladda upp känsliga designtokens till tredjepartstjänster.
Varför använda färgverktyg på ToolDeck?
ToolDecks färgverktyg körs helt i din webbläsare. Inga färgvärden lämnar din dator, inget konto krävs och varje verktyg laddas omedelbart utan att du behöver installera tillägg eller datorprogram.
🎨Konvertera format i ett steg
Klistra in en HEX-kod och få RGB-, HSL- och HSV-värden samtidigt. Du behöver inte koppla samman flera konverterare eller minnas konverteringsformler.
🔒Håll designtokens privata
All bearbetning sker på klientsidan. Dina varumärkesfärger, ej publicerade palettbeslut och interna designsystemvärden stannar på din enhet.
♿Testa tillgänglighet direkt
Kontrollera valfritt förgrunds-/bakgrundspar mot WCAG 2.1 AA- och AAA-tröskelvärdena för både normal och stor text. Få det exakta kontrastförhållandet, inte bara ett godkänd/underkänd-omdöme.
⚡Kopiera produktionsklar utdata
Varje verktyg genererar värden som du kan klistra in direkt i CSS, Tailwind-konfiguration eller designverktygets inmatningsfält. Ingen omformatering behövs.
Användningsfall för färgverktyg
Här är sex vanliga scenarier där ToolDecks färgverktyg sparar tid.
Underhåll av designsystem
När du uppdaterar ett designsystem får du ofta färger i HEX från en designer men behöver HSL för CSS custom properties.
Color Converter översätter mellan format så att du kan fylla i tokenfiler utan manuell matematik.
Tillgänglighetsgranskningar
Under en WCAG-granskning måste varje text/bakgrund-kombination uppfylla lägsta kontrastförhållanden.
Color Contrast Checker visar det exakta förhållandet och AA/AAA-statusen för både normal och stor textstorlek.
Utforskning av varumärkespaletter
Med utgångspunkt i en enstaka varumärkesfärg behöver du accentfärg- och neutralvarianter.
Color Palette Generator beräknar komplementära, analoga, triadiska och tetradiska harmonier så att du kan utvärdera alternativ innan du bestämmer dig för en palett.
CSS-bakgrundsstyling
Att bygga en hero-sektion eller kortbakgrund med en gradient kräver korrekt CSS-syntax för vinklar, färgstopp och leverantörsprefix.
CSS Gradient Generator låter dig bygga gradienten visuellt och kopiera koden.
Tailwind-migrering
När du migrerar ett projekt till Tailwind CSS behöver du mappa befintliga HEX- eller RGB-värden till närmaste Tailwind-verktygsklass.
Tailwind Color Finder hittar den närmaste matchningen och visar differensen så att du kan avgöra om approximationen är acceptabel.
Kodgranskning och dokumentation
Under en kodgranskning säger ett rått HEX-värde som #708090 ingenting vid en snabb blick.
Color Name Finder identifierar det som SlateGray, vilket gör granskningar och dokumentation mer läsbar.
Referens för CSS-färgmodeller
CSS stöder flera färgmodeller. Tabellen nedan sammanfattar de sex vanligaste formaten, deras syntax och typiska användningsfall. Alla dessa stöds av ToolDecks Color Converter.
| Modell | CSS-syntax | Kanaler | Värdeintervall | Typisk användning |
|---|
| HEX | #rrggbb | Röd, Grön, Blå | 00–ff per kanal | Vanligast i CSS, designöverlämnanden och varumärkesriktlinjer |
| RGB | rgb(r, g, b) | Röd, Grön, Blå | 0–255 per kanal | JavaScript canvas API, beräknade stilar, bildbehandling |
| HSL | hsl(h, s%, l%) | Färgton, Mättnad, Ljushet | 0–360 / 0–100% / 0–100% | Designtokens, temagenerering, programmatiska nyansvarianter |
| HSV | N/A (inte i CSS) | Färgton, Mättnad, Värde | 0–360 / 0–100% / 0–100% | Färgväljare (Photoshop, Figma), hårdvarufärgkalibrering |
| OKLCH | oklch(L C H) | Ljushet, Kroma, Färgton | 0–1 / 0–0.4 / 0–360 | Perceptuellt enhetliga paletter (CSS Color Level 4-specifikationen) |
| Named | t.ex. slategray | Mappas till RGB internt | 148 fördefinierade namn | Prototypframtagning, läsbar kod, snabba demonstrationer |
CSS Color Level 4 (W3C) definierar även funktionerna lab(), lch() och color(). HEX och RGB är alltjämt de mest brett stödda i webbläsare och designverktyg.
Hur väljer du rätt färgverktyg?
Varje färgverktyg löser ett specifikt problem. Använd guiden nedan för att hitta rätt verktyg för din uppgift.
- 1
Om du behöver konvertera en färg mellan HEX-, RGB-, HSL- eller HSV-format → Color Converter - 2
Om du behöver verifiera att ett text-/bakgrundsfärgpar uppfyller WCAG-tillgänglighetsstandarder → Color Contrast Checker - 3
Om du behöver generera en uppsättning harmoniska färger utifrån en enstaka basfärg → Color Palette Generator - 4
Om du behöver bygga en linjär eller radiell CSS-gradient och få koden → CSS Gradient Generator - 5
Om du behöver hitta det läsbara CSS-namn som är närmast ett givet färgvärde → Color Name Finder - 6
Om du behöver mappa en godtycklig färg till närmaste Tailwind CSS-verktygsklass → Tailwind Color Finder
Alla sex verktyg accepterar indata i flera format. Om du är osäker på vilket format din färg har, börja med Color Converter, som automatiskt identifierar HEX-, RGB-, HSL- och HSV-notation.
Vanliga frågor
Vad är skillnaden mellan HEX- och RGB-färgformat?
HEX och RGB representerar samma färgrymd. En HEX-kod som #ff6600 är en hexadecimal kodning av de tre RGB-kanalerna: ff = 255 (röd), 66 = 102 (grön), 00 = 0 (blå). Den enda skillnaden är notationen. HEX är mer kompakt i CSS-stilmallar, medan RGB är enklare att manipulera programmatiskt eftersom varje kanal redan är ett decimalt heltal.
När bör jag använda HSL istället för HEX eller RGB?
HSL separerar färgtonen (färgen i sig) från mättnad och ljushet. Det gör det enklare att skapa nyansvarianter: håll färgtonen konstant, sänk ljusheten för en mörkare nyans och höj den för en ljusare ton. Designsystem som genererar ljusa/mörka teman från en enstaka basfärg lagrar ofta tokens i HSL av just den anledningen. CSS custom properties kombineras också väl med HSL eftersom du kan åsidosätta enskilda kanaler.
Vilket kontrastförhållande kräver WCAG 2.1 för text?
WCAG 2.1 nivå AA kräver ett lägsta kontrastförhållande på 4,5:1 för normal text (under 18pt eller 14pt fet) och 3:1 för stor text (18pt+ eller 14pt+ fet). Nivå AAA höjer dessa tröskelvärden till 7:1 respektive 4,5:1. Dessa förhållanden beräknas från den relativa luminansen hos förgrunds- och bakgrundsfärgerna med den formel som definieras i WCAG 2.1 Success Criterion 1.4.3.
Hur många namngivna färger stöder CSS?
CSS definierar 148 namngivna färger, ärvda från SVG 1.1- och CSS3-färgspecifikationerna. Dessa sträcker sig från vanliga namn som red, blue och white till specifika namn som MediumSlateBlue, PapayaWhip och LavenderBlush. Namngivna färger mappas till fasta RGB-värden. CSS Color Level 4-specifikationen behåller samma 148 namn och lägger inte till några nya. Webbläsare känner också igen nyckelordet transparent (motsvarar rgba(0,0,0,0)).
Kan jag använda OKLCH-färger i CSS idag?
Ja. Funktionen oklch() stöds i Chrome 111+, Firefox 113+ och Safari 15.4+. OKLCH är en del av CSS Color Level 4-specifikationen publicerad av W3C. Dess främsta fördel gentemot HSL är perceptuell enhetlighet: två färger med samma ljushetsvärde i OKLCH ser faktiskt lika ljusa ut för det mänskliga ögat, vilket inte gäller för HSL. Det gör OKLCH till ett bättre val för att generera tillgängliga paletter med konsekvent upplevd ljusstyrka.
Vad är skillnaden mellan HSL och HSV?
HSL och HSV använder båda en cylindrisk representation med färgtonen som en vinkel, men de definierar ljusstyrka på olika sätt. I HSL är ljushet 50 % den rena färgen; 0 % är svart och 100 % är vit. I HSV är värde 100 % den rena färgen; 0 % är svart. HSV har inget inbyggt sätt att nå vitt utan att samtidigt minska mättnaden. Designers och färgväljare (Photoshop, Figma) använder typiskt HSV, medan CSS använder HSL som standard.
Hur hittar jag Tailwind-klassen för en godtycklig HEX-färg?
Tailwind CSS levereras med en fast palett på ungefär 220 färgklasser (22 nyanser gånger 10 skuggor vardera, plus svart, vitt och transparent). För att hitta närmaste klass för ett givet HEX-värde beräknar du det euklidiska avståndet i ett perceptuellt färgrum (som CIELAB eller OKLCH) mellan din färg och varje Tailwind-prov. Tailwind Color Finder på ToolDeck gör detta automatiskt och visar den närmaste matchningen tillsammans med färgskillnaden så att du kan bedöma om approximationen är tillräckligt bra.
Är det säkert att klistra in konfidentiella varumärkesfärger i ett onlineverktyg?
Det beror på verktyget. Vilket verktyg som helst som skickar dina indata till en server exponerar dessa värden i nätverkstrafik och serverloggar. ToolDecks färgverktyg körs helt i din webbläsare med JavaScript på klientsidan. Inga HTTP-anrop transporterar dina färgdata till någon server. Du kan verifiera detta genom att öppna webbläsarens Nätverks-flik medan du använder verktyget. För maximal försiktighet kan du också använda verktygen offline efter den första sidinladdningen.