Generator für warme und kalte Farbvarianten

Geben Sie eine chromatische Hex-Farbe ein und erhalten Sie fünf abgestimmte Werte: zwei wärmere Optionen, die normalisierte Basisfarbe und zwei kühlere Optionen. Jede Variante behält Sättigung und Helligkeit der Vorlage bei, während sich ihr Farbton einem festgelegten Orange- oder Blauziel nähert. Dieselbe Anfrage liefert daher stets dieselbe kompakte und nachvollziehbare Palette.

So entstehen die warmen und kalten Varianten

Der Generator wandelt den Hex-Wert zunächst von RGB in HSL um. In diesem Farbraum lässt sich der Farbton unabhängig von Sättigung und Helligkeit verändern. Als warmes orangefarbenes Ziel dienen 30 Grad, als kaltes blaues Ziel 220 Grad. Auf jeder Seite legt eine sanfte Variante 35 Prozent des kürzesten Kreiswegs zum Ziel zurück, eine kräftige Variante dagegen 70 Prozent. Der kürzeste Weg ist besonders an der Null-Grad-Grenze wichtig, weil der Farbton einen Kreis und keine gerade Zahlenachse bildet. Die ursprüngliche Sättigung und Helligkeit bleiben erhalten. Dadurch wirken die fünf Ergebnisse zusammengehörig und nicht wie eine beliebige Sammlung hellerer, dunklerer, leuchtenderer oder matterer Farben. Die Ausgabe ist fest angeordnet: kräftig warm, sanft warm, Basis, sanft kalt und kräftig kalt. Jeder Eintrag nennt Temperatur und Stärke und enthält sowohl den Hex-Wert als auch den berechneten Farbton in Grad. Da Ziele, Anteile, Rundungsregeln und Reihenfolge feststehen, erzeugt dieselbe gültige Eingabe in jeder unterstützten Umgebung exakt dieselbe Palette.

Basisfarbe auswählen und Ergebnisse einordnen

Geben Sie eine drei- oder sechsstellige CSS-Hex-Farbe mit oder ohne vorangestelltes Rautezeichen ein. Die dreistellige Schreibweise wird vor der Berechnung erweitert; die Antwort enthält den normalisierten sechsstelligen Wert. Eine chromatische Basis eignet sich am besten, denn eine Temperaturvariation setzt einen aussagekräftigen Farbton voraus. Neutrales Grau, reines Schwarz und reines Weiß haben in HSL eine Sättigung von null und besitzen deshalb keinen Farbton, der sich wahrheitsgemäß zu Orange oder Blau verschieben ließe. Der Generator weist solche Eingaben zurück, statt Sättigung zu erfinden und Farben auszugeben, die nicht mehr dem zugesagten reinen Farbtonwandel entsprechen. Nutzen Sie die sanften Varianten etwa für benachbarte Oberflächenzustände, unterstützende Grafiken oder sekundäre Akzente. Die kräftigen Varianten zeigen einen deutlicheren Temperaturwechsel, ohne Sättigung und Helligkeit der Quelle zu verändern. Die Palette unterstützt kreative Abstimmung, prüft jedoch keinen Kontrast. Bevor Sie ein Ergebnis für Text, Bedienelemente, Statusanzeigen oder andere barrierefreiheitsrelevante Inhalte einsetzen, sollten Sie die konkrete Vordergrund-Hintergrund-Kombination mit einem speziellen Kontrastprüfer bewerten.

Deterministische Paletten im Arbeitsablauf einsetzen

Eine feste Transformation ist besonders nützlich, wenn Farben im Code erneut erzeugt, in einem Designsystem dokumentiert oder teamübergreifend geprüft werden müssen. Sie können eine freigegebene Basisfarbe speichern und bei jedem Aufbau eines Themes, Diagramms, einer Illustration oder eines Kampagnenmotivs dieselben warmen und kalten Alternativen ableiten. Das vermindert Abweichungen durch manuelle Auswahl und macht jeden Farbwert leicht erklärbar: Die Varianten unterscheiden sich durch eine messbare Farbtonbewegung und nicht durch eine undokumentierte Sichtentscheidung. Das Ergebnis ist bewusst auf fünf Farben begrenzt, damit es sich auf einen Blick vergleichen lässt. Ein Produktteam kann sanfte Varianten für Interaktionszustände und Hintergründe reservieren und kräftige Varianten zur Betonung einsetzen; ein Datenteam kann warme und kalte Szenarien bei gleicher visueller Intensität unterscheiden; Illustratoren können die Gruppe als kontrollierten Ausgangspunkt für kontextbezogene Anpassungen verwenden. Eine API-Anfrage kostet $0.002; im Browser läuft dieselbe deterministische Logik lokal. Keiner der Wege verwendet externe Abfragen, Zufallswerte, Zeitstempel, Nutzerverläufe oder umgebungsabhängige Farbprofile. Gespeicherte Eingaben bleiben deshalb reproduzierbar.