我正在尝试制作HSV颜色选择器，但我无法弄清楚如何生成叠加图像

Question

就像我在标题中所说的那样，我正在尝试制作一个颜色选择器（使用HTML / CSS / JS，如果这很重要）并且我将它基于DuckDuckGo的颜色选择器（seen here）

他们使用覆盖在具有纯色的div上的半透明图像。我认为图像只是一个垂直的白色 - ＆gt;黑色渐变和水平和垂直不透明度渐变。事实证明它比这更复杂。

我下载了他们用于颜色选择器的图像并删除了Alpha通道。我在这里上传了它。顺便说一下，出于某种原因，它似乎会有微妙的噪音。

我不知道用什么方程来产生这个。
我知道alpha通道等于1 - (x * y)，但我不知道用什么算法来获取rgb通道。

我还想为HSL颜色选择器生成类似的图像。我假设它的算法相同，但是垂直缩放一半并进行镜像。这是对的吗？

Answer 1

我解决了。

绘制一个渐变，从左边的纯白色到右边的透明白色（rgba（255,255,255,0）），然后在顶部绘制另一个渐变，使用alpha混合，从底部的纯黑色到透明的黑色顶部。

使用javascript画布的示例代码

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

我无法理解的原因是因为我使用的是多次混合而不是alpha混合。

我还没有找到HSL颜色选择器的一组渐变。