Photoshop-Like JavaScript Color Picker
Demo || Download
Download Free HTML Color Picker With JavaScript Full Script For Downloading, You can use it for your website. Photoshop Like JavaScript Color Picker.
Introduction: Many people have noted “it looks like [picker X]” and they are right: there are tons of pickers out there (I listed a few in the original post). The main difference in mine is that it has all 6 picking options (H,S,V,R,G,B) not just Hue. I haven’t seen one that does that and this is a fun way of showing what JavaScript can do.
—–
There are a lot of nice JavaScript color pickers out there (colorjack, colourmod, yahoo, dojo, nogray, mootools), but none of them has a full HSB and RGB options of Photoshop’s picker. Some pickers try to generate the entire color map in JavaScript by drawing a 256×256 grid made of divs. This is very slow, which is why color pickers that go the JavaScript route often don’t draw the entire map, but instead only 4×4 or 8×8 blocks (ColorZilla).
The other options is to use transparent PNGs and opacity to fake the maps. A few years back, I did this, but it didn’t have RGB and was Firefox and IE only (excellent tutorial here). To create the color mixing, the larger map is made of two layers and the vertical slider has four layers (two are used for H, S, or B; four layers for R, G, or B). Some others pickers use this method for a hue map, but don’t include the other maps (S,V,R,G,B). The JavaScript is made up of some color methods, a slider control, a handler for input, and the ColorPicker object to put it all together. Click the image below to try it out...
—–
There are a lot of nice JavaScript color pickers out there (colorjack, colourmod, yahoo, dojo, nogray, mootools), but none of them has a full HSB and RGB options of Photoshop’s picker. Some pickers try to generate the entire color map in JavaScript by drawing a 256×256 grid made of divs. This is very slow, which is why color pickers that go the JavaScript route often don’t draw the entire map, but instead only 4×4 or 8×8 blocks (ColorZilla).
The other options is to use transparent PNGs and opacity to fake the maps. A few years back, I did this, but it didn’t have RGB and was Firefox and IE only (excellent tutorial here). To create the color mixing, the larger map is made of two layers and the vertical slider has four layers (two are used for H, S, or B; four layers for R, G, or B). Some others pickers use this method for a hue map, but don’t include the other maps (S,V,R,G,B). The JavaScript is made up of some color methods, a slider control, a handler for input, and the ColorPicker object to put it all together. Click the image below to try it out...