Farbpaletten-Generator: harmonische Farbschemata aus einer Basisfarbe
Mit dem Farbpaletten-Generator erstellst du online eine Farbpalette aus einer einzigen Basisfarbe: Farbe wählen oder HEX-Code eingeben, und sechs harmonische Farbschemata erscheinen sofort, jeweils mit HEX, RGB und HSL. Kostenlos, ohne Anmeldung und komplett in deinem Browser berechnet.
Gebaut von Justin Schuessler
Farbpalette fertig? Bring deine Website mit schnellem, zuverlässigem Webhosting online.
Basisfarbe wählen
Alle Farbschemata unten werden sofort live aus dieser Farbe berechnet.
Komplementär
Die Basisfarbe plus ihr Gegenüber auf dem Farbkreis (180°) - starker Kontrast, gut für Akzente.
Analog
Drei benachbarte Farbtöne (±30°) - harmonisch und ruhig, oft in der Natur zu finden.
Triadisch
Drei gleichmäßig verteilte Farbtöne (120° Abstand) - lebendig, dabei ausgewogen.
Split-Komplementär
Die Basisfarbe plus die beiden Nachbarn ihrer Komplementärfarbe - Kontrast mit weniger Spannung.
Tetradisch
Vier Farbtöne in zwei Komplementärpaaren (90° Abstand) - reichhaltig, am besten mit einer dominanten Farbe.
Monochromatisch
Fünf Abstufungen derselben Farbe (Tints, Tones, Shades) - dezent und garantiert stimmig.
Weiter mit der Basisfarbe: Kontrast prüfen · Im Farbenblindheits-Simulator ansehen · Im Color Picker öffnen
Nichts hiervon wird gespeichert oder übertragen - jede Farbe wird ausschließlich in deinem Browser berechnet.
Funktionen
Was der Farbschema-Generator kann
Eine Basisfarbe genügt: Der Generator berechnet daraus harmonische Farbkombinationen nach den Regeln der Farbtheorie.
Sechs Farbschemata auf einen Blick
Komplementär, analog, triadisch, split-komplementär, tetradisch und monochromatisch stehen nebeneinander und aktualisieren sich live bei jeder Änderung der Basisfarbe, ganz ohne Generieren-Button.
Basisfarbe frei wählen
Farbfläche für Sättigung und Helligkeit, Regler für den Farbton, HEX-Feld (sechsstellig oder als dreistellige Kurzform) oder RGB-Werte von 0 bis 255. Oder du startest mit „Zufällige Farbe“.
HEX, RGB und HSL für jede Farbe
Jedes Farbfeld zeigt HEX-Code, RGB- und HSL-Wert. Ein Klick auf ein Farbfeld oder auf die große Vorschau der Basisfarbe kopiert den HEX-Code in die Zwischenablage.
Farbpalette per Link teilen
Die Basisfarbe steht automatisch in der URL, zum Beispiel ?color=3b82f6. Wer den Link öffnet, sieht dieselbe Basisfarbe und dieselben sechs Farbschemata.
Berechnet in deinem Browser
Alle Farben werden in deinem Browser berechnet. Du brauchst kein Konto, und deine Farbwahl wird weder gespeichert noch an einen Server übertragen.
Weiter zu Kontrast und Barrierefreiheit
Unter den Farbschemata übergibst du die Basisfarbe mit einem Klick an den Kontrast-Checker, den Farbenblindheits-Simulator oder den Color Picker.
So funktioniert es
So erstellst du eine Farbpalette aus einer Basisfarbe
Sechs Schritte von der ersten Farbe bis zur fertigen Farbpalette.
Schritt 1
Basisfarbe wählen
Klicke oder ziehe in der Farbfläche, um Sättigung und Helligkeit festzulegen, und stelle mit dem Regler darunter den Farbton ein.
Schritt 2
HEX-Code oder RGB-Werte eingeben
Alternativ tippst du einen HEX-Code wie #3B82F6 oder drei RGB-Werte ein. Mit „Zufällige Farbe“ startest du von einer zufälligen Basisfarbe.
Schritt 3
Farbschemata vergleichen
Die sechs Farbschemata (komplementär, analog, triadisch, split-komplementär, tetradisch und monochromatisch) aktualisieren sich sofort.
Schritt 4
Farbcode kopieren
Klicke auf ein Farbfeld, um seinen HEX-Code zu kopieren. RGB- und HSL-Wert stehen direkt darunter.
Schritt 5
Farbpalette teilen
Kopiere die Adresse aus der Adresszeile. Die Basisfarbe steckt als ?color=… im Link, so öffnest du die Palette später wieder oder schickst sie weiter.
Schritt 6
Kontrast prüfen
Öffne die Basisfarbe über „Kontrast prüfen“ im Kontrast-Checker oder sieh sie dir im Farbenblindheits-Simulator an.
Farbharmonie
Die sechs Farbschemata im Überblick
Jeder Farbton entspricht einem Winkel zwischen 0° und 360° im Farbkreis. Fünf der sechs Farbschemata entstehen, indem der Farbton der Basisfarbe um feste Winkel gedreht wird, Sättigung und Helligkeit bleiben dabei gleich. Das monochromatische Schema ändert stattdessen nur die Helligkeit.
Komplementär
2 Farben · Basisfarbe + 180°
Die Basisfarbe und die Farbe, die ihr im Farbkreis genau gegenüberliegt. Maximaler Farbkontrast, gut für Akzente wie Buttons.
Analog
3 Farben · −30°, Basisfarbe, +30°
Die Basisfarbe mit ihren beiden direkten Nachbarn im Farbkreis. Wirkt ruhig und harmonisch.
Triadisch
3 Farben · 0°, 120°, 240°
Drei Farbtöne, gleichmäßig über den Farbkreis verteilt. Lebendiger als ein analoges Schema und trotzdem ausgewogen.
Split-Komplementär
3 Farben · Basisfarbe + Komplementärfarbe ±30°
Statt der Komplementärfarbe selbst nimmt das Schema ihre beiden Nachbarn. Fast so viel Kontrast wie komplementär, aber mit weniger Spannung.
Tetradisch
4 Farben · 0°, 90°, 180°, 270°
Zwei Komplementärpaare im Abstand von 90°. Reichhaltig, wirkt am besten mit einer dominanten Farbe.
Monochromatisch
5 Farben · gleicher Farbton, fünf Helligkeitsstufen
Farbton und Sättigung bleiben gleich, nur die Helligkeit ändert sich von dunkel nach hell. Auch bei sehr hellen oder sehr dunklen Basisfarben bleiben die fünf Stufen unterscheidbar.
Hintergrund
Komplementärfarbe finden und Farben kombinieren
Bildschirm-Farbkreis statt Malkasten
Der Generator dreht den Farbton im HSL-Farbkreis, dem Farbmodell von Bildschirmen. Reines Grün #00FF00 ergibt dort Magenta #FF00FF, reines Blau #0000FF ergibt Gelb #FFFF00. Im klassischen Farbkreis der Malerei (Rot, Gelb, Blau) lauten die Paare dagegen Grün und Rot bzw. Blau und Orange. Beide Antworten stimmen, jeweils in ihrem Farbmodell.
Farben im Design verteilen
Eine verbreitete Faustregel ist die 60-30-10-Regel: etwa 60 % Hauptfarbe, 30 % Sekundärfarbe und 10 % Akzentfarbe. Der Generator wendet sie nicht automatisch an. Du entscheidest selbst, welche Farbe eines Schemas welche Rolle bekommt, zum Beispiel die Basisfarbe als Hauptfarbe und die Komplementärfarbe als Akzent.
Harmonisch heißt nicht lesbar
Ein harmonisches Farbschema hat nicht automatisch genug Kontrast für Text auf Hintergrund. Prüfe deine finale Kombination deshalb im Kontrast-Checker, bevor du sie auf einer Website oder in einer App einsetzt. Der Link „Kontrast prüfen“ unter den Farbschemata übergibt deine Basisfarbe direkt dorthin.
Mehr entdecken
Weitere Tools für Farben und Barrierefreiheit
Color Picker
Farben live zwischen HEX, RGB, HSL, HSV und CMYK umrechnen, den nächsten CSS-Named-Color-Treffer finden und den WCAG-Kontrast gegen Schwarz/Weiß prüfen - komplett im Browser.
Gebaut von Justin Schuessler
Contrast Checker
WCAG-Kontrastverhältnis zwischen zwei Farben live berechnen und gegen AA/AAA sowie UI-Komponenten prüfen - komplett im Browser.
Gebaut von Justin Schuessler
Farbenblindheits-Simulator
Farbpaletten und eigene Bilder live simulieren, wie sie bei Protanopie, Deuteranopie, Tritanopie und Achromatopsie wahrgenommen werden - komplett im Browser berechnet.
Gebaut von Justin Schuessler
Farbpicker aus Bild
Farbcode aus einem Bild auslesen: Farbpipette mit Lupe, HEX, RGB und HSL, Farbpalette des Bildes und Kontrast-Hinweis. Das Bild bleibt im Browser.
Gebaut von Dimitri Heissler
FAQ
Häufige Fragen zum Farbpaletten-Generator
Kurze Antworten rund um Farbpaletten, Farbharmonie und dieses Tool.
Lege in der Farbfläche Sättigung und Helligkeit fest, stelle mit dem Regler den Farbton ein oder tippe einen HEX-Code bzw. RGB-Werte ein. Alternativ klickst du auf „Zufällige Farbe“. Alle sechs Farbschemata aktualisieren sich sofort, ohne Generieren-Button. Jedes Farbfeld zeigt HEX, RGB und HSL, ein Klick kopiert den HEX-Code.
Gib deine Farbe als HEX-Code oder RGB-Werte ein und lies das Schema „Komplementär“ ab: Es zeigt deine Basisfarbe und die Farbe, die ihr im Farbkreis gegenüberliegt (Farbton um 180° gedreht). Der Generator nutzt den HSL-Farbkreis von Bildschirmen: Reines Grün #00FF00 ergibt Magenta #FF00FF, reines Blau #0000FF ergibt Gelb #FFFF00. Im klassischen Farbkreis der Malerei wären es Rot bzw. Orange.
Drei Farben liefern drei der sechs Schemata: triadisch (drei Farbtöne mit je 120° Abstand, lebendig und ausgewogen), analog (die Basisfarbe und ihre Nachbarn bei −30° und +30°, ruhig und harmonisch) und split-komplementär (die Basisfarbe plus die beiden Nachbarn ihrer Komplementärfarbe, kontrastreich mit weniger Spannung). Gib deine Basisfarbe ein und vergleiche alle drei nebeneinander.
Ein monochromatisches Farbschema bleibt bei einem Farbton und einer Sättigung und ändert nur die Helligkeit. Der Generator erzeugt fünf Helligkeitsstufen von dunkel nach hell, die auch bei sehr hellen oder sehr dunklen Basisfarben unterscheidbar bleiben. Das Ergebnis wirkt dezent und stimmig, etwa für Hintergründe und Flächen.
Harmonisch heißt nicht automatisch gut lesbar: Problematisch sind vor allem Text- und Hintergrundfarben mit zu wenig Helligkeitsunterschied. Prüfe deine Kombination deshalb vor dem Einsatz im Kontrast-Checker. Der Link „Kontrast prüfen“ unter den Farbschemata übergibt deine Basisfarbe direkt dorthin.
Die 60-30-10-Regel ist eine Faustregel aus dem Design: etwa 60 % Hauptfarbe, 30 % Sekundärfarbe und 10 % Akzentfarbe. Der Generator wendet sie nicht automatisch an. Du verteilst die Farben eines Schemas selbst, zum Beispiel die Basisfarbe als Hauptfarbe und die Komplementärfarbe als Akzent.
Ja. Die Basisfarbe steht automatisch als Parameter in der URL, zum Beispiel ?color=3b82f6. Kopiere die Adresse aus der Adresszeile: Wer den Link öffnet, sieht dieselbe Basisfarbe und dieselben sechs Farbschemata. Ein Konto brauchst du dafür nicht.
Der Farbpaletten-Generator ist kostenlos und ohne Anmeldung nutzbar. Alle Farben werden in deinem Browser berechnet, deine Farbwahl wird weder gespeichert noch an einen Server übertragen. Schließt du den Tab, bleibt die Palette nur über einen vorher kopierten Link erhalten.
Noch weitere Fragen?
Support kontaktierenEinen Server für dein nächstes Projekt gesucht?
Ein ZAP-Hosting vServer gibt dir die volle Kontrolle über deine eigene Infrastruktur - inklusive eigenem SSH-Zugang, Firewall und vollem Root-Zugriff.
Kein Setup. Kein Risiko. In Sekunden online.
Auf der Suche nach weiteren Tools? Alle Bild- & Design-Tools ansehen
Bevorzugte Quelle bei Google
