Subject: Human Machine Interaction

B.E Sem VIII

Module 6

Colors
Learning Objectives: Understand color uses, choosing colors for different
applications

SAKEC
 Colors
➢ Color can only be described in terms of a person’s report of his or her perceptions. The
visual
spectrum of wavelengths to which the eye is sensitive ranges from about 400 to 700
millimicrons.
➢ It is useful to refer to the three properties it possesses: hue, chroma or saturation, and
value or
intensity.
❖ Hue is the spectral wavelength composition of a color. It is to this we attach a
meaning such as green or red.
❖ Chroma or saturation is the purity of a color in a scale from gray to the most vivid
version of the color. The more saturated a hue is, the more visible it is at a distance. The
less saturated, the less visible it is.
❖ Value or intensity is the relative lightness or darkness of a color in a range from black
to white.
SAKEC
 Color Uses
 Use color to assist in formatting a screen:
— Relating or tying elements into groupings.
— Breaking apart separate groupings of information.
— Associating information that is widely separated on the screen.
— Highlighting or calling attention to important information by setting it off from the other
information.
 Use color as a visual code to identify:
— Screen components.
— The logical structure of ideas, processes, or sequences.
— Sources of information.
— Status of information.
 Use color to:
— Realistically portray natural objects.
— Increase screen appeal.
SAKEC
 Choosing Colors
 When choosing colors for display, one must consider these factors: the human
visual system, the possible problems that the colors’ use may cause, the viewing
environment in which the display is used, the task of the user, how the colors will
be used, and the hardware on which the colors will be displayed.

 The primary objective in using color is communication, to aid the transfer of

information from the screen to the user.

SAKEC
Choosing Colors for Categories of Information
 Requires a clear understanding of how the information will be used.
 Some examples:
❖ If different parts of the screen are attended to separately, color-code the different
parts to focus selective attention on each in turn.
❖ If decisions are made based on the status of certain types of information on the screen,
color-code the types of status that the information may possess.
❖ If screen searching is performed to locate information of a particular kind or quality,
color-code these kinds or qualities for contrast.
❖ If the sequence of information use is constrained or ordered, use color to identify the
sequence.
❖ If the information displayed on a screen is packed or crowded, use color to provide
visual groupings.
 Use color as a redundant screen code.

SAKEC
 Choosing Colors for Categories of Information(Conti..)
Colors in context
Usage
➢ Monochrome:
❖ Design for monochrome first, or in shades of black, white and gray.
❖ Screen to be effectively used:
- By people with a color-viewing deficiency.
- On monochrome displays.
- In conditions where ambient lighting distorts the perceived color.
➢ Conservative Use:
❖ Only enough colors to achieve the design objective should be used. More colors increase response
times, increase the chance of errors due to color confusion,
❖ A way to minimize the need for too many colors is not to use color in situations where other
identification methods are available.
❖ A menu bar, for example, will always be located at the top of the screen. Its position and structure will
identify it as a menu bar.
SAKEC
 Choosing Colors for Categories of Information(Conti..)

Discrimination and Harmony

➢ Absolute discrimination:
 Select no more than four or five colors widely spaced on the color spectrum.
 Good colors: red, yellow, green, blue, and brown.
➢ Comparative discrimination:
 Select no more than six or seven colors widely spaced on the color spectrum.
 Other acceptable colors: orange, yellow-green, cyan, violet, and magenta.
➢ Harmonious colors:
 One color plus two colors on either side of its complement.
 Three colors at equidistant points around the color circle.
➢ Extended viewing:
 older viewers or extended viewing, use bright colors

SAKEC
 Choosing Colors for Categories of Information(Conti..)

Emphasis
➢ Drawing attention or to emphasize elements:
 Use bright or highlighted colors
 To deemphasize elements, use less bright colors.
 The perceived brightness of colors from most to least is white, yellow, green,blue, red.
➢ Emphasizing separation:
 Use contrasting colors.
 Red and green, blue and yellow.
➢ Similarity:
 Use similar colors.
 Orange and yellow, blue and violet.

SAKEC
 Choosing Colors for Categories of Information(Conti..)

Location
➢ Central vision:
 Use red and green
➢ Peripheral vision:
 Use blue, yellow, black, and white.
