Online Farbpaletten Generator Tool

Eine gemeinsame Palette sorgt für ein einheitliches Erscheinungsbild, beschleunigt die Übergabe an Entwicklung und ersetzt zufällige Hex-Werte.

Vorteile

• Konsistenz: Gleiche Akzente auf allen Oberflächen.
• Marke: Farben aus Fotos und Moodboards übernehmen.
• Tempo: Weniger Pipetten-Klicken pro Komponente.
• Themen: Referenzbild zu Variablen für Hell/Dunkel.
• Inspiration: Fotos liefern oft überraschende Nuancen.

Das Werkzeug liest jeden Pixel deines Bildes, sortiert ihn in ein Raster aus 262.144 Farbzellen und gruppiert diese Zellen zur gewünschten Anzahl Farbfelder. Weil danach nur noch mit den Zellen gearbeitet wird, ist jede Einstellungsänderung selbst bei 48 Megapixeln sofort sichtbar.

Typischer Ablauf

• Medien laden: Beginne mit einer klaren, gut belichteten Vorlage, damit die dominanten Farben aussagekräftig sind.
• Pixel lesen: Jeder Pixel wird gezählt, in voller Auflösung; vollständig transparente Pixel bleiben standardmäßig außen vor, damit der Hintergrund eines Logos kein Farbfeld wird.
• Gruppieren: Ähnliche Farben werden nach dem gewählten Algorithmus und der gewählten Stimmung zusammengefasst.
• Messen: Jede Gruppe meldet die exakte Durchschnittsfarbe ihrer eigenen Pixel und ihren Flächenanteil am Bild.
• Ausliefern: Hex-Codes kopieren, in Code-Formate exportieren und Kontrast sowie Farbenblindheit prüfen.

Die meisten Extraktoren quantisieren, bevor sie ein Ergebnis melden: Sie runden jeden Kanal in einen Bucket und geben dessen Wert zurück. Ein reines #ff0000 wird so zu #fa0000 – einer Farbe, die im Bild nirgends vorkommt. Für ein Werkzeug, dessen gesamte Ausgabe ein Hex-Code für dein Stylesheet ist, ist genau das die eine Sache, die nicht falsch sein darf.

• Das Gruppieren ist näherungsweise und schnell; das Melden ist exakt. Beides sind bewusst getrennte Schritte.
• Jedes Farbfeld ist der arithmetische Mittelwert der ihm zugeordneten echten Pixel, in voller Genauigkeit summiert.
• Ein einfarbiges Bild liefert genau ein Farbfeld mit genau dieser Farbe.
• Der Anteil unter jedem Farbfeld ist eine echte Pixelzählung: sechs gleich breite Streifen ergeben je 16,7 %.
• Gleiches Bild und gleiche Einstellungen ergeben immer dieselbe Palette. Nichts hier verwendet einen Zufallsstartwert.

Alle drei lesen jeden Pixel und melden exakte Farben. Sie unterscheiden sich darin, worauf sie optimieren – und was passt, hängt davon ab, was du aus dem Bild holen willst.

• K-Means: die Voreinstellung. Gruppiert Farben so, dass die Felder wahrnehmungsmäßig möglichst weit auseinanderliegen – das Richtige für ein Foto.
• Frequenz: verankert jedes Feld auf einer Farbe, die tatsächlich viel Fläche einnimmt. Die richtige Antwort auf „Welche Markenfarbe steckt in diesem Logo?“, wo ein Mittelwert zwischen zwei echten Farben genau falsch wäre.
• Median-Cut: teilt nach gleicher Pixelanzahl, sodass ein kleiner heller Akzent anteilig mehr Raum bekommt als bei den anderen beiden. Der klassische Quantisierer und die Wahl für Dithering.

Eine Stimmung ändert, welche Farben gewählt werden, nie wie eine gewählte Farbe angegeben wird. Sie gewichtet die Farben des Bildes vor dem Gruppieren, sodass dasselbe Foto mehrere wirklich verschiedene und gleichermaßen ehrliche Paletten liefert.

• Neutral: nur Flächenanteil – die Farben, die den größten Teil des Bildes ausmachen.
• Colorful: bevorzugt Sättigung bei beliebiger Helligkeit, für die lebendigste Lesart des Bildes.
• Bright: bevorzugt Farben, die zugleich hell und satt sind.
• Muted: bevorzugt entsättigte Mitteltöne und meidet Schwarz und Weiß, die beiden am wenigsten gedämpften Farben überhaupt.
• Deep: bevorzugt dunkle, satte Juwelentöne.
• Dark: bevorzugt Schattentöne bei beliebiger Sättigung.

Eine Harmonie ist eine Farbtondrehung, die alles andere festhält. Dass sie in LCH statt in HSL passiert, ist wichtiger als es klingt: Dreht man ein Blau in HSL um 180 Grad, entsteht ein Gelb mit nominell gleicher Helligkeit, das rund neunmal heller wirkt.

