Skip to content

Updated color chooser in JHotDraw

by werner on January 22nd, 2010

Jeremy Woods recently published an article named A Good GUI for Selecting Colors.

Here is a screenshot with one of the PaletteUI’s he created:

ColorPaletteUI by Jeremy Woods

There is very much to like about this arrangement of the colors:

  • The columns represent hue values, the rows brightness values.
  • The colors are ordered by wavelength from lowest (red) to highest (purple).
  • The rows are ordered by brightness from brightest to darkest (bright ‘sky’ above, dark ‘earth’ below).
  • Gray is singled out in a separate column.

I think this arrangement is very forthcoming for the human visual system, allowing to identify the desired colors easily.

And – this was the main point of Jeremy’s article – the interface puts the user in control. The overall design is concise and simple. Everybody can use this chooser right away.

I had a similar color chooser in JHotDraw 7.4, but I used a different arrangement. I had placed the red column in the middle and the darkest row at the top. I have changed this now according to Jeremy’s layout:

JHotDraw new color chooser

You can try it out here.

Here are some points that I considered in this design:

  • There are exactly 12 columns. This allows to represent the additive primary color hues, their complements and their mixtures in an equal spacing of 30 degrees on the color wheel.
  • There are 10 rows. The top row contains a gray scale in 10 % steps. The first 5 of the color rows provide a saturation scale in 20 % steps. The last 5 of the color rows provide a brightness scale in 20 % steps. (The row in the middle is shared with the saturation scale).
  • There is spacing between the color swatches. I hope that this reduces the contrast effect. But I am not sure whether this really is the case – it seems that much more spacing would be needed.
  • A tooltip shows the component values of the color swatch under the mouse pointer.
  • At the bottom, there is a button which allows to open a color chooser. I haven’t designed it yet, so the standard Java color chooser pops up here.

There are some non-visual things in this design as well:

  • A color can be selected using a single mouse press-drag-release interaction. Press the mouse over the color well, drag the cursor to the desired color swatch and then release the mouse button.
  • The color chooser can be quickly dismissed by clicking on the color well again.
  • Java Color objects are created using the constructor which takes a ColorSpace argument. This prevents loss of information when a ColorSpace does not have a bijective mapping with sRGB. For example when different CMYK colors map to the same sRGB color.
  • I have also added a means to enter the color textually. The entry field currently supports sRGB, HSB and Gray color spaces. I will add CMYK in a future revision. Again, the system remembers which color space was used and presents the color components without rounding errors. (Unfortunately, the SVG file format only supports sRGB. Thus after saving and loading a file we always get back to sRGB – sigh).

Unfortunately, there are lots of things missing too.

  • The current color is not marked.
  • I want to pick colors from the drawing. I want to press the mouse button over the color well, drag the cursor over a desired color on the drawing, and then release the mouse button.
  • Support for gradients is missing.
  • The creation of palettes is not supported. (This was my main point in my comment on Jeremy’s article).

Anyway. It was fun to get this far already. 🙂

One Comment

Trackbacks & Pingbacks

  1. Updated Color Chooser in JHotDraw, Part II | Werner Randelshofer's Blog

Comments are closed.