➢ Adjacent colors:
 Colors that appear adjacent to one another should differ in hue and lightness for a sharp edge and
maximum differentiation.
➢ Ordering:
 Order colors by their spectral position.
 The spectral order is red, orange, yellow, green, blue, indigo, and violet, most easily
remembered as “ROY G. BIV.”

SAKEC
 Choosing Colors for Categories of Information(Conti..)

Foregrounds and Backgrounds

Foregrounds:
 Use colors that highly contrast with the background color.
 For text or data, use:
- Black.
- Desaturated or spectrum center colors such as white, yellow, or green.
- Warmer more active colors.
 To emphasize an element, highlight it in a light value of the foreground color, pure white, or
yellow.
 To deemphasize an element, lowlight it in a dark value of the foreground color.
Backgrounds:
 Use a background color to organize a group of elements into a unified whole.
 Use colors that do not compete with the foreground.
 Light-colored backgrounds of low intensity: Off-white or light gray.
 Desaturated colors.
 Cool, dark colors such as blue or black.
 Colors on the spectral extremes.

SAKEC
 Choosing Colors for Textual Graphic Screens
 For displaying data, text, and symbols on a textual graphical screen colors selected should
have adequate visibility, meaning, contrast, and harmony.
 Use effective foreground/background combinations.
 Use effective foreground combinations.
 Choose the background color first.
 Display no more than four colors at one time.
 Use colors in toolbars sparingly.
 Test the chosen colors.

SAKEC
Choosing Colors for Statistical Graphics Screens

 The visual, spatial, or physical representation of information—as opposed to numeric ,

alphanumeric, textual, or symbol representation—is known as statistical or data graphics.

 Common kinds of statistical graphics include bar graphs, line graphs, scatter plots, and pie
charts. Color can also be used to render a statistical graphic screen more legible and
meaningful.

SAKEC
Emphasis:
 Emphasize the graphic’s data.
➢ Number of Colors:
 Use no more than six colors at one time.
 Use one color of five values or lightness.
➢ Size:
 Provide images of an adequate size for the task.
 If the image changes in size, use colors that exhibit a minimum shift in hue or lightness.
 White, yellow, and red on dark backgrounds.
➢ Status:
To indicate a status, use the following colors:
- Proper, normal, or OK: Green, white, or blue.
- Caution: Yellow or gold.
- Emergency or abnormal: Red.
➢ Measurements and Area-Fill Patterns

SAKEC
 Choosing Colors for Web Pages
 Color must always have a meaningful purpose.
 Palette: Use the browser 216-color palette.
 Presentation: Minimize the number of presented colors.
 Always consider color in context.
 Use similar or the same color schemes throughout.
 For foregrounds: Use black or strong colors for text and headings.
 For backgrounds: Use weaker contrasting colors such as off-white or light gray.
- Use a uniform color in large areas.
- The smaller the element, the more contrast is required between it and its background.

SAKEC
 Choosing Colors for Web Pages(conti…)

 Larger images should use: Flat, Web-safe colors.

- Fewer colors than small images.
- Select colors that can be easily reproduced in black and white.
 Links:
- Use default colors for links.
 Make unselected/unvisited links blue.
 Make selected/visited links purple.
- Do not display non-link text in link colors.
- Test all colors.

SAKEC
 Uses of Color to Avoid
 Relying exclusively on color.
 Too many colors at one time.
 Highly saturated, spectrally extreme colors together: Red and blue, yellow and purple.
 Low-brightness colors for extended viewing or older viewers.
 Colors of equal brightness.
 Colors lacking contrast: For example, yellow and white; black and brown; reds, blues, and
browns against a light background.
 Fully saturated colors for text or other frequently read screen components.
 Pure blue for text, thin lines, and small shapes.
 Colors in small areas.
 Color for fine details.
 Red and green in the periphery of large-scale displays.
 Adjacent colors that only differ in the amount of blue they possess.
 Single-color distinctions for color-deficient users.
 Using colors in unexpected ways and to improve legibility of densely packed text.

SAKEC
 References
 The Essential Guide to User Interface Design Second Edition, Wiley.
 An Introduction to GUI Design Principles and Techniques ,Wilbert O. Galitz.