This section of Jemima's Chevron is devoted to the 4096 Color Wheel. This page includes an brief explanation of web-safe, web-smart, unsafe, RGB, and HSV colors, the version history of the color wheel, and links to other helpful color pages.
Once, long ago, monitors could display only a restricted number of colors without dithering or other color discrepancies. The traditional solution to this problem was to use a restricted color palette known as the Netscape 216 colors, browser-safe colors or the web-safe colors. In hexadecimal form, the web-safe colors are composed of three pairs of identical hexadecimal digits selected from 00, 33, 66, 99, cc, and ff; for example, #000000 is black, and #cc0000 is red.
Time passed, as it so frequently does, and new hardware supported thousands or millions of colors. People grew tired of the old 216 colors. They wanted more earth tones, more variety. The web-smart colors are those 4096 colors composed of any three pairs of identical hexadeximal digits (0-9 and a-f), such as #dd1188.
The unsafe colors are the full set of 16,777,216 hexadecimal colors, featuring any color between #000000 and #ffffff, such as #5a832d.
Web colors are RGB colors. The first pair of digits represents the red value (in hexadecimal form), the second pair represents green, and the third blue. Adding the prescribed amounts of red, green and blue together produces a color, but it's difficult for the human user to see the correspondence between #333300 and olive green.
HSV is an alternate color map which is more user-friendly. Hue means the color itself. In HSV color wheels like the 4096 Color Wheel, hue corresponds to the angle, with pure red at 0 degrees and green around 120 degrees. Saturation is the amount of color present. A saturation of 0 mean no color - that is, pure white, black, or grey. A saturation of 1 (or 100%) means full color. Value is sometimes called brightness - a value of 0 is black, while a value of 1 (or 100%) indicates a pure color or pure white.
Because RGB is so opaque, I converted the underlying wheel mechanics to HSV, and added an SV square to the right of the color wheel corresponding to the last chosen color. On my SV square, saturation ranges from 0 at the left to 1 at the right, and value ranges from 0 at the bottom to 1 at the top.
FYI, HSL is like HSV, but uses lightness, which ranges from pure black to pure white, in the place of value. Pure color appears in the middle of the L scale (not shown).
In the interest of full disclosure I should note that the SV square is simulated, not live. I used a greyscale PNG with alpha transparency over a background div set to the appropriate hue - only the background color changes when you choose a new hue. The code that created the image is available at hsvwheel.phps and was a fine education in PNG transparency. I also made an HSL version before deciding to go with HSV, which is available upon request.
The current location of the 4096 Color Wheel is http://jemimap.ficml.org/style/color/wheel.html. The current version is 2.1. The Color Wheel is free for any use. To save it, download the html page, the image, and the blank gif for IE.
The French translation was kindly provided by Nicolas Taffin.
Version 2.x of the 4096 Color Wheel includes a square to the right of the wheel that displays all values of saturation and value for the last chosen hue. The box was added to provide better coverage in the grey tones. Keyboard navigation for hues was added in 2.1.
Versions 1.x of the 4096 Color Wheel were based on the Hexadecimal Color Wheel script by D10n, formerly housed at http://www.iinet.net.au/~biab and currently available at The Javascript Source.
Version history:
Some edge values on the square may be slightly off and need checking.
In Mozilla, Find As You Type may interfere with keyboard navigation, especially for the enter key. Keep typing until Mozilla gives up, or go to Preferences | Advanced | Keyboard Navigation and uncheck anything related to Find As You Type.
In Mac/Mozilla, keys won't repeat when held down.
In Mac/IE 5.2.3 for OSX, the colors don't track with the page, so if you scroll down you get the wrong colors or all #ffffff. The workaround is not to scroll down when picking colors. There's also a CSS dotted border in the wrong spot and other CSS strangeness - ignore it.
In Safari 1.2, the last color block of the full color list is slightly munged. I'm guessing it's a weird DHTML bug, since Camino doesn't do it.
Old browsers with bad PNG transparency support may not show the SV color square properly. IE 5.5 and 6 have been addressed, but I'm assuming 5.0 is broken. The wheel should still work.
If you have PNG problems or response time seems slow, you can downgrade to an earlier version. I recommend 1.4.
Suggestions and bug reports are welcome at webmaster@jemimap.cjb.net.
