Quadratisches Farbschema

Geben Sie einen Hex-Farbwert ein: Der Generator behält Sättigung und Helligkeit bei und erzeugt neben dem Grundton drei ausgewogene Partnerfarben. Das Ergebnis enthält wiederverwendbare Hex-, RGB- und HSL-Werte für Designsysteme, Stylesheets, Illustrationen oder Markenstudien. Die Berechnung ist deterministisch: Dieselbe gültige Eingabe liefert stets dieselbe sortierte Palette, ganz ohne Zufall oder Netzwerkzugriff.

So entsteht eine quadratische Farbharmonie

Eine quadratische Harmonie teilt die 360 Grad des Farbkreises in vier gleich große Viertel. Die eingegebene Farbe bildet den ersten Punkt; anschließend addiert der Generator 90, 180 und 270 Grad zu ihrem Farbton. Sättigung und Helligkeit bleiben unverändert. Dadurch ist der Farbton die einzige veränderliche Komponente und die mathematische Beziehung innerhalb der Palette bleibt klar erkennbar. Das unterscheidet dieses Verfahren von einem rechteckigen tetradischen Schema, bei dem die Abstände abwechseln. Jedes ausgegebene Farbfeld enthält seinen exakten Farbtonversatz, normalisierte HSL-Werte, RGB-Kanäle und einen sechsstelligen Hex-Code in Kleinbuchstaben. Nach 360 Grad wird die Rotation korrekt fortgesetzt, sodass sich eine Grundfarbe nahe dem Kreisende wie jede andere verhält. Bei neutralen Farben wie Grau beträgt die HSL-Sättigung null; eine Farbtondrehung erzeugt deshalb keine sichtbaren Unterschiede. Das ist eine erwartete Eigenschaft des Farbmodells und kein Fehler. Die Ausgabe beginnt immer mit der normalisierten Grundfarbe und folgt danach den drei weiteren Drehungen.

Die vier Farben auswählen und einsetzen

Gleichmäßige Abstände schaffen Vielfalt, doch eine gute visuelle Hierarchie hängt weiterhin von der Aufgabe jeder Farbe ab. Verwenden Sie die Grundfarbe zunächst als dominierenden Marken-, Hintergrund- oder Illustrationston. Eine gedrehte Farbe kann als Hauptakzent dienen, eine weitere als Nebenakzent; den gegenüberliegenden Farbton können Sie für Elemente reservieren, die eine starke Abgrenzung benötigen. Da alle vier Farbfelder dieselbe Sättigung und Helligkeit besitzen, haben sie anfangs ein ähnliches visuelles Gewicht. Erstellen Sie in einer fertigen Benutzeroberfläche nach der Rollenzuweisung hellere und dunklere Varianten, damit Texte, Rahmen, Flächen und interaktive Zustände nicht gleich stark konkurrieren. Prüfen Sie Vordergrund-Hintergrund-Kombinationen stets auf ausreichenden Kontrast, denn Farbharmonie garantiert keine Barrierefreiheit. Der Generator liefert einen methodischen Ausgangspunkt, schreibt aber keine gleichmäßige Flächenverteilung vor. Häufig dominiert eine Farbe die Komposition, ein oder zwei unterstützen sie und die letzte setzt sparsame Akzente.

Deterministische Ergebnisse in Designabläufen nutzen

Eine deterministische Ausgabe ist besonders wichtig, wenn eine Palette Teil eines automatisierten Ablaufs wird. Ein gespeicherter Hex-Grundwert kann dieselben vier Farben während eines Builds, in einem Design-Token-Skript oder nach einer Theme-Änderung erneut erzeugen. Durch die Normalisierung werden Kurzschreibweisen und unterschiedliche Großschreibung vereinheitlicht; die ausgegebenen Arrays erleichtern das Kopieren aller vier Codes und die Prüfung der strukturierten Farbdaten. Weil der Algorithmus feste HSL-Umrechnungen und Farbtonversätze nutzt, bewertet er Farben nicht nach Geschmack, leitet keine Stimmung ab und verändert keine Farbfelder unbemerkt. Diese Transparenz macht das Ergebnis leicht prüfbar und reproduzierbar. Speichern Sie die Grundfarbe zusammen mit der Palette, damit spätere Mitwirkende deren Ursprung nachvollziehen können. Wenn Sie Sättigung oder Helligkeit danach für eine bestimmte Rolle anpassen, bewahren Sie das ursprüngliche Quadrat als Referenz auf und dokumentieren Sie die Varianten separat. API-Anfragen kosten $0.002; die Browserversion ermöglicht eine schnelle manuelle Erkundung, ohne die Farbe weiterzugeben.