JavaScript Color Picker (PhotoShop-like)

June 22, 2005 | Uncategorized | 0 Comments

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.

Leave a Reply

Hi, I'm John Dyer. In my day job, I build websites and create online seminary software for a seminary in Dallas. I also like to release open source tools including a pretty popular HTML5 video player and build tools that help people find best bible commentaries and do bible study. And just for fun, I also wrote a book on the theology of technology and media.

Fork me on GitHub

Social Widgets powered by AB-WebLog.com.