• Sechs Regeln: Komplementär, Analog, Triadisch, Split-Komplementär, Tetradisch und Monochrom.
• Die Buntheit wird übernommen: eine gedämpfte Basis ergibt gedämpfte Harmonien, eine kräftige ergibt kräftige.
• Farben außerhalb des Farbraums werden abgebildet, nicht abgeschnitten: die Buntheit wird reduziert, bis die Farbe passt, damit der Farbton erhalten bleibt.
• Nahezu neutrale Farben sagen es: ein Grau hat keinen sinnvollen Farbton, deshalb zeigt das Werkzeug die Tonwertskala statt ein erfundenes Komplement.
• Ton- und Schattenskalen: elf wahrnehmungsgleichmäßige Stufen je Farbfeld, im 50–950-Schema, das jedes CSS-Framework erwartet.

Eine Palette, die gut aussieht und nicht lesbar ist, ist nicht fertig. Beide Prüfungen sind in jedem Plan kostenlos, denn eine Barrierefreiheitsprüfung hinter einer Bezahlschranke ist schlechter als gar keine.

• WCAG-Kontrast für jedes Paar der Palette – für alle, nicht für eine Stichprobe der ersten.
• Jede Farbe gegen Schwarz und Weiß, mit dem besseren Ergebnis benannt, damit klar ist, welche Textfarbe eine Schaltfläche braucht.
• AA-, AA-groß- und AAA-Ergebnisse je Paar.
• Protanopie, Deuteranopie und Tritanopie über die gesamte Palette simuliert.
• Jedes Paar, das nicht mehr unterscheidbar ist, wird mit dem gemessenen Farbabstand genannt.

Der Export ist das Produkt – niemand extrahiert eine Palette, um sie anzusehen. CSS, JSON und eine einfache Hex-Liste sind kostenlos; die Formate, die eine Palette in andere Software tragen, gehören zu Pro.

• CSS und SCSS: Custom Properties und Variablen, jeweils mit dem nächstliegenden Farbnamen und dem Flächenanteil kommentiert.
• Tailwind: ein @theme-Block, direkt zum Einfügen in ein Tailwind-v4-Stylesheet.
• JSON: jedes Farbfeld mit RGB-, Lab- und LCH-Koordinaten, Anteil und nächstliegendem CSS-Farbnamen.
• ASE: Adobe Swatch Exchange, für Illustrator, InDesign und Photoshop.
• GPL: das GIMP-Palettenformat, auch von Inkscape, Krita und Scribus gelesen.
• SVG und PNG: eine teilbare Farbkarte, wenn die Palette in einen Chat statt in eine Codebasis geht.

Schritte von Upload bis Export.

1. Bild hinzufügen. Ziehe eine Datei auf die Seite, füge sie aus der Zwischenablage ein (Strg+V oder ⌘V) oder klicke auf Durchsuchen. Die Palette erscheint, sobald das Bild gelesen ist.
2. Einstellungen wählen. Wähle einen Algorithmus (Frequenz, K-Means oder Median-Cut), eine Farbstimmung und die Anzahl der Farben – im kostenlosen Plan drei bis acht.
3. Verfeinern. Ersetze mit der Pipette einzelne Farbfelder durch eine Farbe aus dem Bild und prüfe Kontrastraster und Farbenblindheits-Bericht, bevor du dich festlegst.
4. Nutzen oder exportieren. Kopiere Hex-Werte, lade CSS, SCSS oder JSON herunter und prüfe Harmonie- und Kontrasthinweise, bevor du ein Schema festlegst.

Wenige Kernfarben und frühe Kontrastprüfung sparen Nacharbeit.

Orientierung

• Die meisten UI-Systeme kommen mit etwa drei bis zehn Kernfarben aus, damit Zustände und Neutraltöne lesbar bleiben.
• Frequenz-Extraktion bevorzugt Farben mit großer Fläche, was Titelbildern hilft.
• Clustering-Verfahren finden feine Verläufe, die eine einzelne Pipettenprobe verfehlen würde.
• Exporte als CSS oder JSON passen direkt in Design-Tokens und Komponentenbibliotheken.
• Ein 12-Megapixel-Foto wird in deutlich unter einer Sekunde vollständig gelesen; eine Einstellungsänderung danach kostet einen Bruchteil davon, weil die Pixel nicht erneut gelesen werden.

Empfehlungen

Ergebnis als Ausgang nutzen und mit Brand- und A11y-Regeln verfeinern.

• Nutze hochauflösende Vorlagen ohne starke Kompressionsartefakte für sauberere Mittelwerte.
• Erhöhe die Farbanzahl bei Szenen mit vielen Materialien; reduziere sie für minimalistische Layouts.
• Bewahre Rohexporte und eine kurze README mit Token-Namen auf, damit Teammitglieder wissen, wie zu importieren ist.
• Prüfe Text und Icons auf echten Hintergründen, nicht nur an isolierten Farbfeldern.
• Nutze die Pipette, wenn das automatische Ergebnis nah dran ist, du aber genau den Pixel willst, den du im Sinn hattest.

Einsatzgebiete

• Web: Landingpages aus Kundenfotos.
• Branding: Farben aus Kampagnenvisuals.
• Räume: Inspiration für Oberflächen.
• Mode: Saisonale Boards.
• Kunst: Farbverteilung analysieren.

• Farbauswahl
• Hex zu RGB
• RGB zu Hex
• Bildanalyse
• Farbkorrektur
• Bild komprimieren
• Alle Konverter