Farbpalette aus Bild erstellen
Ziehen Sie ein Foto, einen Screenshot oder ein Logo hierher und erhalten Sie die dominanten Farben mit ihrem Anteil am Bild. Nehmen Sie exakte Pixel mit der Pipette auf, exportieren Sie die Palette für den Code und prüfen Sie, welche Farbpaare gut lesbar sind.
Sie brauchen eine Oberfläche, die gut aussieht und sich gut lesen lässt?
Wir gestalten und entwickeln Websites und Apps mit einem durchgängigen Farbsystem: Markenpalette, barrierefreier Kontrast und Design-Tokens, die Design und Entwicklung gemeinsam nutzen. Beschreiben Sie Ihr Projekt und erhalten Sie eine Schätzung.
Vielen Dank! Wir melden uns innerhalb eines Werktags.
Kurz gesagt: Laden Sie ein beliebiges Bild hoch. Das Tool findet die Hauptfarben per k-means-Clustering, zeigt, welchen Anteil des Bildes jede Farbe einnimmt, und lässt Sie exakte Pixel mit der Pipette aufnehmen. Exportieren Sie die Palette als HEX, RGB, HSL, CSS-Variablen, Tailwind-Config oder JSON und prüfen Sie den Kontrast zweier Farben nach WCAG 2.2. Alles läuft in Ihrem Browser, das Bild wird nicht hochgeladen.
So erstellen Sie eine Farbpalette aus einem Bild
- Bild hinzufügen. Ziehen Sie eine JPG-, PNG-, WebP-, GIF- oder AVIF-Datei auf die Seite, wählen Sie sie auf Ihrem Gerät aus oder fügen Sie einen Screenshot mit Strg+V ein. Kein Bild zur Hand? Klicken Sie auf „Beispielfoto testen“.
- Anzahl der Farben wählen. Fünf oder sechs Farben ergeben eine kompakte Markenpalette, acht bis zehn erhalten auch Nebentöne und Akzente. Die Liste ist nach Anteil am Bild sortiert; mit „hell nach dunkel“ sehen Sie sie als Skala.
- Exakte Farben aufnehmen. Klicken Sie auf eine beliebige Stelle im Bild, um das Pixel unter dem Cursor auszulesen und zur Palette hinzuzufügen. Per Tastatur: Bild fokussieren, Markierung mit den Pfeiltasten bewegen und Enter drücken.
- Kontrast prüfen. Die Prüfung darunter zeigt, welche Paare aus der Palette WCAG AA für Fließtext erfüllen. Klicken Sie auf ein Paar oder legen Sie beliebige Text- und Hintergrundfarben fest.
- Exportieren. Wählen Sie HEX, RGB, HSL, CSS, Tailwind v3, Tailwind v4 oder JSON und kopieren Sie den Code oder laden Sie ihn als Datei herunter.
Wie die Farben ermittelt werden
Das Bild wird auf 256 Pixel an der langen Seite verkleinert, danach werden die Farben im Farbraum CIELAB gruppiert, in dem Abstände dem wahrgenommenen Unterschied zweier Farben entsprechen. Das Tool nutzt k-means-Clustering mit k-means++-Startpunkten und einem festen Zufalls-Seed. Deshalb liefert dasselbe Bild immer dieselbe Palette, und eine große Hintergrundfarbe verdrängt keine kleinen, aber kräftigen Akzente. Der angezeigte Wert jeder Farbe ist der Mittelwert der echten Pixel ihrer Gruppe, keine gerundete „nächstliegende“ Farbe.
| Einstellung | Wann sinnvoll |
|---|---|
| 5–6 Farben | Markenpalette aus einem Logo oder Key Visual, Moodboards, Präsentationsthemen |
| 7–8 Farben | Themes für Websites und Apps: Hintergrund, Flächen, Text, Primär- und Sekundärakzente |
| 9–10 Farben | Illustrationen und detailreiche Fotos, Verlaufsstopps, Datenvisualisierung |
| Pipette | Exakte Farbe eines Buttons, Logos oder Textes in einem Screenshot |
Exportformate für Design und Entwicklung
Listen in HEX, RGB und HSL lassen sich direkt in Figma, Sketch oder jedes Farbfeld einfügen. CSS liefert Custom Properties in :root, bereit für eine Design-Token-Datei. Tailwind v3 ergänzt tailwind.config.js um eine Farbgruppe palette, sodass Sie bg-palette-1 schreiben können. Tailwind v4 nutzt den neuen Block @theme mit Variablen --color-palette-1. JSON enthält HEX, RGB, HSL und den Bildanteil jeder Farbe für Skripte und Dokumentation.
Kontrastprüfung nach WCAG 2.2
Der Farbkontrast ist das Verhältnis der relativen Leuchtdichte zweier Farben, von 1:1 bis 21:1. Das Erfolgskriterium 1.4.3 der WCAG 2.2 (Stufe AA) verlangt mindestens 4,5:1 für Fließtext und 3:1 für großen Text, also 24 px normal oder etwa 18,7 px fett. Stufe AAA (Kriterium 1.4.6) hebt die Schwelle auf 7:1 und 4,5:1. Kriterium 1.4.11 fordert 3:1 für Icons, Eingabefeldrahmen und andere Bedienelemente. Die Prüfung nutzt die exakte Formel aus dem Standard und rundet das Verhältnis nicht auf, daher gilt 4,49:1 als nicht bestanden.
Markenpaletten bestehen diese Prüfungen selten auf Anhieb: helle Akzente auf Weiß und mittlere Blautöne mit weißem Text sind die üblichen Probleme. Wenn Sie ein Designsystem aufbauen oder ein Produkt neu gestalten, unterstützt Sie unser Team beim Design und der Entwicklung von Websites und Web-Apps. Für eine schnelle Prüfung bestehender Seiten nutzen Sie den Barrierefreiheits-Scan.
Häufige Fragen
Wie erhalte ich die Farbpalette eines Bildes?
Laden Sie das Bild auf dieser Seite hoch oder fügen Sie es ein. Das Tool findet 5 bis 10 dominante Farben und zeigt ihre HEX-Codes und ihren Anteil am Bild. Klicken Sie auf eine Farbe, um ihren HEX-Code zu kopieren, oder exportieren Sie die ganze Palette als CSS, Tailwind oder JSON.
Wie finde ich den HEX-Code einer Farbe in einem Bild?
Klicken Sie mit der Pipette auf die gewünschte Stelle im Bild. Das Tool zeigt die HEX-, RGB- und HSL-Werte genau dieses Pixels; Sie können den Code kopieren oder die Farbe zur Palette hinzufügen. Auf dem Smartphone tippen Sie auf das Bild, per Tastatur bewegen Sie die Markierung mit den Pfeiltasten und drücken Enter.
Wird mein Bild auf einen Server hochgeladen?
Nein. Das Bild wird in Ihrem Browser auf ein Canvas gezeichnet, und die Farben werden in einem Web Worker auf Ihrem Gerät berechnet. Nichts wird an unseren Server gesendet, und das Bild wird nach dem Schließen der Seite nirgends gespeichert.
Warum ist die Palette jedes Mal gleich?
Das Clustering verwendet einen festen Zufalls-Seed. Dasselbe Bild mit derselben Farbanzahl liefert daher immer dieselbe Palette. So können Sie eine Palette bedenkenlos mit Ihrem Team teilen oder später neu erzeugen.
Welches Kontrastverhältnis brauche ich für Text?
Für WCAG 2.2 Stufe AA: mindestens 4,5:1 für normalen Text und 3:1 für großen Text (24 px oder etwa 18,7 px fett). Für Stufe AAA: 7:1 und 4,5:1. Icons, Eingabefeldrahmen und Fokusindikatoren brauchen mindestens 3:1 zum Hintergrund.
Kann ich die Palette in Tailwind CSS verwenden?
Ja. Wählen Sie „Tailwind v3“ für eine Farbgruppe in tailwind.config.js oder „Tailwind v4“ für einen @theme-Block mit Variablen --color-palette-*. Danach können Sie Klassen wie bg-palette-1 und text-palette-2 verwenden.
Welche Bildformate werden unterstützt?
JPG, PNG, WebP, GIF, AVIF und BMP bis 50 MB. Transparente Pixel werden ignoriert, ein Logo auf transparentem Hintergrund liefert also nur die Farben des Logos. Für Farben aus einer SVG-Datei wandeln Sie diese zuerst in PNG um.