Ich versuche, einen HSV-Farbwähler zu machen, aber ich kann nicht herausfinden, wie man das Überlagerungsbild erzeugt

Question

So wie ich im Titel sagte, ich versuche, einen Farbwähler (mit HTML/CSS/JS, wenn das wichtig ist) und ich basiere es von DuckDuckGo's Farbauswahl (seen here).

Sie verwenden ein halbtransparentes Bild, das auf einem div mit einer Volltonfarbe überlagert ist. Ich dachte, dass das Bild nur ein vertikaler weißer -> schwarzer Farbverlauf und ein horizontaler und vertikaler Opazitätsgradient ist. Es stellt sich heraus, dass es komplizierter ist.

Ich habe das Bild, das sie für ihre Farbauswahl verwenden, heruntergeladen und den Alpha-Kanal entfernt. Ich habe es hier hochgeladen. Übrigens scheint es, dass sie aus irgendeinem Grund ein subtiles Rauschen haben.

Ich weiß nicht, welche Gleichung verwendet wird, diese zu erzeugen.
Ich weiß, dass der Alphakanal gleich 1 - (x * y) ist, aber ich weiß nicht, welcher Algorithmus verwendet wird, um die RGB-Kanäle zu erhalten.

Ich möchte auch ein ähnliches Bild für einen HSL-Farbwähler erzeugen. Ich nehme an, es ist derselbe Algorithmus, aber vertikal skaliert und gespiegelt. Ist das korrekt?

Answer 1

Ich löste es.

Zeichnen Sie einen Farbverlauf ausgehend von durchgehend weiß auf der linken Seite zu transparentem Weiß (rgba (255,255,255,0)) auf der rechten Seite und zeichnen Sie dann einen weiteren Farbverlauf über Alpha-Blending, der von durchgehend schwarz nach transparentem Schwarz verläuft oben.

Beispielcode JavaScript Leinwand mit

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

Der Grund, warum ich es nicht aus war Figur konnte, weil ich mehrfach wurde anstelle von Alpha-Blending mische.

Ich habe noch nicht eine Reihe von Farbverläufen für einen HSL-Farbwähler herausgefunden.