Tetradisches-Farbschema-Generator

Dieser Tetradisches-Farbschema-Generator baut aus einem einzigen CSS-Hex-Code eine Vierfarben-Rechteck-Palette. Sie geben eine Basisfarbe wie #e74c3c oder die Kurzform #f00 ein; die Engine wandelt sie in HSL um, hält Sättigung und Helligkeit fest und dreht den Farbton in vier deterministischen Schritten bei null, sechzig, einhundertachtzig und zweihundertvierzig Grad. Diese Versatzwerte platzieren zwei Komplementärpaare auf dem Farbrad, sodass die vier Farbmuster ein klassisches tetradisches Rechteck bilden — kein zufälliges Moodboard. Jede erfolgreiche Antwort liefert den normalisierten Eingabe-Hex-Wert, vier detaillierte Farbmuster mit Hex, RGB und HSL sowie flache hexes- und hues-Arrays für Design-Tokens und CSS-Variablen.

Ein tetradisches Farbschema, auch als Rechteck-Harmonie bezeichnet, verwendet vier Farbtöne, die als zwei Komplementärpaare auf dem Farbrad angeordnet sind. Ausgehend von Ihrem Basis-Farbton h platziert dieser Generator Farben bei h plus null Grad, h plus sechzig Grad, h plus einhundertachtzig Grad und h plus zweihundertvierzig Grad und baut dann jede Farbe mit der ursprünglichen Sättigung und Helligkeit neu auf. Diese sechzig-Grad-Trennung zwischen den Paaren erzeugt ein Rechteck statt eines Quadrats (das neunzig-Grad-Schritte verwenden würde).

Komplementärpaare liegen einander gegenüber, sodass die Palette warmen und kühlen Druck ausgleicht, während sie mit der von Ihnen eingegebenen Markenfarbe verbunden bleibt. Abgelehnt werden unter anderem ein fehlender Hex-Wert, Nicht-String-Werte, Tokens länger als sieben Zeichen sowie jede Zeichenkette, die nicht aus drei oder sechs Hex-Ziffern mit optionalem führendem Rautezeichen besteht.

Wie die Hex-Eingabe gelesen wird und wie die vier Farbtöne reproduzierbar bleiben

Das bevorzugte Feld ist hex; akzeptiert werden zudem die Aliase color, base und input, damit Formulare, Abfragezeichenfolgen und Design-Tool-Exporte denselben Vertrag wiederverwenden können, ohne Spalten umzubenennen. Werte können das führende Rautezeichen enthalten oder weglassen und die kurze dreistellige Form wie f00 verwenden, die ziffernweise vor jeder Umwandlung zu ff0000 erweitert wird. Ziffern sind unabhängig von Groß-/Kleinschreibung und werden stets zu einer sechsstelligen Kleinbuchstaben-Ausgabe normalisiert, damit Goldens und CSS-Variablen über Läufe hinweg stabil bleiben.

Nach dem Parsen werden die Kanäle mit Standard-sRGB-Formeln in HSL umgewandelt; der Farbton wird in Grad auf dem Kreis von null bis dreihundertsechzig angegeben, während Sättigung und Helligkeit Einheitsbrüche bleiben, die sich über die vier Schritte hinweg nie ändern. Jeder Versatz wird mit positivem Modulo angewendet, sodass keine negativen Zwischenwerte durchsickern können; danach wird HSL mit Kanalbegrenzung und zwei Kleinbuchstaben-Hex-Ziffern pro Kanal zurück in ganzzahliges RGB umgewandelt.

Wo tetradische Paletten in Produkt-, Marken- und UI-Arbeit zum Einsatz kommen

Designer greifen zu tetradischen Schemata, wenn eine Marke mehr als einen einzelnen Akzent braucht, aber harmonisch bleiben muss: Marketing-Websites, Charts mit mehreren Serien, Dashboard-Statusfarben und Illustrationssysteme benötigen häufig vier verwandte Farbtöne, die dennoch beabsichtigt wirken. Produktteams nutzen das Rechteck-Layout, um Hover-, Fokus-, Chart- und Call-to-Action-Farben aus einem einzigen Marken-Hex-Wert abzuleiten, ohne ad-hoc Hex-Codes in einer Tabellenkalkulation zu erfinden. Lehrende und Design-Studierende nutzen es, um Komplementärpaare und Farbton-Geometrie zu demonstrieren, ohne undurchsichtige Desktop-Apps, die zwischen Versionen die Algorithmen ändern.

Kombinieren Sie ihn mit Kontrast-Prüfern, wenn als Nächstes Barrierefreiheit ansteht, sowie mit RGB- oder HSL-Konvertern, wenn Sie Zwischenformate für weitere Tools in Ihrem Stack benötigen.