我正在嘗試制作HSV顏色選擇器，但是我不知道如何生成重疊圖像

Question

因此，就像我在標題中說的那樣，我正在嘗試制作一個顏色選擇器（使用HTML / CSS / JS，如果有關系的話），並且將其基於DuckDuckGo的顏色選擇器（請參見此處 ）。

他們使用半透明圖像，該圖像以純色覆蓋在div上。 我以為圖像只是垂直的白色->黑色漸變以及水平和垂直的不透明度漸變。 事實證明，它比這更復雜。

我下載了他們用於顏色選擇器的圖像，並刪除了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拾色器找到一組漸變。