Drücke die Leertaste, um harmonische Farbpaletten zu erzeugen, fixiere die Farben, die dir gefallen, und kopiere dann HEX-Codes oder exportiere CSS-Variablen, Tailwind und JSON. Alles entsteht in deinem Browser, und nichts wird hochgeladen.
Farbpalette generieren
Drücke die Leertaste, um harmonische Farbpaletten zu erzeugen, fixiere die Farben, die dir gefallen, und kopiere dann HEX-Codes oder exportiere CSS-Variablen, Tailwind und JSON. Alles entsteht in deinem Browser, und nichts wird hochgeladen.
Paletten werden in deinem Browser erzeugt und geprüft, und nichts wird hochgeladen. Ein Link zum Teilen enthält nur die Farbcodes im Teil hinter dem #, und deine Auswahl bei Modus, Stil und Größe wird nur auf diesem Gerät gemerkt.
Der Farbpaletten-Generator stellt Farben zusammen, die zueinander passen. Drücke die Leertaste oder die Schaltfläche „Generate“, und es erscheint eine neue Palette aus zwei bis zehn Farben – von rein zufälligen Farben, die so weit wie möglich auseinanderliegen, bis zu klassischen Harmonien rund um eine Basisfarbe: analog, komplementär, Split-Komplementär, triadisch, tetradisch, monochromatisch sowie Schattierungen und Aufhellungen. Fixiere jede Farbe, die dir gefällt, und die anderen ändern sich weiter um sie herum, gehe mit der Rückgängig-Funktion durch deine letzten dreißig Paletten zurück und ziehe die Farbfelder in eine neue Reihenfolge. Jede Farbe zeigt ihre HEX-, RGB- und HSL-Werte, die nächstgelegene benannte Farbe und ihren exakten WCAG-Kontrast gegenüber weißem und schwarzem Text. Ist eine Palette fertig, kopiere sie als HEX-Codes, CSS-Variablen, SCSS, Tailwind-Snippet oder JSON oder teile einen Link, der nur die Farbcodes enthält.
Zufällige Paletten in einem gewählten Stil (beliebig, lebhaft, Pastell, gedämpft, dunkel oder hell), bei denen die Farben stets deutlich auseinanderliegen
Ein Feld für die Basisfarbe, das jede Harmonie um deine Markenfarbe oder einen Lieblingston aufbaut
Schaltflächen zum Fixieren, die gewählte Farben an ihrem Platz halten, während der Rest neu erzeugt wird, sodass du eine Palette Schritt für Schritt verfeinern kannst
Zwei bis zehn Farben, Umsortieren per Ziehen oder mit Pfeilschaltflächen sowie Rückgängig und Wiederholen über die letzten 30 Paletten
HEX-, RGB- und HSL-Werte, die nächstgelegene benannte Farbe und der exakte WCAG-Kontrast von weißem und schwarzem Text auf jedem Farbfeld
Ein Kontrastprüfer, der jedes Paar aus Text- und Hintergrundfarbe deiner Palette nach AA und AAA bewertet
Export als HEX-Liste, CSS-Variablen, SCSS, Tailwind-Snippet oder JSON sowie ein Link zum Teilen, der nur die Farbcodes enthält
So verwendest du Farbpalette generieren
Wähle einen Modus und bei „Random“ einen Stil; ergänze eine Basisfarbe, wenn die Palette um eine herum aufgebaut werden soll
Drücke die Leertaste oder „Generate“, bis eine Farbe erscheint, die dir gefällt, und fixiere sie, damit sie bleibt, während sich die anderen ändern
Klicke ein Farbfeld an, um seinen HEX-Code zu kopieren, öffne seine Details für RGB, HSL und Kontrast und ziehe die Farbfelder in die gewünschte Reihenfolge
Prüfe den Textkontrast für ein beliebiges Paar, öffne dann „Export“ und kopiere die Palette als CSS-Variablen, SCSS, Tailwind oder JSON
Beispiel
Eingabe
Mode: Analogous · base color #2a9d8f · 5 colors
Ausgabe
#3d4dc3 #2b668a #2a9d8f #69d391 #5aca4b
White text: AA on #3d4dc3 (6.89) and #2b668a (6.23) · black text: AA or better on the other three
Analoge Farben liegen auf dem Farbkreis nebeneinander, bis zu 30 Grad voneinander entfernt. Die Kontrastverhältnisse verwenden die WCAG-Formel, sodass jedes Farbfeld dir sagt, welche Textfarbe darauf passt.
Häufige Fehler & Fehlerbehebung
Die Leertaste erzeugt keine neue Palette. — Die Leertaste erzeugt nur dann eine Palette, wenn keine Schaltfläche, kein Link und kein Textfeld den Tastaturfokus hat, weil diese die Leertaste für sich behalten. Drücke Tab, bis nichts mehr markiert ist, oder klicke auf „Generate“.
Die Schaltfläche „Generate“ ist ausgegraut. — Jede Farbe ist fixiert, es gibt also nichts mehr zu ändern. Löse mindestens eine Farbe mit ihrer Fixieren-Schaltfläche oder der Taste L.
Ein geteilter Palettenlink öffnet eine leere oder andere Palette. — Die Farben stehen im Teil der Adresse hinter dem #-Zeichen. Wenn eine Chat-App den Link gekürzt hat, kopiere die ganze Adresse erneut; ein Hash, der nicht aus zwei bis zehn gültigen sechsstelligen HEX-Codes besteht, wird ignoriert.
Das Tailwind-Snippet ändert meine vorhandenen Farben nicht. — Es fügt unter theme.extend.colors eine Palettengruppe hinzu. Füge es in das colors-Objekt deiner Konfiguration ein und nutze Klassen wie bg-palette-1 oder text-palette-3.
Häufig gestellte Fragen
Wie funktionieren die Harmoniemodi im Farbpaletten-Generator?
Jeder Modus wählt ausgehend von einem Grundfarbton Farbtöne in festen Abständen auf dem Farbkreis: Analoge Farben liegen bis zu 30 Grad auseinander, komplementär verwendet den gegenüberliegenden Farbton, Split-Komplementär die beiden Farbtöne daneben, triadisch verteilt drei Farbtöne im Abstand von 120 Grad und tetradisch vier Farbtöne im Abstand von 90 Grad. Monochromatisch, Schattierungen und Aufhellungen behalten einen Farbton bei und ändern seine Helligkeit und Sättigung, und „Random“ verteilt die Farben so weit auseinander wie möglich.
Wie generiere ich eine Farbpalette rund um meine Markenfarbe?
Tippe oder wähle deine Markenfarbe als Basisfarbe und wähle dann einen Harmoniemodus. Die Basisfarbe wird in die Palette gesetzt und bleibt fixiert, und die anderen Farben werden bei jedem Druck auf die Leertaste um sie herum aufgebaut. Wechsle zwischen analog, komplementär und triadisch, um zu sehen, wie weit sich die Palette von der Markenfarbe entfernen soll.
Wie behalte ich einige Farben und ändere den Rest im Farbpaletten-Generator?
Fixiere die Farben, die dir gefallen, mit der Fixieren-Schaltfläche auf einem Farbfeld oder der Taste L. Eine fixierte Farbe bleibt an ihrer Position, während um sie herum eine neue Palette erzeugt wird, und die Rückgängig-Funktion bringt dich zur vorherigen Palette zurück, falls die neue schlechter ist. Wenn du jede Farbe fixierst, ist „Generate“ deaktiviert.
Wie prüft der Farbpaletten-Generator den Textkontrast?
Er verwendet die WCAG-Formel, die die relative Leuchtdichte zweier Farben vergleicht. Normaler Text braucht ein Verhältnis von mindestens 4,5 zu 1 für AA und 7 zu 1 für AAA; großer Text braucht 3 zu 1 und 4,5 zu 1. Jedes Farbfeld zeigt das Verhältnis für weißen und schwarzen Text, und der Kontrastprüfer bewertet jedes Paar aus Text- und Hintergrundfarbe der Palette.
Wie exportiere ich eine Palette als CSS-Variablen oder für Tailwind?
Öffne den Bereich „Export“ und wähle ein Format. „CSS variables“ liefert einen :root-Block mit --color-1 bis --color-5, „SCSS“ liefert $color-Variablen, „Tailwind“ liefert eine Palettengruppe zum Einfügen in theme.extend.colors, und „JSON“ sowie die HEX-Liste liefern einfache Arrays. Jedes Format hat eine Kopierschaltfläche.
Kann ich eine mit dem Farbpaletten-Generator erstellte Palette teilen?
Ja. Die Adresse in deinem Browser enthält hinter einem #-Zeichen immer die aktuellen Farben, zum Beispiel #264653-2a9d8f-e9c46a, und „Copy link“ kopiert sie. Jeder, der sie öffnet, sieht dieselbe Palette. Der Teil hinter dem # wird nie an einen Server gesendet, und nur deine Auswahl bei Modus, Stil und Größe wird auf diesem Gerät gemerkt.
Verwandte Tools
Bild-Farbpaletten-Extractor — Extrahiere die dominante Farbe und eine Palette als HEX, RGB, HSL, CSS und Tailwind.
Color Format Converter — Jede CSS-Farbe zugleich zu HEX, RGB, HSL, OKLCH und mehr konvertieren.
Kontrast-Checker — Prüfe das WCAG-Kontrastverhältnis und ob AA/AAA zwischen zwei Farben bestanden wird.
Tailwind Color Generator — Eine Markenfarbe in eine 50-950 Tailwind-Skala in OKLCH mit Kontrast verwandeln.
CSS Gradient Generator — Lineare, radiale und konische Verläufe mit Live-Farbstopps gestalten.
Bild-Farbwähler — Über ein Bild fahren und einen Pixel als HEX, RGB und HSL greifen.