To Skip Navigation Press Enter.Link to the Color Usage Site Home Page
Use the category links below to navigate this web site. All site pages can also be accessed with the site map.
Design Process Color Graphics Topics Color Tool Color Guidelines Aerospace
Color Science Utilities Site Map
Link back to the CURL Home Page

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.


** Please ensure that your system is updated with the latest Java security patches and updates before you use the Color Tool. You will need to enable Java in your browser in order to use the tool, so please be aware of the risk in doing so.
If you have any doubts/concerns, you should contact an IT professional to assist you. **

For general information regarding Java, go to- http://www.java.com/en/download/help/index.xml


About the Color Tool Back to the top of the page.

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

   

> Get the Color Tool 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 Back to the top of the page.

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
Back to the top of the page.

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.
Back to the top of the page.

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. Back to the top of the page.

"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. Back to the top of the page.

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:
go to this page Designing a Color Graphics Page Checklist
go to this page Color Tool Example: Color Space Visualization
go to this page Color Tool Example: Color Search
go to this page Color Tool Example: Display Prototyping



About This Site

Home
| Design Process | Color Graphics Topics | Color Tool | Guidelines | Aerospace | Color Science | Utilities

  Site Curator: Richard Mogford | Responsible NASA Official: Richard Mogford | Privacy Statement


NASA Logo     Ames Research Center Logo