Triadischer Schema-Generator

Ein triadischer Farbschema-Generator wandelt eine Hex-Farbe in eine dreifarbige Palette um, indem er den Farbkreis in gleichen Schritten von einhundertzwanzig Grad abschreitet. Geben Sie einen Basiskode wie #3498db oder die Kurzform #abc ein; das Werkzeug wandelt die Farbe in Farbton, Sättigung und Helligkeit um, hält Sättigung und Helligkeit fest und erzeugt drei Mitglieder mit Farbtonversätzen von null, plus einhundertzwanzig und plus zweihundertvierzig Grad. Markenteams, die mutige Sekundärakzente ausbalancieren, Frontend-Entwickler, die Theme-Tokens aufbauen, und Lernende der Farbharmonie brauchen dieselbe deterministische triadische Karte, ohne eine volle Design-Suite zu öffnen.

Warum drei Farben im 120-Grad-Abstand harmonieren

Triadische Harmonie setzt drei Farbtöne an die Ecken eines gleichseitigen Dreiecks auf dem Farbtonkreis: jede Farbe sitzt einhundertzwanzig Grad von der nächsten entfernt, sodass kein einzelner Farbton dominiert, während alle drei gleichmäßig beabstandet bleiben. Designsysteme nutzen diese Struktur, wenn eine Marke eine primäre Identitätsfarbe plus zwei unterstützende Akzente braucht, die sich verwandt und nicht zufällig anfühlen.

Der Generator setzt das klassische Modell im HSL-Raum um: er wandelt das Eingabe-Hex in Rot-, Grün- und Blau-Ganzzahlen um, mappt diese Kanäle auf Farbton in Grad sowie Sättigung und Helligkeit als Brüche und gibt drei Farben aus, die die ursprüngliche Sättigung und Helligkeit teilen, während ihre Farbtöne am Basiswinkel, Basis plus einhundertzwanzig und Basis plus zweihundertvierzig liegen, jeweils in den halboffenen Bereich von null bis dreihundertsechzig gewickelt.

Sättigung und Helligkeit festzuhalten ist Absicht—die triadische Suchintention gilt der ausgewogenen Farbtonrotation, nicht dem Erfinden neuer Wert- oder Chromaramen—, sodass ein pastelliges Blau pastellige Begleiter und ein gesättigtes Rot gesättigte Begleiter liefert. Liegt die Eingabe nahe Grau, ist die Sättigung nahe null und alle drei Hex-Werte können ähnlich aussehen; das ist korrekte Physik, kein Fehler, weil achromatische Farben keinen sinnvollen Farbton zum Rotieren haben. Lehrende koppeln dieses Werkzeug oft mit Komplementär- (einhundertachtzig Grad) und Analog-Lektionen (kleine benachbarte Schritte), damit Lernende sehen, wie Abstand auf dem Rad die visuelle Spannung verändert.

Die Antwort listet stets die Rollen primary, secondary und tertiary, sodass Dokumentation und CSS-Custom-Properties sauber auf --color-primary, --color-secondary und --color-tertiary abbilden können, ohne manuell umzuordnen.

Praktische Tipps, Grenzen und verwandte Suchen

Starten Sie von der Marken- oder UI-Farbe, der Sie bereits vertrauen, statt von einem willkürlichen Radpunkt; das primary-Mitglied ist der Eingabefarbton bei Versatz null nach dem HSL-Rundweg, der um eine Kanaleinheit vom Original-Hex abweichen kann, weil RGB zu HSL zu RGB auf Acht-Bit-Kanäle quantisiert wird. Übergeben Sie keine Alpha-Formen wie #RRGGBBAA—diese Seite zielt nur auf opakes klassisches Hex, damit ungültige Längen sofort scheitern. Benannte CSS-Farben wie tomato liegen außerhalb des Umfangs; lösen Sie sie zuerst nach Hex auf oder nutzen Sie eine Tabelle benannter Farben.

Beim Schreiben von Unit-Tests decken Sie mindestens einen lebendigen sechsstelligen Fall, eine dreistellige Expansion, eine nahezu graue Eingabe und ein absichtlich ungültiges Hex ab, damit Harmoniemathematik und Validierung gesperrt bleiben. Diese Seite richtet sich an Personen, die nach einem triadischen Farbschema-Generator, einer einhundertzwanzig-Grad-Palette oder einem kostenlosen Drei-Farben-Farbtonrad-Werkzeug online suchen; sie ist kein voller Mehrraum-Konverter, kein Bildpaletten-Extraktor und kein nur-komplementärer oder tetradischer Vier-Farben-Löser. Bevorzugen Sie diese Fähigkeit, wenn Sie genau drei gleichmäßig beabstandete Farbtöne aus einem Hex-Token brauchen; brauchen Sie nur Kanalsplit ohne Harmonie, nutzen Sie einen Hex-zu-RGB-Konverter.