The Color Tutor application

There are many freeware color pickers, color mixers, color analysers and similar applications available on the Web. This one is specifically designed to complement our Color Tutorial with hands-on demonstration of the principles explained there. We've provided a set of exercises (links also at left and below), and it should also be useful as a tool for Web developers to ensure that their color schemes provide sufficient contrast between text and background. The application was coded in JavaFX™ by Antoine Poulet; concept and design by Tom Jewett.

Known limitations and bugs (v.1.0)

See also "Wish list" at bottom of page. As with all new programs, we need your help and feedback! Please email jewett@csulb.edu, apoulet@free.fr — we'll be happy to keep you informed of updates, if you'd like.

Download

Java runtime environment

To run this application, you will first need to install Java on your computer. Most users will need only the Java Runtime Environment (JRE), version 6 update 14. It is free from the Sun Microsystems download page. The JRE is the second download listed on that page; once you have selected platform and language, the version you want is the Windows Offline Installation. If you need anything as powerful as the full Java Development Kit (JDK), you would not have needed to read these instructions!

Color Tutor

License: Freeware. Copyright 2009, Antoine Poulet and Tom Jewett. You may run or download this application for non-commercial use and use it on as many computers as you own (including school labs). You are welcome to link to this page (e.g., from syllabi, resource lists, blogs, rating sites, etc.). However, you may not re-post or re-distribute the application in any form, whether modified or not, without specific permission from the authors.

Run or download: In your browser, open the Java start file (.jnlp) for this application. The response will be browser-dependent:

Operation

RGB panels (foreground and background)

RGB panel, description follows

HSB panels (foreground and background)

HSB panel, description follows
  • Sat and Bright sliders: control saturation and brightness values from 0–100%. May be operated with mouse or arrow keys when the control has focus.
  • Sat and Bright text boxes: display value of sliders and permit entry of specific values. To enter a value, click or tab to the box, type a value from 0–100, and finish by tabbing to the next control or clicking elsewhere. You do not need to type the "%" sign.
  • Hue wheel control: displays value along with the color that is associated with that value; permits selection of hue in radial degrees from 0–360. May be operated with mouse or arrow keys when the control has focus.
  • Hue text box: To enter a value, click or tab to the box, type a value from 0–360, and finish by tabbing to the next control or clicking elsewhere. You do not need to type the "°" sign (which would be difficult to do, anyway!).

Color panel (center of application)

Color panel, description follows
  • There are no operable controls on this panel.
  • Foreground color is displayed in the upper left; background color in the lower right.
  • Contrast ratio is displayed above the color panels; an example of text in the selected colors is given below.

History

Item Status Date
Brightness slider bug fix posted July 25 2009
v.1.0 release posted July 22 2009
v.0.9 beta release posted June 4 2009

Wish list

Copyright 2009, Tom Jewett, jewett@csulb.edu
Department of Computer Engineering and Computer Science, Emeritus
California State University, Long Beach