Я пытаюсь сделать сборщик цветов HSV, но я не могу понять, как создать оверлейное изображение.

Question

Так, как я сказал в названии, я пытаюсь сделать подборщик цветов (с HTML/CSS/JS, если это имеет значение), и я основываю его на выборе цвета DuckDuckGo (seen here).

Они используют полупрозрачное изображение, наложенное на div с сплошным цветом. Я думал, что изображение было только вертикальным белым -> черным градиентом и горизонтальным и вертикальным градиентом непрозрачности. Оказывается, это более сложно.

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

Я не знаю, что уравнение используется для генерации этого.
Я знаю, что альфа-канал равен 1 - (x * y), но я не знаю, какой алгоритм используется для получения каналов rgb.

Я также хотел бы сгенерировать подобное изображение для набора цветов HSL. Я предполагаю, что тот же алгоритм, но масштабирован вертикально пополам и зеркалирован. Это верно?

Answer 1

Я решил.

Нарисуйте градиент, идущий от сплошного белого слева к прозрачному белому (rgba (255,255,255,0)) справа, затем рисуем еще один градиент сверху, используя альфа-смешение, которое идет от сплошного черного снизу до прозрачного черного на вершине.

Пример кода с использованием яваскрипта холст

var ctx = document.getElementByID("canvas").getContext("2d"); 

var saturationGradient = ctx.createLinearGradient(0, 0, 256, 0); 
saturationGradient.addColorStop(0, "rgba(255, 255, 255, 1)"); //white 
saturationGradient.addColorStop(1, "rgba(255, 255, 255, 0)"); //white transparent 
var valueGradient = ctx.createLinearGradient(0, 0, 0, 256); 
valueGradient.addColorStop(0, "rgba(0, 0, 0, 0)"); //transparent 
valueGradient.addColorStop(1, "rgba(0, 0, 0, 1)"); //black 

ctx.fillStyle = saturationGradient; 
ctx.fillRect(0, 0, 256, 256); 
ctx.fillStyle = valueGradient; 
ctx.fillRect(0, 0, 256, 256); 

Причина я не мог понять это произошло потому, что я использовал многократно смешивания вместо альфа-смешивание.

Я до сих пор не понял набор градиентов для набора цветов HSL.