Wie erstelle ich CSS-Verläufe, die dem Quadratwurzeldurchschnitt folgen? ⇐ CSS

[Guest]

Diese Frage stammt aus diesem winzigen Physikvideo, das ich vor einiger Zeit gesehen habe: Computer Color is Broken
Es beschreibt, wie man Farben richtig mischt, indem man die Quadratwurzel des Durchschnitts von verwendet die Quadrate der R-, G- und B-Werte, anstatt einfach den Durchschnitt zu bilden.
Also war ich neugierig und beschloss zu testen, wie CSS Farbverläufe mit einem einfachen Rot-Grün-Farbverlauf implementiert:< /p>

Code: Select all

div {
width: 600px;
height: 600px;
background: linear-gradient(to right, rgb(0,255,0), rgb(255,0,0));
}

Code: Select all

Wie Sie sehen können, ist der Farbverlauf ziemlich hässlich, mit dunklem Gelb in der Mitte.Ich habe beschlossen, den richtigen Farbverlauf mithilfe von Farbstopps zu implementieren, die dem folgen sqrt-Kurve, und das Ergebnis ist definitiv besser:

Code: Select all

div {
width: 600px;
height: 600px;
background: linear-gradient(to right,
rgb(000,255,000),
rgb(127,221,000) 25%,
rgb(180,180,000) 50%,
rgb(221,127,000) 75%,
rgb(255,000,000) 100%
);
}

Code: Select all

Aufgrund der begrenzten Anzahl von Stopps ist das resultierende Rendering etwas blockig, aber der Gesamtverlauf sieht deutlich besser aus als die Standardeinstellung. Durch das Hinzufügen weiterer Stopps wird es noch weiter verbessert:

Code: Select all

div {
width: 600px;
height: 600px;
background: linear-gradient(to right,
rgb(000,255,000),
rgb(090,239,000) 12.5%,
rgb(127,221,000) 25%,
rgb(156,201,000) 37.5%,
rgb(180,180,000) 50%,
rgb(201,156,000) 62.5%,
rgb(221,127,000) 75%,
rgb(239,090,000) 87.5%,
rgb(255,000,000) 100%
);
}

Code: Select all

[img]https: //i.sstatic.net/wlN0UvY8.png[/img]

Meine Frage ist, gibt es eine Möglichkeit, einen kontinuierlicheren Farbverlauf wie diesen in CSS zu erreichen (entweder Vanilla oder durch die Verwendung einiger). anderes Werkzeug)?