1

So like I said in the title, I'm trying to make a color picker (with HTML/CSS/JS, if that matters) and I'm basing it off of DuckDuckGo's color picker (seen here).

They use a semi-transparent image overlayed on a div with a solid color. I thought that the image was just a vertical white --> black gradient and a horizontal and vertical opacity gradient. It turns out its more complicated than that.

I downloaded the image they use for their color picker and removed the alpha channel. I've uploaded it here. By the way, it appears they have subtle noise over it, for some reason.

DuckDuckGo color picker overlay with alpha channel removed

I don't know what equation is used to generate this.
I do know that the alpha channel is equal to 1 - (x * y), but I don't know what algorithm is used to get the rgb channels.

I would also like to generate a similar image for an HSL color picker. I assume its the same algorithm, but scaled vertically by half and mirrored. Is that correct?

lolbert hoolagin
  • 85
  • 6

1 Answers1

1

I solved it.

Draw a gradient going from solid white on the left to transparent white (rgba(255,255,255,0)) on the right, then drawing another gradient over top that using alpha blending which goes from solid black at the bottom to transparent black at the top.

Example code using the 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);

The reason I couldn't figure it out was because I was using multiply blending instead of alpha blending.

I still haven't figured out a set of gradients for an HSL color picker.

lolbert hoolagin
  • 85
  • 6