Farbpalette aus einem Bild
Fasse die auffälligsten Farben eines Bildes in einer kompakten Palette zusammen. Kopiere jeden HEX-Wert in eine Designdatei oder ein Stylesheet.
So extrahierst du eine Farbpalette
So holst du ein Farbschema aus einem einzigen Bild.
Bild auswählen
Wähle ein JPG-, PNG- oder WebP-Bild aus, das dein Browser öffnen kann.
Automatische Analyse ansehen
Nach der Dateiauswahl wird die Farbverteilung analysiert und die dominanten Farben werden zu einer Palette geordnet. Jede Farbe erscheint mit ihrem HEX-Wert.
Anzahl der Farben anpassen
Steuere über die Farben-Option, wie viele Farben die Palette zeigt. Wähle wenige für die Schlüsselfarben oder mehr, um das breitere Tonspektrum des Bildes zu sehen.
Kopieren und verwenden
Kopiere den HEX-Wert einer Farbe einzeln oder hole die ganze Palette mit „Alle kopieren“ auf einmal. Füge die Werte direkt in CSS, Design-Tools oder Dokumente ein.
Häufige Farben als Palette zusammenfassen
Das Werkzeug analysiert die Farbverteilung des Bildes und fasst dominante Farben in einer Palette zusammen. Das Ergebnis bietet einen Ausgangspunkt für Fotos, Logos, Illustrationen und Screenshots.
HEX-Farbwerte kopieren und wiederverwenden
Kopiere die HEX-Werte der Palette in Design oder Code. Prüfe Kontrast und Rollen der Farben anschließend passend zur Website, Präsentation oder zum Poster.
Wann eine Farbpalette hilft
Nutze die extrahierten Farben als Kandidaten und prüfe den Kontrast im fertigen Layout.
Farbschema für eine Website entwerfen
Extrahiere aus einem Foto oder einer Referenzseite Kandidaten für Hintergrund-, Text- und Akzentfarben. Prüfe für Text und Bedienelemente zusätzlich Helligkeitskontrast und Barrierefreiheitsanforderungen.
Marken-Moodboard aufbauen
Extrahiere Paletten aus mehreren Fotos, die zur Stimmung deiner Marke passen, und sammle sie. So entsteht ein kuratierter Satz von Markenfarb-Kandidaten für Logos, Verpackung und Social Content.
Präsentationsfarben vereinheitlichen
Wende die aus deinem Titelbild extrahierten Farben auf Überschriften, Formen und Diagramme an, und das ganze Foliendeck gewinnt an Einheitlichkeit.
Häufig gestellte Fragen
Wie viele Farben werden extrahiert?
Die Anzahl der aus einem Bild extrahierten Farben kann je nach Einstellung variieren. In der Regel reichen etwa 5 bis 10 repräsentative Farben, um die Stimmung eines Bildes zu erfassen. Zu wenige Farben geben die unterschiedlichen Farbtöne eines Bildes nur schwer wieder, zu viele lassen die Palette schnell unübersichtlich wirken. Für die Designarbeit ist eine Palette von rund fünf Farben am praktischsten, sodass du sie in Haupt-, Neben- und Akzentfarben aufteilen kannst.
In welchem Format kann ich die extrahierten Farben ansehen?
Die extrahierten Farben sind vor allem als HEX-Codes verfügbar. HEX ist das am häufigsten verwendete Farbformat in Webdesign und CSS, sodass es sich leicht kopieren und direkt in den Code einfügen lässt. Ist eine extrahierte Farbe zum Beispiel #0066cc, kannst du sie in CSS so verwenden.
.button {
background-color: #0066cc;
}Können sich die extrahierten Farben anders als im Originalbild anfühlen?
Das ist möglich. Die Palettenextraktion zieht repräsentative Farben aus dem gesamten Bild, daher können sie von der Farbe einer bestimmten Stelle abweichen, auf die du dich mit dem Auge konzentriert hast. Nimmt etwa eine Hintergrundfarbe einen großen Teil des Bildes ein, wird sie möglicherweise zuerst als repräsentative Farbe extrahiert. Wenn du die genaue Farbe an einer bestimmten Stelle prüfen möchtest, nutzt du am besten zusätzlich den Farbwähler.
Kann ich auch Bilder mit transparentem Hintergrund verwenden?
Ja, du kannst auch PNG-Bilder mit transparentem Hintergrund verwenden. Bei Bildern mit großen transparenten Bereichen kann jedoch die Art, wie die Transparenz behandelt wird, das Ergebnis stärker beeinflussen als die sichtbaren Farben. Bilder mit transparentem Hintergrund wie Logos oder Icons werden mit Fokus auf die farbigen Bereiche analysiert, sodass du eine genauere Palette erhältst.
Kann ich eine Palette aus einem Screenshot extrahieren?
Ja, du kannst auch aus Screenshots von Websites oder App-Bildschirmen eine Palette extrahieren. Wenn du eine Webseite, App-UI oder ein Banner-Design, das dir gefällt, aufnimmst und die Hauptfarben prüfst, hilft das beim Erstellen eines Designs mit ähnlicher Stimmung. Mischt ein Screenshot jedoch viele Elemente, werden Hintergrund-, Text- und Bildfarben womöglich zusammen analysiert. Es ist daher hilfreich, nur den benötigten Bereich auszuschneiden.