Interaktiver Farbkreis im Browser
Nutze den Farbharmonie-Generator, um aus einer Grundfarbe eine komplementäre, analoge, triadische, split-komplementäre oder tetradische Palette zu erstellen. Ziehe am Farbkreis, passe HSB an, prüfe Rollen in einer Vorschau und kopiere CSS oder exportiere ein beschriftetes PNG ohne Upload.
Aktualisiert am 29. Juli 2026
Farbharmonie-Generator
Dieser Farbharmonie-Generator setzt einen Grundfarbton auf einen 360-Grad-Farbkreis und berechnet verwandte Farbtöne mit klaren Winkelabständen. Komplementär nutzt 180°, Analog −40° und +40°, Triadisch Schritte von 120°, Split-Komplementär 150° und 210° und Tetradisch Schritte von 90°. Der Farbharmonie-Generator hält Sättigung und Helligkeit zunächst fest, damit der Vergleich die Farbtonstruktur isoliert. Danach kannst du jeden HEX-Wert kopieren, CSS-Variablen exportieren, ein PNG speichern oder das erste Vordergrund-Hintergrund-Paar an den Kontrastprüfer senden.
Farbharmonie-Generator
Der Farbharmonie-Generator zeigt Regel, Winkel, Werte und vorgesehene Rollen, statt nur eine unbenannte Reihe von Farbfeldern auszugeben.
Farbharmonie-Generator
Jedes Ergebnis des Farbharmonie-Generator bleibt am selben Kreis markiert. Die Punkte zeigen Abstände von 180°, 120°, 90° und die geteilte Gegenfarbe, sodass sich die Beziehung der Farben nachvollziehbar erklären lässt.
Farbharmonie-Generator
Der Farbharmonie-Generator setzt das Ergebnis in eine Toon-Karte mit Fläche, Fokusfarbe, Akzent und Aktion ein. Das ist ein schneller Hierarchietest, aber kein Versprechen, dass jede erzeugte Farbe unverändert einsetzbar ist.
Farbharmonie-Generator
Kopiere eine Farbe, die gesamte Palette des Farbharmonie-Generator oder CSS Custom Properties. Das beschriftete PNG hält Regel und Werte für Designreview, Moodboard oder technische Übergabe fest.
Lokaler Farbkreis und lokale Palette
Ziehe am Kreis oder bearbeite HEX und HSB. Der Farbharmonie-Generator berechnet Markierungen, Felder, Vorschaurollen und Exporte sofort neu.
Basis mit Gegennachbarn bei 150° und 210°
Prüfe die Hierarchie, bevor die Farben in echte Grafik oder Komponente wandern.
:root {
--harmony-1: #E8335D; /* Basis · 346° */
--harmony-2: #33E863; /* Unterstützung · 136° */
--harmony-3: #33B8E8; /* Akzent · 196° */
}Das erste Feld wird Vordergrund, das letzte Hintergrund.
Farbharmonie-Generator
Ein Farbharmonie-Generator ist dann nützlich, wenn jedes Kreisergebnis zu einer bewussten Rolle, einer Kontrastmessung und einer kleinen Anpassung im echten Kontext führt.
Farbharmonie-Generator
Gib den freigegebenen HEX-Wert von Marke, Figur oder Oberfläche ein, statt ihn aus einem komprimierten Screenshot zu schätzen. Der Farbharmonie-Generator erhält diesen Farbton als erste Markierung und leitet alle weiteren davon ab.
Farbharmonie-Generator
Nutze Komplementär für starke Trennung, Analog für Nähe, Triadisch für drei ausgewogene Farbfamilien, Split-Komplementär für kontrollierte Spannung und Tetradisch für ein größeres System. Der Farbharmonie-Generator benennt beim Vergleich die exakte Regel.
Farbharmonie-Generator
Lass eine Farbe dominieren und verwende die anderen als Unterstützung, Akzent oder Gegenpol. Nach der Strukturwahl im Farbharmonie-Generator veränderst du Sättigung und Helligkeit für Hierarchie, statt allen Feldern gleiches Gewicht zu geben.
Farbharmonie-Generator
Sende das wahrscheinliche Text-Hintergrund-Paar vom Farbharmonie-Generator an den Kontrastprüfer. Prüfe Normal-, Hover-, Fokus-, Auswahl- und Deaktiviert-Zustand, denn Winkelabstand allein beweist weder Lesbarkeit noch zugängliche Bedeutung.
Farbharmonie-Generator
Der Farbharmonie-Generator nutzt feste, reproduzierbare Abstände. Die Tabelle beschreibt Geometrie, anfängliche Farbanzahl, geeigneten Einstieg und Risiko vor jeder künstlerischen Abstufung.
| Regel | Farbtonabstände | Guter Startpunkt | Beachten |
|---|---|---|---|
| Komplementär | 0°, 180° | Fokusobjekt gegenüber Aktion oder Warnakzent | Gleiche Sättigung kann laut wirken; eine Seite dominieren lassen |
| Analog | −40°, 0°, +40° | Ruhige Szenen, geschichtete Flächen, verwandte Details | Nahe Farbtöne brauchen häufig mehr Helligkeitsabstand |
| Triadisch | 0°, 120°, 240° | Drei Rollen mit breiter Farbtonabdeckung | Ein oder zwei Farben reduzieren, damit eine Führung entsteht |
| Split-Komplementär | 0°, 150°, 210° | Eine Basis mit zwei weniger direkten Gegenakzenten | Große Flächen lassen die Akzente miteinander konkurrieren |
| Tetradisch | 0°, 90°, 180°, 270° | Größere Systeme, Teams, Diagramme und viele UI-Zustände | Vier kräftige Farben brauchen meist Wertgruppen |
Farbharmonie-Generator
Der Farbharmonie-Generator behandelt den Farbton als Winkel von 0° bis 359°. Das Ziehen der Markierung ändert den Basiswinkel; eine Regel addiert ihre festen Abstände und führt Werte über 360° an den Anfang zurück. Sättigung und Helligkeit bleiben in diesem ersten Schritt konstant. So lässt sich prüfen, dass ein Unterschied zwischen Modi aus der Farbtongeometrie und nicht aus einer verborgenen Lichtkurve stammt. Die angezeigten HSB- und HEX-Werte machen das Ergebnis in einem anderen Werkzeug reproduzierbar.
Digitale Farbkreise sind hilfreiche Modelle, aber keine Gesetze der Wahrnehmung. Gleiche Winkel im Farbharmonie-Generator garantieren weder gleichen wahrgenommenen Abstand noch gleiche Luminanz oder Bedeutung. Bildschirmprofil, Umgebung, Fläche, Typografie und Bewegung verändern die Wirkung. Nutze den Farbharmonie-Generator für eine nachvollziehbare Beziehung und bewerte die Palette anschließend in der echten Komposition. Wirkt ein kleiner Akzent zu stark, senke Sättigung oder Helligkeit, ohne die Farbtonbeziehung aufzugeben.
Farbharmonie-Generator
Beginne mit Flächenanteilen, nicht mit dem Wunsch, alle Farbfelder gleich stark zu verwenden. Ein praktischer Farbharmonie-Generator-Workflow kann den Großteil der Fläche ruhig halten, die Basis auf Figur oder Hauptkomponente setzen, einen verwandten Ton für Details nutzen und den stärksten Gegenpol für die Aktion reservieren. Die Vorschau zeigt diese ungleiche Verteilung bewusst. Sie verhindert den häufigen Fehler, vier gleich breite Streifen mit voller Intensität als fertige Palette zu behandeln.
Benenne vor dem Export Rollen wie Hintergrund, Fläche, Fokus, Unterstützung, Aktion, Kontur oder Datenreihe. Namen erlauben eine Korrektur des Farbharmonie-Generator, ohne die Absicht zu verlieren. Scheitert die Aktionsfarbe am Kontrast, kann ihre Rolle dunkler werden und in derselben Farbfamilie bleiben. Verschmelzen zwei Diagrammreihen in einer Simulation, ergänze direkte Labels oder andere Markerformen. Der Generator liefert Kandidaten; die dokumentierte Rolle erklärt Beibehaltung, Änderung oder Entfernung.
Farbharmonie-Generator
Diese Checkliste des Farbharmonie-Generator macht aus einem attraktiven Kreisergebnis eine dokumentierte und testbare Palette.
Farbharmonie-Generator
Dieser Farbharmonie-Generator trennt reproduzierbare Kreisgeometrie von Aussagen zur Barrierefreiheit. Die Winkel sind explizit; W3C-Quellen definieren digitalen Farbton und Kontrast.
Das W3C nennt die Schwelle für normalen Text direkt:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
Farbharmonie-Generator
Farbharmonie-Generator
Beginne mit Analog für eine ruhige Palette oder Komplementär für einen deutlichen Akzent. Der Farbharmonie-Generator hält die Basis fest, sodass der Wechsel den Unterschied sichtbar macht. Lass in beiden Fällen eine Farbe dominieren und miss das endgültige Paar.
Der Farbharmonie-Generator berechnet und zeigt HSB, weil Toon Tone mit Farbton, Sättigung und Helligkeit arbeitet. Der Farbton bleibt ein 360-Grad-Winkel. Jedes HSB-Ergebnis wird für Browser und Designwerkzeuge zusätzlich in HEX umgewandelt.
Nein. Ein Farbharmonie-Generator beschreibt Farbtonbeziehungen, während WCAG-Kontrast von der relativen Luminanz eines konkreten Vordergrunds und Hintergrunds abhängt. Miss echte Schrift und Zustände und ergänze nichtfarbliche Hinweise, wenn Farbe Bedeutung trägt.
Monochrom verändert Helligkeit und Sättigung um einen Farbton, statt verschiedene Farbfamilien im Kreis zu platzieren. Dieser Farbharmonie-Generator verlinkt das spezielle Stufenwerkzeug mit Schrittzahlen, Toon-Schatten, Kontrast, CSS und PNG.
Nein. Der Farbharmonie-Generator berechnet Winkel und Farben im aktuellen Browser-Tab. Kopieren und PNG bleiben lokal. Eine geteilte URL enthält den Basis-HEX und den Regelnamen, daher solltest du sie nur mit freigebbaren Werten teilen.