Extrahiere dominante Farben aus jedem Foto und erstelle perfekte Design-Harmonien, exportierbar nach CSS und Tailwind.
Von visueller Inspiration zum Code in 3 Schritten.
Wähle ein beliebiges Foto, einen Screenshot oder ein Design, das Du liebst.
Unser Algorithmus extrahiert die 5 dominanten Farben und berechnet ihre Harmonien (Komplementär, Triaden).
Klicke, um den HEX-Code zu kopieren, oder exportiere die vollständige Konfiguration für Tailwind CSS.
Alles, was Du für Dein Designsystem brauchst.
Wir wählen nicht einfach zufällige Pixel. Wir identifizieren visuell dominante Töne aus dem Bild.
Kreative Blockade? Generiere mit einem Klick unendlich viele zufällige Paletten mit gültigen Harmonien.
Berechne automatisch komplementäre und analoge Farben für jeden extrahierten Ton.
Kopiere das exakte JSON-Objekt zum Einfügen in Deine `tailwind.config.js`-Datei.
Erhalte CSS-Variablen (`:root`), die in jedem Webprojekt einsatzbereit sind.
Die Analyse erfolgt in Deinem Browser. Dein Inspirationsbild wird nie in die Cloud hochgeladen.
Wie Du diese Paletten in Deinen Projekten verwendest.
Mathematische Balance für das menschliche Auge.
:hover-Zustände oder Dark Modes.Volle Kontrolle über Farbvariationen.
Null Branding-Fehler.
Median-Cut schlägt k-Means und naive Mittelung bei der Palette-Extraktion.
Hübsche Palette + schlechter Kontrast = unzugängliche Site.
Wähle das richtige Format für deinen Anwendungsfall
| Farbmodell | Format | Beispiel | Am besten für | |
|---|---|---|---|---|
| HEX | #RRGGBB | Schnelles Kopieren/Einfügen | Allgemeines Webdesign | |
| RGB | rgb(r, g, b) | Digitale Bearbeitung | Bildschirmanzeige | |
| HSL | hsl(h, s%, l%) | Farbton-Anpassung | Designsysteme | |
| Tailwind | JSON-Objekt | Konfiguration | Frontend-Entwickler |
Schnelle Antworten zum Werkzeug
theme.extend.colors-Abschnitt Deiner tailwind.config.js-Datei ein. Das erstellt automatisch Klassen wie bg-primary oder text-accent. --brand-primary, --brand-secondary, etc. Für maximale Treue arbeite mit der ursprünglichen Vektorquelle (SVG), wenn Du sie hast, da JPG-Kompression Logo-Farben um 1-2% pro Kanal verschieben kann.