Farbpaletten-Generator – Farbschemata & CSS-Variablen
Erzeuge fünf harmonische Farben aus einer Grundfarbe oder zufällig. Fixiere deine Favoriten, generiere den Rest neu und kopiere HEX-Codes oder CSS-Variablen.
Grundfarbe und Schema wählen – komplementär, analog, triadisch, tetradisch, Split-Komplementär, monochrom oder Abstufungen – oder Zufällig. Leertaste oder Generieren für neue Ideen, Lieblingsfarben fixieren und ein Farbfeld anklicken, um den HEX-Code zu kopieren.
So funktioniert: Farbpaletten-Generator
- Grundfarbe wählen, etwa deine Markenfarbe.
- Farbschema wählen.
- Leertaste drücken oder Generieren klicken.
- Gute Farben mit dem Schloss fixieren.
- Farbfeld anklicken oder CSS-Variablen kopieren.
So funktionieren Farbschemata
Farbharmonien beruhen auf Positionen im Farbkreis. Der Generator dreht den Farbton deiner Grundfarbe und passt Helligkeit und Sättigung an.
| Schema | Regel | Wirkung |
|---|---|---|
| Komplementär | Gegenfarbe (180°) | starker Kontrast |
| Analog | Nachbarn (±30°) | ruhig, natürlich |
| Triadisch | drei Töne im 120°-Abstand | lebendig, ausgewogen |
| Tetradisch | zwei Komplementärpaare | reich, braucht eine Hauptfarbe |
| Split-Komplementär | Basis + zwei Töne neben der Gegenfarbe | Kontrast mit weniger Spannung |
| Monochrom | ein Ton, verschiedene Helligkeit | klar, elegant |
„Abstufungen“ liefert eine Hell-Dunkel-Reihe einer Farbe für Buttons, Rahmen und Hover-Zustände.
Die 60-30-10-Regel
Nutze eine Farbe für etwa 60 % der Fläche (Hintergründe), eine für 30 % (Karten, Bereiche) und einen Akzent für 10 % (Buttons, Links).
Kontrast und Barrierefreiheit
Jedes Farbfeld zeigt Text in Schwarz oder Weiß, je nachdem, was besser lesbar ist. Fließtext sollte laut WCAG mindestens 4,5:1 Kontrast haben. HEX in RGB umrechnen kannst du mit HEX in RGB umrechnen.
Von der Palette zum Code
Die CSS-Box listet die Farben als Custom Properties wie --color-1. Einfügen und mit var(--color-1) nutzen; später in Rollen wie --primary umbenennen.
Tipps
- Starte mit der Hauptfarbe deines Logos.
- Fixiere eine Lieblingsfarbe und generiere den Rest neu.
- Reines Schwarz und Weiß vermeiden.
Alles läuft lokal im Browser. Ein Icon in den neuen Farben? Nutze den Favicon-Generator.
Paletten im Alltag
Eine gute Palette spart Zeit bei Präsentationen, Social-Media-Grafiken, Websites und Drucksachen. Lege die Farben einmal fest und verwende sie überall gleich – das wirkt professionell und macht deine Marke wiedererkennbar. Teste die Farben auch auf dem Handy und im Dark Mode, denn dort wirken sie oft anders als auf dem großen Monitor. Notiere dir die HEX-Codes in einem kleinen Styleguide, damit auch Kolleginnen und Kollegen dieselben Töne nutzen.
Diese kostenlosen Tools könnten dir auch helfen: JSON formatieren, Passwort-Generator und Regex-Tester.
Häufige Fragen
Wie erstelle ich eine Farbpalette?
Grundfarbe und Schema wählen, dann Leertaste oder Generieren. Gute Farben fixieren und den Rest neu erzeugen.
Was ist ein Komplementärschema?
Es nutzt gegenüberliegende Farben im Farbkreis, etwa Blau und Orange, für starken Kontrast.
Wie kopiere ich eine Farbe?
Farbfeld anklicken für den HEX-Code oder alle Farben als CSS-Variablen kopieren.
Kann ich Farben festhalten?
Ja. Das Schloss fixiert eine Farbe beim Neugenerieren.
Sind die Paletten barrierefrei?
Das Tool zeigt lesbare Textfarben, prüfe aber deine finalen Text-Hintergrund-Paare auf mindestens 4,5:1.
Zuletzt aktualisiert: