Wie erstelle ich CSS-Verläufe, die dem Quadratwurzeldurchschnitt folgen?
Posted: 06 Jan 2025, 21:56
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>
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:
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:
[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)?
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)?