# How to design a color picker

...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...

• i dont know what do you mean but if you want the colors in one take a screenshot of color picker. – Jack Apr 25 '12 at 13:43
• yes, but I want to design one in PS so I can change the size... – Alex Apr 25 '12 at 13:44
• There are plenty of jquery plugins for this. If this isn't just for your own amusement, I wouldn't bother with it. – Joonas Apr 25 '12 at 13:44
• take a screen shot, this would be the easiest step then re-size it, whatever size you want – Jack Apr 25 '12 at 13:45

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.