Farbpalette-Generator
Wähle eine Grundfarbe und ein Farbschema – du erhältst harmonische Farben mit Codes und fertigem CSS.
Der Farbpalette-Generator berechnet aus einer Grundfarbe harmonische Farbschemata nach den Regeln des Farbkreises: komplementär, analog, triadisch, tetradisch, geteilt-komplementär und monochrom (Abstufungen). Jede Farbe wird als Fläche mit HEX-, RGB- und HSL-Wert angezeigt. Der Export erzeugt CSS-Variablen, JSON oder eine HEX-Liste. Mit einem Zufalls-Button findest du neue Ausgangsfarben.
Farbschemata im Überblick
| Schema | Prinzip | Wirkung |
|---|---|---|
| Komplementär | Gegenüberliegende Farben (180°) | Starker Kontrast, lebendig |
| Analog | Benachbarte Farben (±30°) | Harmonisch, ruhig |
| Triadisch | Drei Farben im Abstand von 120° | Ausgewogen und bunt |
| Tetradisch | Vier Farben im Abstand von 90° | Vielfältig, braucht klare Rollenverteilung |
| Geteilt-komplementär | Grundfarbe plus die Nachbarn der Komplementärfarbe | Kontrast, aber weniger hart |
| Monochrom | Ein Farbton in verschiedenen Helligkeiten | Elegant, einheitlich |
So nutzt du den Generator
- Grundfarbe wählenNimm deine Markenfarbe oder eine Farbe, die dir gefällt – per Farbwähler oder als Code.
- Schema auswählenProbiere die Schemata durch. Für Webseiten funktionieren analoge und komplementäre Paletten mit einem ruhigen Neutralton oft am besten.
- ExportierenKopiere die Farben als CSS-Variablen in dein Stylesheet oder als HEX-Liste für Design-Tools.
Farbharmonie in der Praxis
Der Farbkreis ordnet Farbtöne nach ihrem Verhältnis zueinander. Farben, die im Kreis in bestimmten Abständen liegen, wirken zusammen harmonisch. In der Praxis genügt selten die reine Schema-Farbe: Für Oberflächen brauchst du helle und dunkle Abstufungen einer Farbe (Tönungen und Schattierungen) sowie Neutraltöne. Gute Paletten folgen oft der 60-30-10-Regel: 60 % dominante Farbe (meist neutral), 30 % Sekundärfarbe, 10 % Akzent.
Beachte Zugänglichkeit: Rund 8 % der Männer und 0,5 % der Frauen haben eine Rot-Grün-Sehschwäche. Verwende Farbe nicht als einziges Unterscheidungsmerkmal und teste Kontraste.
Tipps für Marken- und Webfarben
- Wähle Farben passend zur Botschaft: Blau wirkt vertrauenswürdig, Grün natürlich, Rot dringlich, Orange freundlich.
- Begrenze dich auf 3 bis 5 Farben plus Neutraltöne.
- Halte die Sättigung großer Flächen niedrig und setze gesättigte Farben für Akzente ein.
- Definiere Farben als CSS-Variablen (--farbe-primaer), damit du sie zentral ändern kannst.
- Prüfe Dark-Mode-Varianten: Helle Farben auf dunklem Grund benötigen oft weniger Sättigung.
Typische Anwendungsfälle für harmonische Farbpaletten
Die meisten Paletten entstehen nicht aus dem Nichts, sondern aus einer Farbe, die bereits feststeht. Ein Kunde nennt dir das Blau #2563eb aus seinem Logo, und in einer Stunde brauchst du passende Töne für Buttons, Hintergründe und Diagramme: „Komplementär“ liefert den Kontrastsatz, „Analog“ eine ruhige Reihe für Flächen, „Tönungen & Schattierungen“ zehn Stufen für aktive und inaktive Zustände. Der Export als CSS-Variablen wandert direkt in das Stylesheet, sodass niemand Hexwerte abtippt.
Auch abseits der Website arbeitest du mit einer Grundfarbe: Für einen Flyer wählst du „Triadisch“, wenn drei gleich starke Farben nebeneinanderstehen, und „Monochrom“, wenn eine Datenreihe nur in Helligkeit unterscheiden soll. Wer noch keine Grundfarbe hat, drückt „Zufällige Grundfarbe“, probiert die Schemata durch und übernimmt per Klick einen HEX-Wert. Farben, die bereits auf einem Foto warten, ermittelst du mit dem Tool Farbe aus Bild.
Mögliche Fehler und was dagegen hilft
- Beim Tippen passiert nichts – Ursache: Der Wert in „Grundfarbe“ war nicht als Farbe lesbar, etwa ein Wort mit Leerzeichen oder eine Zahl ohne Raute. Fix: #2563eb, rgb(37, 99, 235) oder einen CSS-Namen eintragen.
- Ein Klick auf eine Farbfläche verändert den Export nicht – Ursache: Die Flächen kopieren ihren HEX-Wert in die Zwischenablage. Fix: Für den ganzen Block den Button „Export kopieren“ unter dem Textfeld nutzen.
- Das Textfeld zeigt ein anderes Format als erwartet – Ursache: Die Auswahlfeld „Export“ ändert nur die Schreibweise, nicht die Farben. Fix: Format neu wählen und danach „Export kopieren“ drücken.
- Die Vierfarben-Palette wirkt unruhig – Ursache: „Tetradisch“ setzt vier gleich starke Farbtöne voraus. Fix: „Geteilt-komplementär“ oder „Monochrom“ wählen und die Farben unterschiedlich stark einsetzen.
- Monochrome Stufen wirkt zu grau – Ursache: Bei dieser Auswahl ändert nur die Helligkeit, die Sättigung bleibt. Fix: Eine kräftiger gesättigte Grundfarbe nehmen und erneut starten.
Für wen sich der Farbpalette-Generator lohnt
Zuerst profitieren Solo-Betreiber kleiner Websites und Agenturen, die ohne Designstudium eine stimmige Farbfamilie brauchen: Die Grundfarbe steht fest, das Schema entscheidet über die Stimmung, der Export sorgt dafür, dass dieselben Werte in Theme, Newsletter und Präsentation wieder auftauchen. Auch Entwicklerinnen, die Design-Übergaben in CSS-Variablen überführen, und Studierende, die die Regeln des Farbkreises verstehen wollen, arbeiten schnell damit.
Der Generator erzeugt harmonische Abstände, prüft aber keine Lesbarkeit: Für die Kombination aus Text und neuer Fläche gehst du zum Kontrast-Checker. Wenn du zwei konkrete Farben in ein festes Verhältnis setzt, ist der Farbmischer die direktere Wahl.
Datenschutz & Prüfung: Dieses Tool arbeitet vollständig lokal in deinem Browser – Eingaben und Dateien werden nicht hochgeladen oder gespeichert. Funktion geprüft: Oktober 2026.
Passende Tools
Farbcode-Umrechner (HEX, RGB, HSL, CMYK)
Farben umrechnen: HEX, RGB, HSL, HSV und CMYK – mit Farbwähler, Namen und Kontrastwerten.
Zum Tool DesignCSS-Farbverlauf-Generator
CSS-Farbverläufe gestalten: linear, radial und konisch mit mehreren Farbstopps – Code zum Kopieren.
Zum Tool DesignKontrast-Checker (WCAG)
Farbkontrast nach WCAG prüfen: Kontrastverhältnis, AA/AAA für Text und UI-Elemente – mit Verbesserungsvorschlag.
Zum ToolHäufige Fragen
Was sind Komplementärfarben?
Farben, die sich im Farbkreis gegenüberliegen (z. B. Blau und Orange). Sie erzeugen den stärksten Kontrast.
Was ist eine analoge Farbpalette?
Farben, die im Farbkreis nebeneinander liegen. Sie wirken harmonisch und ruhig.
Wie viele Farben brauche ich für eine Website?
Meist eine Primärfarbe, eine Akzentfarbe und mehrere Neutraltöne (Weiß, Grau, Schwarz) sowie helle/dunkle Abstufungen.
Wie exportiere ich die Palette?
Wähle das Format (CSS-Variablen, HEX-Liste, JSON) und kopiere den Text.
Kann ich Farben aus einem Foto ermitteln?
Ja, mit dem Tool „Farbe aus Bild“ dieser Seite.
Werden meine Farben gespeichert?
Nein, alles läuft lokal.
Alle Tools an einem Ort
Über 100 Rechner für Alltag, Mathematik, Finanzen und mehr – kostenlos, ohne Anmeldung und mit sichtbarem Rechenweg.