feedback
Jun 21 2005

JavaScript Color Picker (PhotoShop-like)

by John Dyer

A few months ago, I built an application for DTS that catalogs pictures, media, ppt, etc. into a huge web database. I wanted to incorporate the ability to search by color (ala iStockPhoto), so I wrote some code to analyze the most frequent color ranges in an image and store that in a index so that the colors could be search like any other many-to-many database relationships.

In order to feel like the web app was a real app, I wanted wanted to have a sweet color picker for the search page. I looked around the web for a good solution, but I couldn't find anything that was really powerful. One day, while getting my house inspected, I came up with the idea to use transparent PNG images to build a color picker just like the one in Adobe PhotoShop. I was able to "trick" JavaScript into producing separate modes for Hue (including a websafe mode), Saturation, and Brightness . Here's the end result:

Hue mode:

ColorPicker - Hue Mode

Saturation mode:

ColorPicker - Saturation Mode

Brightness mode:

ColorPicker - Brightness Mode

Websafe mode:

ColorPicker - Hue Mode

I've finally gotten around to wrapping it up for others to look at and I'll be posting it to my code lab once I get it all setup.

Add comment


(Will show your Gravatar icon)  

  Country flag

biuquote
  • Comment
  • Preview
Loading