Как мне создать градиенты 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, и результат однозначно лучше:

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

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

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


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