How to design a color picker

Question

...in photoshop, and like the one in photoshop

I know how to make the gradients, but how do I make the colors precise? Like showing all colors in the hue bar or getting a perfect black-to-transparent gradient.

This color picker image would then be used in javascript...

Answer 1

As Lollero pointed out, there are many jQuery (and plain-ol-javascript) color pickers already out there - so if you're doing a job, you may be better served to use one that is already tested.

If you're doing it for fun, or to learn more about how colors work, check out http://www.easyrgb.com/ They have great resources about the math behind colors including how to convert between different systems.

In direct response to the samples you posted, it's all about the RGB values behind the colors. White = #FFFFFF = RGB(255,255,255). Black = #000000 = RGB(0,0,0). To make a gradient between them, you would simply decrement the values:

RGB(255,255,255)
RGB(254,254,254)
RGB(253,253,253)
...
RGB(1,1,1)
RGB(0,0,0)

If you wanted to make a smooth gradient between R, G, & B, it's the same principle. Start with just R; then increase G while decreasing R; then decrease G while increasing B; then decrease B while increasing R.

Some overly simplified javascript for illustrative purpose:

function drawDiv(r,g,b){
    document.write('<div style="height:1px;width:50px;background-color:rgb(' + r + ',' + g + ',' + b + ');"></div>');
}

var red = 255,
    green = 0,
    blue = 0;

while( red > 0 ){
    red--;
    green++;
    drawDiv(red,green,blue);
}
while( green > 0 ){
    green--;
    blue++;
    drawDiv(red,green,blue);
}
while( blue > 0 ){
    blue--;
    red++;
    drawDiv(red,green,blue);
}

Which produces the following:

If you want to get too much deeper into the javascript or the math, you'll likely need to ask on Stack Overflow.