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…

enter image description here

enter image description here

Answer

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:
Example

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

Attribution
Source : Link , Question Author : Alex , Answer Author : Farray

Leave a Comment