Farbstopps für Farbverläufe gleichmäßig erzeugen

Der Generator für Farbverlaufsstopps wandelt zwei Endfarben in eine vollständige, vorhersehbare Folge für CSS, Design-Tokens, Diagramme, Canvas und programmatisch erzeugte Grafiken um. Sie geben eine Startfarbe, eine Endfarbe und die Gesamtzahl der Stopps an. Das Ergebnis enthält beide Endpunkte und sämtliche Zwischenfarben, jeweils zusammen mit ihrer prozentualen Position. Eine strenge Prüfung erkennt fehlerhafte Farben und unzulässige Mengen, bevor sie in einen Produktionsablauf gelangen.

Erstellen Sie aus zwei Endfarben eine vollständige Liste

Ein Farbverlauf beginnt häufig mit einer einfachen Gestaltungsvorgabe: Eine Markenfarbe soll über eine bestimmte Anzahl von Schritten in eine andere übergehen. Diese Vorgabe in wiederverwendbare Daten umzusetzen, wird mühsam, sobald jede Zwischenfarbe und jede Position einheitlich berechnet werden muss. Dieser Generator nimmt eine hexadezimale Startfarbe, eine Endfarbe und die gewünschte Gesamtzahl der Stopps entgegen.

Er setzt den Anfang auf null Prozent und das Ende auf einhundert Prozent und verteilt alle übrigen Stopps in gleich großen prozentualen Abständen. Jedes Ergebnis wird als sechsstellige, großgeschriebene Hexadezimalangabe normalisiert; deshalb liefert auch die Kurzform #f00 den stabilen Wert #FF0000. Das ausgegebene Array lässt sich unmittelbar in CSS-Verläufe, SVG-Definitionen, Canvas-Code, Diagrammkonfigurationen oder einen Token-Build-Prozess übernehmen.

Da die Anzahl beide Endpunkte einschließt, entstehen bei fünf Stopps die Positionen 0, 25, 50, 75 und 100 Prozent. Diese Konvention macht den Umfang der Antwort eindeutig und verhindert versteckte Ergänzungen, die nachgelagerte Array-Indizes verschieben könnten.

Verstehen Sie die deterministische Interpolationsmethode

Die Farben werden getrennt über den roten, grünen und blauen Kanal interpoliert. Für jede Position berechnet der Generator den proportionalen Abstand zwischen Anfangs- und Endwert des jeweiligen Kanals und rundet das Ergebnis auf die nächste gültige ganze Zahl von 0 bis 255. Dieses Verfahren wird üblicherweise als lineare RGB-Interpolation bezeichnet.

Es ist bewusst unkompliziert und reproduzierbar: Zufall, Farbprofilabfragen, Abhängigkeiten von der Browserdarstellung und externe Dienste spielen keine Rolle. Die Prozentpositionen ergeben sich aus dem Stoppindex geteilt durch die Zahl der Intervalle; periodische Dezimalzahlen werden auf sechs Stellen gerundet. Bei vier Stopps erscheinen die mittleren Positionen dadurch als 33.333333 und 66.666667 Prozent, ohne störende Gleitkommaartefakte offenzulegen.

Lineares RGB ist kein wahrnehmungsgleichmäßiges Farbmodell; numerisch gleiche Schritte können für das Auge unterschiedlich hell wirken.

Prüfen Sie Eingaben und übernehmen Sie die ausgegebenen Stopps

Beide Farbfelder akzeptieren drei oder sechs hexadezimale Ziffern und optional ein vorangestelltes Rautezeichen. Leerraum am Rand wird entfernt; Leerzeichen innerhalb des Werts, Alphakanäle, Farbnamen und nicht hexadezimale Zeichen werden dagegen abgelehnt. Die Anzahl muss eine echte ganze Zahl zwischen 2 und 256 sein.

Mindestens zwei Stopps gewährleisten sinnvolle Positionen für beide Endfarben, während die Obergrenze Ausgabegröße und Laufzeit vorhersehbar hält. Eine erfolgreiche Antwort wiederholt die normalisierten Endfarben, nennt die geprüfte Anzahl und liefert ein stops-Array, dessen Datensätze die Felder color und percentage enthalten. Sie können diese Datensätze zu einem CSS-Wert linear-gradient verbinden, als Design-Tokens speichern, in eine SVG-Stoppliste einsetzen oder die Prozentwerte als normalisierte Bezugspunkte für einen anderen Renderer verwenden.

Derselbe begrenzte Algorithmus berechnet End- und Zwischenwerte; Ganzzahlarithmetik im Kanalzähler verringert vermeidbare Gleitkommaabweichungen.