我正在尝试制作一个 HSV 颜色选择器，但我不知道如何生成叠加图像

Question

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

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

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

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

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

Answer 1

我解决了

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

示例代码使用 javascript canvas

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 颜色选择器的渐变。

我正在尝试制作一个 HSV 颜色选择器，但我不知道如何生成叠加图像

I am trying to make an HSV color picker but I can't figure out how to generate the overlay image

javascript

image

color-picker

hsv

hsl