DuckBytes Color Picker
This Online Color Picker grew from two impulses, I couldn't find one on the web when I needed one,
both Microsoft and Netscape, as well as the smaller browsers such as Firefox and Surfari, have come close
enough to each other and to the standards that it's possible to develop cross-browser
compatible web applications without 5 pages of browser detection clogging up the works.
I won't go into detail here but essentially this application utilizes the graphics handling features of PHP
to create an interactive, web-based application. For obvious reasons, most of the bells and whistles
won't work in older browsers, but it will remain functional and useful even for browser-impaired users!
Color is 3-dimensional, there are three distinct properties that make up a given color:
Hue - This is what most people think when they say "color". It describes the redness, greenness, or blueness
of a color. In the RGB model, light is divided into three colorsred, green, and blueand all other colors
are made of combinations of those three primary colors. Mathematically, hue is defined by the spectrum of colors
produced by setting one color channel to 0, another to 255, and varying the third color channel from 0 to 255
(or down from 255), then leap-frogging through sets of 256 hues for a total of 1536 possible hues.
Does that make sense to you? If so I want to hire you. It took me two days to work that out.
That's what the rainbow bar at the left is. It's been reduced to 512 distinct colors for the purposes
of display, but it's the range of hue values available in a 24-bit color space (3 color channels times 8-bit
resolution) such as most computer monitors.
Saturation - In real life, saturation is a function of how "pure" the light reflected from an object is,
or how close to a single frequency or hue. Mathematically, saturation is decreased by adding white to a color
and increased by removing white. Adding and removing "white" is a simple matter of adding or subtracting
from all three color channels. The kicker is that you have to do it proportionally, not equally, in the
three channels to maintain the same hue and luminosity! That one took me disturbingly long to figure out, too.
Luminosity - Contrary to intuition, this really isn't the amount of lightness, but rather the lack of
darkness. Yeah, I know, semantics, but I had to wrap my mind around that before I could figure out what
needed to happen mathematically along the vertical axis of the "select a color" pane. You see, it's generated
by removing "white" from the starting values of hue and saturation along the horizontal axis.
That's pretty much what's going on here. You choose a Hue to take the third dimension out of the picture,
then I generate and display the remaining two dimensions for you to choose from. When you select a point in the
Select a Color pane, the color is rendered in a couple different ways so you can see how it will look
in various uses.
You can enter a hue (your base color) directly by adjusting the numbers in the appropriate fields. If you break the rules
by trying to generate an "impure" color, you'll be duly slapped on the wrist. You can also enter
desaturation and darken values (X and Y coordinates) from the Selected Color pane.
The X and Y coordinates
you last selected are displayed next to the marker. You can turn the marker offto select another point
underneath itby clicking the little green button on the end. You can turn it back on by the link
under the info table in the third pane.
When you select a color, the last selected color is shown near the bottom of the third pane. This is so
you can see the difference from your last color. Personally, I found it somewhat distracting, so I added
a little link so you could turn it off.
Enjoy, explore and use it! If you have any comments or suggestions, be sure to drop me a line.