Zwei Farben in HSL auf dem kürzesten Farbtonweg interpolieren

Geben Sie zwei Hexfarben und einen Anteil zwischen null und eins an; die Funktion liefert den Zwischenpunkt als normalisierte Hex-, RGB- und HSL-Werte. Der Farbton folgt der kürzeren Seite des Farbkreises. Für exakte Halbkreisgleichstände gilt eine feste Regel, sodass dieselbe Anfrage stets dasselbe Ergebnis erzeugt. Die strenge Validierung eignet sich für Designwerkzeuge, Token-Pipelines, Animations-Keyframes und reproduzierbare Tests.

So funktioniert die HSL-Interpolation auf dem kürzesten Weg

Jede Eingabe beginnt als 3- oder 6-stellige Hexfarbe mit oder ohne führendes Rautezeichen. Der Rechner erweitert die Kurzform, vereinheitlicht die Groß- und Kleinschreibung, wandelt ganzzahlige sRGB-Kanäle in HSL um und behandelt den Farbton als Winkel statt als gewöhnliche lineare Zahl. Dieser Unterschied ist an der Grenze des Farbkreises entscheidend. Eine Mischung von 350 Grad nach 10 Grad soll 20 Grad durch Rot zurücklegen und nicht den langen Weg durch fast alle anderen Farbtöne nehmen. Deshalb wird die vorzeichenbehaftete Differenz auf das halboffene Intervall von einschließlich -180 Grad bis ausschließlich 180 Grad normalisiert. Bei einem exakten Gleichstand von 180 Grad wird stets die negative Richtung gewählt; damit ist die sonst mehrdeutige Entscheidung deterministisch. Sättigung und Helligkeit werden mit demselben Anteil direkt interpoliert. Die resultierende HSL-Farbe wird wieder in gerundete ganzzahlige RGB-Kanäle und eine 6-stellige kleingeschriebene Hexzeichenfolge umgewandelt. Ausgegebene HSL-Komponenten und die Farbtondifferenz werden auf 6 Dezimalstellen gerundet, damit JSON stabil bleibt und zugleich nützliche Genauigkeit bietet. Netzwerk, Zufallswerte, Uhr und veränderlicher Zustand spielen bei der Berechnung keine Rolle.

Anteil festlegen und Antwort auswerten

Setzen Sie t auf 0, um die Ausgangsfarbe zu erhalten, auf 1 für die Zielfarbe oder auf eine Dezimalzahl dazwischen für einen Zwischenpunkt. Der Wert 0.25 legt ein Viertel des Weges durch jede interpolierte HSL-Komponente zurück, während 0.5 die Mitte wählt. Die Antwort wiederholt beide normalisierten Endfarben und den exakten Anteil. Danach folgen hex, ein rgb-Objekt mit den ganzzahligen Kanälen r, g und b sowie ein hsl-Objekt, in dem h in Grad und s und l in Prozent angegeben sind. Das Feld hue_delta zeigt den vollständigen vorzeichenbehafteten Winkelweg vor der Multiplikation mit t. Das zugehörige Feld hue_path enthält increasing, decreasing oder none. Dies hilft bei der Fehlersuche in Verläufen, die null Grad überschreiten, oder bei der Nachbildung des Weges in einem anderen Renderer. Graustufen-Endpunkte erhalten den konventionell berechneten Farbton null, da eine unbunte RGB-Farbe keinen sichtbar definierten Farbton besitzt. Die Interpolation bleibt deterministisch; eine Sättigung zwischen Grau und einer bunten Farbe kann diese Konvention jedoch sichtbar machen. Senden Sie t als JSON-Zahl und nicht als Text in Anführungszeichen.

Sicherer Einsatz in Design und Produktion

Diese Operation passt überall dort, wo ein System eine reproduzierbare Farbe zwischen zwei bekannten Stopps benötigt. Ein Theme-Generator kann Hover-, Druck- oder Übergangs-Token erzeugen, ohne eine Farbbibliothek einzubinden. Ein Diagrammdienst kann gleichmäßig verteilte Stichproben mit Anteilen wie 0, 0.25, 0.5, 0.75 und 1 anfordern. Eine Animations-Pipeline kann Keyframes berechnen, deren Farbton nicht unerwartet den langen Bogen durch Grün oder Blau durchläuft. Normalisierte Eingaben und begrenzte Rundung erleichtern außerdem Regressionstests. Der Endpoint akzeptiert absichtlich nur hexadezimale RGB-Farben; Alphakanäle, CSS-Farbnamen, rgb()-Zeichenfolgen, HSL-Zeichenfolgen und Farbräume mit großem Gamut liegen außerhalb dieses Vertrags. Ungültige Längen, nicht hexadezimale Zeichen, fehlende Felder, nicht endliche Anteile und Werte außerhalb des Bereichs scheitern an der Validierung. Eine erfolgreiche API-Ausführung kostet $0.002 pro Element, während der Browser denselben reinen Rechner nutzt. HSL ist nicht wahrnehmungsgleichmäßig; wählen Sie ein LAB-basiertes Werkzeug, wenn optisch gleichmäßige Schritte wichtiger sind.