Body BG:

Header BG:
Main BG:
Menu BG:
Footer BG:
Main Text:

Drag me!

Note: This works smoothest in browsers other than Internet Explorer (of course).

Click the buttons then drag the dots on the color wheel or...

Paste/type hexadecimal color values (e.g. #123 or #123456) into the boxes and hit "Enter".

The story...

Years ago I coded a very basic webpage color picker. At the time, it was a moderately novel idea who's implementation was rather on the simple side. It worked well, but it's functionality was a bit limited, mostly due to my lack of in-depth knowledge of scripting languages.

As time passed and I became much more proficient with Javascript, the idea to make a more modern and functional color picker swirled around in the back of my brain. But, being that a color picker is not exactly a cash cow, many other projects took precedence.

As the idea languished, more and more color pickers showed up on the internet, most of which made mine (which used only "web-safe" colors) look like it was coded by a (lazy) junior high school student.

Somewhere along the line, I stumbled across a tutorial on how to use Javascript to programatically generate gradients for use as a color picker, but when I started this project, I found that I must have deleted the bookmark and couldn't find the page.

I spent a lot of time Googling to try and find the page again (I never did), but while searching, I found that several other people had already made (free-to-use) gradients that were better than the one I had planned to create from scratch.

After doing some comparison shopping I eventually settled upon Farbtastic. Though I've read (but don't know) that the developer isn't supporting it any more, it's received high marks in terms of accurate color redendering and is used by "players," Drupal and Wordpress, among others.

Farbtastic itself is only a color wheel or color chooser. Natively, it doesn't do the stuff that it's doing here. I made significant modifications to the code to get it to this point. Anyone interested in looking at my code will probably notice that there are some redundancies, particularly in the areas of returning values to the inputs and in rgb-to-hex conversions. Being that this is my very first attempt at using jQuery, I found it faster to write some of my mods in Javascript rather than figure out the flow of the original Farbtastic script.