Как создать градиенты CSS, соответствующие среднему значению квадратного корня? [закрыто] ⇐ CSS

[Anonymous]

Этот вопрос возник из этого видеоролика по физике, который я недавно посмотрел: «Цвет компьютера нарушен».
В нем описывается, как правильный способ смешивания цветов состоит в использовании квадратного корня из среднего значения квадраты значений R, G и B, а не просто брать среднее значение.
Поэтому мне стало любопытно, и я решил проверить, как CSS реализует градиенты с помощью простого красно-зеленого градиента:< /p>

Код: Выделить всё

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

Код: Выделить всё

Как видите, градиент некрасивый, с темно-желтым посередине.Я решил реализовать правильный градиент, используя ограничители градиента, которые следуйте кривой sqrt, и результат определенно будет лучше:


< pre class="snippet-code-css lang-css Prettyprint-override">

Код: Выделить всё

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%
);
}

Код: Выделить всё

Из-за ограниченного количества остановок результирующий рендер получается немного блочным, но общий градиент выглядит заметно лучше чем по умолчанию. Добавление еще большего количества остановок еще больше улучшит его:

Код: Выделить всё

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%
);
}

Код: Выделить всё

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

Мой вопрос: есть ли способ добиться более непрерывного градиента, подобного этому, в CSS (либо ванильно, либо с помощью некоторых другой инструмент)?

Подробнее здесь: https://stackoverflow.com/questions/793 ... ot-average