| |
| COLOR
TOOL
On This Page: • About The Color
Tool • Color Tool: Panels
and Controls
• How to use Hue Design Panel
• How to use Luminance Design Panel
• System Requirements
Designers
of information graphics need to choose color combinations that
are legible and that help direct the users' attention to the most
important information. To accomplish this they need to be able to understand
the perceptual relationships among the available colors. Previous
design software has required the designer to supply most of the color
expertise.
The
Color Tool is designed to provide the designer with
views of the perceptual relationships among the possible color choices.
It improves on previous tools by more clearly representing
the constraints imposed by the physical display and the structure of
human
color vision. This should help the designer manage the luminance
contrasts of symbol and background colors by showing the tradeoffs
in hue and saturation.
|
About the Color Tool 
The Color Tool makes use
of an international standard color space that attempts to represent colors with uniform spacing
in dimensions h, C*, and L*, approximating perceptual hue, saturation, and lightness, respectively. It
1) Presents possible color choices as patches that are approximately equally spaced perceptually
2) Shows the color gamut of the display graphically in two different slices
- the lightnesses and saturations available at a chosen hue and
- the hues and saturations available at a chosen lightness
3) Shows the user's selected symbol colors on the selected background colors
4) Displays coordinates of the user's selected colors in several color spaces.
Detailed examples of several things
you can do with the Color Tool are:
Color Space Visualization
Color Search
Display Prototyping |
|
![Snapshot of the Color Tool, showing the choice of colors for specific hue, specific luminance level, view control panel and test panel]()
|
|
|
|
Color Tool: Panels and Controls
The Color Tool has two Design Panels (Hue Panel and Lightness Panel) and the Test Area.
The Hue Panel has controls for selecting a hue and shows the colors available for the chosen hue.
The Lightness Panel has controls for selecting a lightness and shows the colors available for the chosen lightness. The Test Area has five background areas and five lines of text. The color of each background and line of text is independently selectable from the Design Panels. Controls in the Test Area let the user to change the font size of the text lines, switch between coordinate systems for readout of the colors, switch to grayscale mode and clear the test area.
|
|
![Hue panel shows the color choices by luminance and chromaticity for the selected hue.]()
|
|
How to use the Hue Design Panel.
1. Select either a row of text or a background rectangle on the Test
Panel by clicking on the text or background.
A frame will appear to show the selection.
2. Select a hue by
a) clicking on a color
of the color wheel or
b) typing a hue angle into the "h =" text box.
The Hue Panel will show the gamut
of the display for that hue, organized in lightness rows and saturation
columns.
3. Select a color from the Hue Panel by clicking on a color patch.
This will change the
color of the selected text or background on the Test Panel.
4. If a text line was selected the text itself will represent the
coordinates
of the selected color (in the coordinate system displayed in the
text box). If a background
was selected the coordinates
of the selected color are shown on the tab of the background.
5. Continue by selecting another background or text line. |
|
Hue
Design Panel |
|
How to use the Lightness Design Panel.
1. Select either a row of text or a background rectangle on the Test
Panel by clicking on the text or background.
A frame will appear to show the selection.
2. Select a lightness by clicking on a rectangle
of the lightness bar. The Lightness Panel
will show the gamut
of the display for that lightness in polar
coordinates with hue as angle and saturation as radial distance.
3. Select a color from the Lightness Panel
by clicking on a color patch. This will change the
color of the selected text or background on the Test Panel.
4. If a text line was selected the text itself will represent the coordinates
of the selected color (in the coordinate system displayed in the text box). If
a background was selected the coordinates of the selected color are shown on
the tab of the background.
5. Continue by selecting another background or text line. |
|
![Luminance panel shows the color choices by hue and chromaticity for the selected luminance level.]() |
|
Luminance Design Panel |
|
Controls.
"Clear
Samples". This control resets the Test Area to its initial
state and default view options.
"Symbols". This control sets the text lines
and background tabs of the Test Area to display RGB values in decimal
or hexadecimal format, L*hC* values, or graphic symbols.
"Font Size". This control sets the size
of the font in the text lines of the Test Area. Five sizes are available,
in one-point increments, centered on the system font size.
"Color/Grayscale". This control sets the
Test Area to display in the selected colors or in grays of the selected
lightnesses. The grayscale choice allows quick visual scanning for
unusable luminance contrasts.
"Background L*". This control sets the
lightness of the background for the Hue and Lightness Design Panels.
Setting this lightness to approximate that of the backgrounds in the
design allows the appearance of the design panel color patches to
better match how they will look in the Test Area. The accuracy of
the L*hC* values and equal spacing are reduced at the highest and
lowest background L* settings.
|
System Requirements.
The Color Tool window
is 887x740 pixels. We recommend screen resolution 1024x768 pixels.
Your browser
needs Java capabilities to run The Color Tool, as follows.
Windows:
On computers running Windows The Color Tool needs the Sun Java
Virtual Machine. We recommend using the Sun
Java Plug-in (currently version 1.4.2) Download Sun Java Plug-in
from Sun.
Microsoft Internet Explorer 6: Version 6 does not include
a JVM ( it is suggested that you download the
Sun Java Plug-in, above).
Current versions of Internet Explorer
(now IE 6, Service Pack 1 ) are available
here.
Netscape 7: This version of Netscape requires a Java plug-in,
which is offered as an option when you download Netscape, or
download it from Sun, above.
Current versions of Netscape (now 7.1) are
available here.
Mozilla: Mozilla requires the Sun Java Plug-in, above.
Current versions of Mozilla (now 1.4) are available
here.
Macintosh:
Internet Explorer or Netscape: The Color Tool needs Apple's "Mac
Runtime for Java" (MRJ, version 2.1 or later, requires
a PowerPC with 32 MB of RAM and Mac OS 7.6.1 or later).
Download MRJ
from Apple.
Safari: Mac OS X with Plug-in
4.1 installed. |
|
Related Topics:
Designing a Color Graphics Page Checklist
Color Tool Example: Color Space Visualization
Color Tool Example: Color Search
Color Tool Example: Display Prototyping
Home
| Design Process | Color Graphics
Topics | Color Tool | Guidelines
| Aerospace | Color
Science | Utilities
Site Author: Larry Arend
|
