Question

I already asked how HSV color pickers work, now I would like to know how RGB color pickers with JavaScript work. Those that don’t use the HTML5 Canvas API. Could somebody explain me the concept behind them?

Here is an example of what I mean: http://www.eyecon.ro/colorpicker/

Note: I’m not looking for ready to use jQuery color pickers. I want to develop my own one for learning purposes! jQuery for the solution is fine though!

Answer 1

Assuming you want to pick RGB values between 0 and 255, similar to the example you are linking to, here’s how I would approach it:

• Generate 1 static image (1×256 pixels) that contains the ‘rainbow gradient’ shown in the slider on the right
• Generate 1 static overlay image RGBA image of 256×256 pixels as follows
  • top left: R=1 G=1 B=1 A=1
  • top right: R=0 G=0 B=0 A=0
  • bottom left: R=0 G=0 B=0 A=1
  • bottom right: R=0 G=0 B=0 A=1
• Use the first image as a background for the slider. It should generate the color to be displayed in the top left corner of the color picker. Use mouse coordinates to find the actual Y value for the color
• create a ‘background’ div (256×256 px) that has the color picked with the slider. Use the second static image as on overlay div on top of it. With the alpha values it should give you a white and 2 black corners and one corner of the color you need.
• use the mouse coordinates in that that square. The color will have to be calculated.

I’m leaving creating the formulas and images to you. 🙂