Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

share|improve this question
    
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
3  
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
add comment

1 Answer

up vote 3 down vote accepted

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.