Berechne die Farbwerte von Grün nach Rot

Sie können sich tatsächlich für die Lösung von @KamilT entscheiden. Nachteil dieser Methode (imo) ist, dass die Farben in der Mitte (etwa 50) bräunlich und nicht sehr schön im Vergleich zu Ihrem vollen Rot und Grün werden.

Ich denke, es wäre viel schöner, dem Farbspektrum zu folgen und statt dessen hässlich bräunlich über Orange und Gelb zu gehen.

Dies kann leicht erreicht werden, indem man mit HSL-Werten anstelle von RGB-Werten arbeitet. Wenn Sie den Farbtonwert basierend auf Ihrer Zahl zwischen 0 und 100 auf einen Wert zwischen 0 ° (rot) und 120 ° (grün) einstellen und die Sättigung auf 100% und die Helligkeit auf 50% halten, sollten Sie schöne helle Farben erhalten .

Ich habe einen Weg gefunden, zwischen rgb und hsl zu konvertieren: HSL zu RGB-Farbkonvertierung

Und ich habe eine einfache Funktion geschrieben, um Ihren rgb-Wert mit der Konvertierungsfunktion aus der obigen Antwort zu berechnen:

Und ich habe eine Fiedel eingerichtet, um die Unterschiede zwischen der HSL-Methode und der RGB-Methode zu demonstrieren: Ссылка

update eine vielseitigere Version:

Wenn Sie nicht mit einem Bereich von Rot bis Grün arbeiten möchten, können Sie die obige Methode etwas anpassen. Der Wert, der die tatsächliche Farbe in einer hsl -Darstellung bestimmt, ist die hue , also müssen wir diese berechnen.

Wenn Sie den Farbtonbereich definieren, indem Sie den Wert 0 und 1 als Parameter angeben, wird die Berechnung des Farbtonwerts zur Grundrechenart. Sehen Sie sich die aktualisierte Methode an:

Wie Sie sehen können, habe ich die API ein wenig geändert. Die Parameter lauten wie folgt:

• percentage : ein Wert zwischen 0 und 1
• hue0 : Der Farbtonwert der Farbe, die Sie erhalten möchten, wenn percentage 0 ist
• hue1 : Der Farbtonwert der Farbe, die du bekommen möchtest, wenn percentage 1 ist

Außerdem muss der rgb-Wert nicht mehr berechnet werden, moderne Browser unterstützen hsl-Werte wie sie sind.

Nun können Sie die Methode wie folgt verwenden:

Wenn Sie also im Uhrzeigersinn gehen wollen, müssen Sie hue0 & lt; Farbton1. Wenn Sie gegen den Uhrzeigersinn gehen wollen, müssen Sie hue0 & gt; Farbton1. Und da es sich um Grad handelt, kannst du einfach 360 addieren oder subtrahieren, um die Richtung zu erzwingen. Sie können diese Technik sogar verwenden, um den Farbtonkreis mehrmals zu umbrechen.

Ich habe eine neue Geige geschaffen, um zu demonstrieren: Ссылка

Die Antwort von Pevara ist großartig. Ich habe sein Spiel an meine Bedürfnisse angepasst, und vielleicht ist es auch für andere nützlich: Ссылка

Es ermöglicht eine ungleichmäßige Verteilung der Farben. In meinem Fall wollte ich alles unter 0,5 (50) rot haben. Und eine 0,75 wäre in der Mitte zwischen Rot und Grün. Anstatt also mit den harten Rändern 0 und 1 zu arbeiten, können beide verschoben werden.

Die Änderungen werden nur in der Funktion numberToColorHsl () vorgenommen: * Das i ist ein Gleitkomma 0-1 anstelle des int 0-100 * zusätzliche Parameter min / max

Die Visuals erklären es besser als Worte.

Das ist nur einfache Mathematik;)

Das ist alles.