Farbharmonien: Farbpalette nach Farbkreis
Farbharmonien berechnen: Zu einer Grundfarbe die Komplementärfarbe, triadische, analoge, tetradische und monochrome Farben finden und als Farbpalette kopieren.
Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.
Farbharmonien auf dem Farbkreis
Farbharmonien sind feste Regeln, nach denen Farben auf dem Farbkreis zueinander passen. Sie wählen eine Grundfarbe, das Werkzeug dreht deren Farbton um bestimmte Winkel und zeigt die Ergebnisse als HEX-Codes. Die Komplementärfarbe liegt genau gegenüber (180°) und bildet den stärksten Kontrast. Triadisch heißt: drei Farben im Abstand von 120°, etwa Blau, Rot und Grün. Analoge Farben sind direkte Nachbarn auf dem Farbkreis und wirken ruhig. Dazu kommen Split-komplementär, tetradisch (zwei Komplementärpaare als Rechteck), quadratisch und monochrom, also ein Farbton in mehreren Helligkeitsstufen. So können Sie eine Farbpalette erstellen, ohne lange zu probieren.
Sättigung und Helligkeit der Grundfarbe bleiben bei der Drehung erhalten, nur der Farbton ändert sich. Für Bildschirm und Web ist der digitale Farbkreis (RGB, HSL) üblich: Dort ist die Gegenfarbe von Blau ein Orange-Gelb. Der Malerfarbkreis nach Itten mit den Grundfarben Rot, Gelb und Blau ordnet die Farbtöne anders; dort ist Grün die Gegenfarbe von Rot und Violett die von Gelb. Das Werkzeug bildet diesen Kreis über eine Näherung ab, die für Gestaltung genügt, aber keine farbmetrisch exakte Umrechnung ist.
Eine Farbharmonie ist ein Startpunkt, kein fertiges Design. Bewährt hat sich: eine Farbe dominiert, eine zweite ergänzt, eine dritte dient als sparsamer Akzent. Prüfen Sie Text- und Hintergrundfarbe anschließend mit dem Kontrastprüfer, denn harmonische Farben sind nicht automatisch gut lesbar. Andere Schreibweisen wie RGB, HSL oder OKLCH liefert der Farbumwandler.
Anleitung: Farbharmonien in 4 Schritten
- Geben Sie die Grundfarbe als HEX-Code ein oder lassen Sie eine zufällige Grundfarbe erzeugen.
- Wählen Sie eine Farbharmonie, etwa Komplementär, triadisch oder analog, oder zeigen Sie alle Harmonien an.
- Entscheiden Sie zwischen digitalem Farbkreis und Malerfarbkreis und stellen Sie den Abstand bei analogen Farben ein.
- Wählen Sie das Ausgabeformat und kopieren Sie die Farbpalette; ein Klick auf eine einzelne Farbe kopiert deren HEX-Code.
Typische Anwendungsfälle
- Markenfarben erweitern: Zu einer vorhandenen Hauptfarbe passende Akzent- und Ergänzungsfarben finden.
- Diagramme gestalten: Mit triadischen oder tetradischen Farben gut unterscheidbare Reihen für Grafiken festlegen.
- Design-Tokens anlegen: Eine Farbpalette direkt als CSS- oder SCSS-Variablen in ein Projekt übernehmen.
Häufige Fragen
Wie finde ich die Komplementärfarbe?
Die Komplementärfarbe liegt auf dem Farbkreis genau gegenüber, also um 180° gedreht. Im digitalen Farbkreis ist das bei #1c6be8 (Blau) ein Orange mit dem HEX-Code #e8991c. Sättigung und Helligkeit bleiben gleich.
Was bedeutet triadisch?
Eine triadische Farbharmonie besteht aus drei Farben, die gleichmäßig im Abstand von 120° auf dem Farbkreis verteilt sind. Sie wirkt lebendig und ausgewogen; meist nimmt man eine der drei als Hauptfarbe und die anderen sparsamer.
Was sind analoge Farben?
Analoge Farben liegen auf dem Farbkreis direkt nebeneinander, typisch im Abstand von 15° bis 30°. Sie wirken ruhig und natürlich, etwa Gelb, Orange und Rot. Den Abstand können Sie im Werkzeug einstellen.
Warum unterscheiden sich digitaler Farbkreis und Malerfarbkreis?
Der digitale Farbkreis beruht auf den Lichtfarben Rot, Grün und Blau, der Malerfarbkreis auf den Pigment-Grundfarben Rot, Gelb und Blau. Deshalb ist die Gegenfarbe von Rot digital ein Cyan, im Malerfarbkreis dagegen Grün.
Warum bekomme ich nur Grautöne?
Graue, schwarze und weiße Farben haben keine Sättigung und damit keinen eindeutigen Farbton. Eine Drehung auf dem Farbkreis ändert dann nichts. Wählen Sie eine buntere Grundfarbe.
Was ist eine split-komplementäre Farbharmonie?
Statt der direkten Komplementärfarbe nimmt man die beiden Farben links und rechts daneben. Der Kontrast bleibt deutlich, wirkt aber weniger hart als bei einem reinen Komplementärpaar.
Wie übernehme ich eine Farbpalette als CSS-Variablen?
Stellen Sie das Ausgabeformat auf „CSS-Variablen“ und kopieren Sie die Farbpalette. Die Variablen fügen Sie zum Beispiel in den :root-Block Ihres Stylesheets ein; für Sass gibt es das Format „SCSS-Variablen“.
Das könnte auch helfen
Farbumwandler
HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.
ÖffnenFarbpalette aus Bild
Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.
ÖffnenKontrast prüfen (WCAG)
Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.
ÖffnenCSS-Gradient-Generator
Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.
ÖffnenBox-Shadow-Generator
CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.
ÖffnenFlexbox-Generator
Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.
Öffnen