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 tom [at] tomjewett [dot] com—we'll be happy to keep you informed of updates, if you'd like.

Download

Java runtime environment

To run this application, you will need only the Java Runtime Environment (JRE, possibly now called JavaFX Runtime). This is platform dependent—if it is missing, you should be given instructions when you click the download link below.

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.

Wish list

Copyright 2009‐2013, Tom Jewett, tom [at] tomjewett [dot] com
Department of Computer Engineering and Computer Science, Emeritus
California State University, Long Beach