This is a java widget for choosing colors that allows any color to be chosen with a single mouse click-and-drag. The widget is a hexagon (representing the shadow of the color cube, [red 0..255, green 0..255, blue 0..255]) containing three bars (representing grid lines parallel to the red, green, and blue axes) and a small hexagon (the handle) covering the intersection of those bars. The dimensions of the panel, thickness of bars, and color of region outside the cube are applet parameters. Clicking the mouse on the little hexagon, dragging the mouse, and releasing chooses a color. It causes the cube background to be colored that color, and causes the hex RGB value for that color to be written in the lower left corner of the panel.

I broke the bars in two at the center of the handle, then moved the pieces out until they're a slight distance from the handle. This lets you see all colors on the bars (none are hidden behind the handle), you can easily tell when you are at the end of a bar (because then one of the pieces of the bar disappears). No time is wasted drawing parts of the bar that are behind the handle (because no part of the bar is behind the handle). The slight space, well, I don't know why but I found people like that better than no space.

Controls

You have to click on the little hexagon to start choosing a color, then drag the mouse to find a new color. The handle shows the current (not yet chosen) color. The bars have graded colors, the color at any point determined by the current color, except the dimension represented by that bar is varied from 0..255. Moving the handle to any point along any bar will change the current color to the color shown at that point on that bar.

The handle does not move when the mouse is inside the handle. The handle covers all points where bars intersect, so outside the handle, if the mouse is on a bar, it is on only one bar. If the mouse is moved to a point along a bar, the handle follows the mouse and the color will only change in the dimension represented by that bar. Attempts to drag the handle beyond the ends of bars are ignored -- the handle sticks at the end of the bar. If the handle is dragged in a direction not on a bar, the color is interpolated between the two nearest bars.

Prior Art

The Solaris style manager has slider bars, and a square that shows the current chosen color. Actually, it has six slider bars, one set for RGB, the other for hue-brightness-grayness. Adjusting one set of bars automatically changes the other set of bars. It would be improved if each bar had graded colors to show what the color would be if you moved that slider to that point.

Microsoft Window's control panel has a color square, then a slider for the third dimension. When you click on a point in the square, the slider is colored, showing what the color would be if you positioned the slider at each point. It uses the hue-brightness-grayness dimensions. The color square does not change color. If you hold down the mouse and drag it, the slider will show all possible colors for whatever point the mouse is over. It's not obvious to try holding down the mouse and dragging it because the "X" centered on the current color doesn't show up until you release the mouse.

There are also 3-d images of a cube split into the 216 standard Netscape colors, some of which can be sliced to see the interior colors. And there are arrays of boxes of different colors, you click on a box and that color is chosen.

Generalizations

The technique used by this applet could be used to represent any number of dimensions, not just 3, although it would get rather hairy beyond about 10. For example, 4 dimensions could be represented by 4 bars in an octagon with an octagonal handle. The sides of the octagon would be the length of the bars.

A 3D display (virtual reality goggles and hand sensors) could represent the 3 bars as 3 orthogonal lines, then the center would be their intersection and could be dragged by hand. That is the way to choose colors in virtual reality.

Right now you can go along a bar, or go between bars and interpolate? Well, you could just color each point in the widget the color that would be chosen if you moved there from here. Then moving the cursor would have to recalculate the color for every point in the plane. It might be good to have contrasting lines (no thickness) representing the axes, to give some sense of location. I don't think that current computers and java engines are up to this yet.

The bars don't have to represent colors. If you wanted to look at the interior of the earth, the bars could show 1-dimensional slices of whatever they were passing through. If you wanted to look at an MRI scan, you could do the same. For the MRI it might be better to have the width and height dimensions shown as a normal picture (a variant of interpolating between bars), then just the distance dimension is a bar showing a 1-dimensional slice in that direction. If you wanted to look at a mathematical formula or a spreadsheet, numbers or names could be placed along the bars. It's a general way of displaying and exploring n-dimensional space.

And of course the bars could vary in the hue-brightness-grayness (HBG) dimensions rather than the red-green-blue (RGB) dimensions.

Notes

This applet doesn't work with appletviewer. I suspect appletviewer is allocating space for every color at every point of the bar, and it isn't garbage collecting that space. I don't have access to Java's memory allocation and cleanup so I can't fix this. The applet has been seen working on Windows NT with Netscape 3.0, 4.0, and IExplorer 3.0, 5.0, and on a Sparc with Netscape 3.0 and 4.0, and on Windows 95 with Netscape 4.0. JavaScript doesn't exist in IExplorer, so the "apply colors" button doesn't work in IExplorer.

The applet and its code are free. (If you prefer, the code is in UseColor.java, ColorHandle.java, ColorBar.java, ColorPanel.java, ChoiceCheck.java, ChoicePanel.java, ColorApplet.java.) I thought of it, designed it, implemented it, haven't patented it, and since it's been on the web since Christmas 1997, I can't patent it either.