Farben aus Bild extrahieren
📁 Zum Hochladen klicken oder Bild hier ablegen
JPG, PNG, WebP — bis 10 MB
Dein Bild verlässt niemals dein Gerät — alle Verarbeitungen erfolgen in deinem Browser.
Palette exportieren
WCAG-Kontrastprüfung
Gespeicherte Paletten
Wie die Palettengenerierung funktioniert
Jede Palette wird im HSL-Farbraum generiert — Farbton (0–360°), Sättigung (0–100 %) und Helligkeit (0–100 %). HSL ist intuitiv für Harmonieregeln, da Farbtonbeziehungen auf dem Winkelabstand im Farbkreis basieren.
Analog
Farbtöne innerhalb von 30° zueinander. Harmonisch und beruhigend. Ideal für Natur- und Ozean-Themen.
Komplementär
Zwei Farbtöne 180° auseinander. Hoher Kontrast und lebendig. Häufig im Sport-Branding.
Triadisch
Drei Farbtöne gleichmäßig 120° verteilt. Ausgewogen und farbenfroh. Gut für verspielte Marken.
Monochrom
Gleicher Farbton, variierte Sättigung und Helligkeit. Elegant und stimmig. Ideal für minimalistisches Design.
Split-Komplementär
Ein Basisfarbton plus zwei Farbtöne je 150° versetzt auf beiden Seiten. Kontrast ohne Spannung.
Tetradisch
Vier Farbtöne in 90°-Abständen. Reich und komplex. Funktioniert am besten, wenn eine Farbe dominiert.
Rechenbeispiel — Analoge Palette
Ausgangsfarbton: H = 210° (ein Blau). Analoge Regel: 5 Farbtöne je 15° versetzt.
Farbtöne: 195°, 205°, 215°, 225°, 235°.
Sättigung: von 55 % bis 70 % variiert, für Tiefe. Helligkeit: von 45 % bis 70 % variiert, für Kontrast.
Ergebnis: eine harmonische Ozeanblau-Farbverlauf-Palette mit natürlichem Kontrast.
Farbpaletten-Tipps für Designer
- Die 60-30-10-Regel beachten. Die Hauptfarbe für 60 % des Designs verwenden (Hintergründe, große Flächen), eine Sekundärfarbe für 30 % (Bereiche, UI-Panels) und eine Akzentfarbe für 10 % (CTAs, Highlights). Eine 5-Farb-Palette passt natürlich zu dieser Regel.
- Kontrast für Text immer prüfen. Eine schöne Palette kann WCAG AA dennoch nicht bestehen, wenn Textfarbe und Hintergrund kein Kontrastverhältnis von mindestens 4,5:1 haben. Den eingebauten Kontrast-Checker oben nutzen.
- Die Palette im Einsatz begrenzen. 5 verfügbare Farben bedeuten nicht, alle 5 auf jedem Screen zu verwenden. Die meisten ausgefeilten Designs nutzen 2–3 Farben dominant und reservieren die anderen für spezifische Momente.
- Zuerst die Markenfarbe sperren. Wenn eine primäre Markenfarbe vorhanden ist, vor dem erneuten Generieren das Schloss-Symbol an dieser Farbfläche aktivieren — das Tool baut dann eine harmonische Palette um die gesperrte Farbe.
- Bildextraktion für Stimmungsanpassung. Ein Foto hochladen, das die gewünschte Stimmung einfängt (eine Landschaft, ein Produktbild, ein Lifestyle-Bild) — die extrahierte Palette fühlt sich bereits emotional zur Markenrichtung passend an.