Udtræk dominerende farver fra ethvert foto og lav perfekte designharmonier, der kan eksporteres til CSS og Tailwind.
Fra visuel inspiration til kode på 3 trin.
Vælg ethvert foto, skærmbillede eller design, du kan lide.
Vores algoritme udtrækker de 5 dominerende farver og beregner deres harmonier (komplementære, triader).
Klik for at kopiere HEX-koden, eller eksporter komplet konfiguration til Tailwind CSS.
Alt hvad du behøver til dit designsystem.
Vi vælger ikke tilfældige pixels. Vi identificerer de visuelt dominerende toner i billedet.
Skaberblokering? Generer uendeligt mange paletter tilfældigt med gyldige harmonier i ét klik.
Beregn automatisk komplementære og analoge farver for hver udtrukket tone.
Kopier det nøjagtige JSON-objekt at indsætte i din `tailwind.config.js`-fil.
Download CSS-variabler (`:root`) klar til brug i ethvert webprojekt.
Analysen sker i din browser. Dit inspirationsbillede uploades aldrig til skyen.
Sådan bruger du disse paletter i dine projekter.
Matematisk balance for det menneskelige øje.
Fuld kontrol over farvevarianter.
Nul brandfejl.
Median-cut slår k-means og naivt gennemsnit i paletekstraktion.
Smuk palet + dårlig kontrast = utilgængeligt websted.
Vælg det rigtige format til din brug
| Farvemodel | Format | Eksempel | Bedst til | |
|---|---|---|---|---|
| HEX | #RRGGBB | Hurtig kopier/indsæt | Generel webdesign | |
| RGB | rgb(r, g, b) | Digital manipulation | Skærmvisning | |
| HSL | hsl(h, s%, l%) | Nuancejustering | Designsystemer | |
| Tailwind | JSON-objekt | Konfiguration | Frontend-udviklere |
Hurtige svar om værktøjet
theme.extend.colors i din tailwind.config.js-fil. Det opretter klasser som bg-primary eller text-accent automatisk. --brand-primary, --brand-secondary osv. For maksimal nøjagtighed skal du arbejde fra den oprindelige vektorkilde (SVG), hvis du har den, da JPG-komprimering kan flytte logoets farver 1-2% pr. kanal.