Javascript 我正在尝试制作HSV颜色选择器，但我可以'；我不知道如何生成叠加图像

因此，正如我在标题中所说，我正在尝试制作一个颜色选择器（如果需要的话，可以使用HTML/CSS/JS），并以DuckGo的颜色选择器（）为基础

他们使用一个半透明的图像叠加在一个带有纯色的div上。我认为图像只是一个垂直的白色-->黑色渐变和一个水平和垂直的不透明度渐变。事实证明它比那更复杂

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

我不知道是什么方程式产生的。
我知道alpha通道等于

1-（x*y）

，但我不知道使用什么算法来获得rgb通道

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

绘制一个从左侧的纯白到右侧的透明白（rgba（255255,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);

我无法理解的原因是因为我使用了多重混合而不是阿尔法混合

---

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

在Photoshop中工作得很好！（并将在其他项目中发挥作用）