Farbpaletten-Generator
Die Leertaste liefert eine neue Palette; sperren Sie, was gefällt, und machen Sie weiter – oder leiten Sie ein klassisches Schema aus Ihrer Markenfarbe ab. Mit Kontrastprüfung und Export.
- Leertaste = neue Palette
- Farben sperren
- Kontrastraster
- Export
Der wahrnehmungsgetreue Farbkreis hält alle Farben für das Auge gleich hell.
Drücken Sie die Leertaste für eine neue Palette. Sperren Sie Farben, die bleiben sollen; ein Klick auf einen Code kopiert ihn.
Kontrast zwischen den Farben
Jede Zelle zeigt eine Zeilenfarbe als Text auf einer Spaltenfarbe. AA verlangt 4,5 : 1 für normalen Text, AAA 7 : 1.
Vorschau für Farbfehlsichtigkeit
Exportieren
So erzeugen Sie eine Farbpalette
Schnell erkunden, dann verfeinern.
- 1
Erzeugen
Drücken Sie die Leertaste oder „Erzeugen“ für eine frische Palette – oder wählen Sie ein Schema und eine Basisfarbe.
- 2
Sperren und verfeinern
Sperren Sie die passenden Farben, erzeugen Sie die übrigen neu, ändern Sie jede Farbe mit dem Farbwähler, fügen Sie Spalten hinzu oder entfernen Sie welche.
- 3
Prüfen und exportieren
Sehen Sie sich Kontrastraster und Farbenblind-Vorschau an und exportieren Sie als CSS-Variablen, Tailwind-Konfiguration oder Bild.
Von der ersten Idee zu nutzbaren Tokens
In OKLCH erzeugt, für ausgewogene Helligkeit.
Gute Zufallspaletten
Kein Rauschen: Die Farben liegen auf einer Harmonie mit bewusster Spreizung von hell nach dunkel – die meisten Ergebnisse sind direkt brauchbar.
Klassische Farbschemata
Analog, komplementär, teilkomplementär, triadisch, tetradisch, Quadrat, monochrom sowie Aufhellungen und Abdunklungen aus jeder Basisfarbe.
Sperren, was gefällt
Gesperrte Farben bleiben, während sich alles andere ändert. Neue Farben entstehen passend dazu.
Kontrastraster
Jede Farbe als Text auf jeder anderen, mit WCAG-Verhältnis und AA-/AAA-Markierung – lesbare Paare auf einen Blick.
Farbenblind-Vorschau
Die Palette, wie Menschen mit Protanopie, Deuteranopie, Tritanopie oder ohne Farbsehen sie wahrnehmen.
Rückgängig, Wiederholen, Teilen
Gehen Sie durch die letzten 60 Paletten zurück und kopieren Sie einen Link, der genau diese Farben wieder öffnet.
Privat
Alles läuft in Ihrem Browser. Was Sie eingeben oder öffnen, wird nicht an einen Server gesendet.
Kostenlos, ohne Anmeldung
Kein Konto, keine Limits, kein Wasserzeichen – auf Smartphone, Tablet und Computer.
Wie Farbharmonien funktionieren
Farbharmonien sind einfache geometrische Regeln auf dem Farbkreis. Analoge Farben liegen nebeneinander und wirken ruhig; Komplementärfarben liegen gegenüber und erzeugen maximale Spannung; triadische und tetradische Schemata verteilen drei oder vier Farbtöne gleichmäßig für lebhafte, ausgewogene Paletten. Monochrome Schemata variieren nur Helligkeit und Sättigung eines Farbtons und sind für Oberflächen die sicherste Wahl.
Der Farbton allein macht noch keine Palette. Was ein professionelles Schema von einem zufälligen trennt, ist die Verteilung der Helligkeit: Sie brauchen mindestens eine sehr helle und eine sehr dunkle Farbe, damit Text und Hintergründe möglich sind, und Akzente mit genug Sättigung. Deshalb baut dieser Generator Paletten in OKLCH, wo Helligkeit der Wahrnehmung entspricht, und bietet den wahrnehmungsgetreuen Farbkreis, auf dem gedrehte Farbtöne gleich hell bleiben.
Ein praktischer Ablauf: Sperren Sie Ihre Markenfarbe, erzeugen Sie, bis die Begleiter passen, und prüfen Sie dann das Kontrastraster. Nehmen Sie das Paar mit dem höchsten Verhältnis für Fließtext, reservieren Sie die gesättigtste Farbe für Handlungsaufforderungen und setzen Sie den Rest sparsam ein. Sehen Sie sich zuletzt die Farbenblind-Vorschau an – werden zwei Farben mit unterschiedlicher Bedeutung dort ununterscheidbar, ändern Sie eine davon in der Helligkeit, nicht nur im Farbton.
Farbschemata
| Schema | Farbtöne auf dem Kreis | Charakter |
|---|---|---|
| Monochrom | Ein Farbton, verschiedene Helligkeit | Ruhig, elegant, sehr sicher |
| Analog | Nachbarn, etwa 30° auseinander | Harmonisch, natürlich |
| Komplementär | Gegenüber, 180° auseinander | Kontrastreich, energisch |
| Teilkomplementär | Ein Farbton plus die zwei neben seinem Gegenüber | Kontrast mit weniger Spannung |
| Triadisch | Drei Farbtöne, 120° auseinander | Lebhaft und ausgewogen |
| Tetradisch | Zwei Komplementärpaare | Reich; braucht eine dominante Farbe |
Tipps
- Starten Sie mit einer erprobten Kombination aus der Farbpaletten-Sammlung.
- Die Ausgangsfarben liefert ein Foto – mit dem Farbpalette aus Bild.
- Ein Text-Hintergrund-Paar prüfen Sie im Detail mit dem Kontrastprüfer.
- Sie brauchen eine Skala 50–950 einer Farbe? Der Farbumrechner erstellt sie.
Häufig gestellte Fragen
Keine Antwort gefunden? Schreiben Sie uns – wir antworten schnell.
Wie erzeuge ich eine neue Palette?
Drücken Sie die Leertaste oder die Schaltfläche „Erzeugen“. Gesperrte Farben bleiben, alle anderen werden ersetzt.
Wie baue ich eine Palette um meine Markenfarbe?
Wählen Sie ein Schema wie „Analog“ oder „Triadisch“ und geben Sie Ihre Farbe als Basisfarbe ein. Oder setzen Sie eine Spalte per Farbwähler auf Ihre Farbe, sperren Sie sie und erzeugen Sie den Rest.
Was bewirkt das Sperren einer Farbe?
Eine gesperrte Farbe übersteht das Neuerzeugen. Neue Farben werden passend zu den gesperrten gebildet – so legen Sie eine Palette Farbe für Farbe fest.
Was bedeuten die Zahlen im Kontrastraster?
Jede Zelle ist das WCAG-Kontrastverhältnis der Zeilenfarbe als Text auf der Spaltenfarbe. Ab 4,5 ist AA für normalen Text erfüllt, ab 7 AAA.
Kann ich die Palette für Tailwind oder CSS exportieren?
Ja. Die Exportbox liefert CSS Custom Properties, SCSS-Variablen, eine Tailwind-CSS-Konfiguration, JSON, CSV, eine GIMP-Palette, SVG oder ein PNG-Bild.
Werden meine Daten an einen Server gesendet?
Nein. Das Tool läuft vollständig in Ihrem Browser. Ihre Eingaben werden nicht hochgeladen, protokolliert oder auf unseren Servern gespeichert.
Weitere kostenlose Entwickler-Tools
Kodieren, formatieren, testen, umrechnen und erzeugen – kleine Werkzeuge, die im Browser laufen und Ihre Daten auf Ihrem Gerät lassen.