Extrahera dominerande färger från valfritt foto och skapa perfekta designharmonier som kan exporteras till CSS och Tailwind.
Från visuell inspiration till kod på 3 steg.
Välj valfritt foto, skärmdump eller design som du gillar.
Vår algoritm extraherar de 5 dominerande färgerna och beräknar deras harmonier (komplementära, triader).
Klicka för att kopiera HEX-koden, eller exportera fullständig konfiguration för Tailwind CSS.
Allt du behöver för ditt designsystem.
Vi väljer inte slumpmässiga pixlar. Vi identifierar de visuellt dominerande tonerna i bilden.
Skaparblockering? Generera oändligt många paletter slumpmässigt med giltiga harmonier i ett klick.
Beräkna automatiskt komplementära och analoga färger för varje extraherad ton.
Kopiera det exakta JSON-objektet att klistra in i din `tailwind.config.js`-fil.
Ladda ner CSS-variabler (`:root`) klara att användas i valfritt webbprojekt.
Analysen sker i din webbläsare. Din inspirationsbild laddas aldrig upp till molnet.
Hur du använder dessa paletter i dina projekt.
Matematisk balans för det mänskliga ögat.
Full kontroll över färgvarianter.
Noll varumärkesfel.
Median-cut slår k-means och naivt medelvärde i palettextraktion.
Vacker palett + dålig kontrast = otillgänglig sida.
Välj rätt format för din användning
| Färgmodell | Format | Exempel | Bäst för | |
|---|---|---|---|---|
| HEX | #RRGGBB | Snabb kopiera/klistra | Allmän webbdesign | |
| RGB | rgb(r, g, b) | Digital manipulation | Skärmvisning | |
| HSL | hsl(h, s%, l%) | Nyansjustering | Designsystem | |
| Tailwind | JSON-objekt | Konfiguration | Frontend-utvecklare |
Snabba svar om verktyget
theme.extend.colors i din tailwind.config.js-fil. Det skapar klasser som bg-primary eller text-accent automatiskt. --brand-primary, --brand-secondary osv. För maximal trohet, arbeta från originalvektorkällan (SVG) om du har den, eftersom JPG-komprimering kan flytta logotypens färger 1-2% per kanal.