ColorColor

Based on Lynne Koenecke (1996)http://www.hypersolutions.org/pages/colorDef.html

What is Color? Color:

aspect of object appearance distinct from form, shape, size, position, or gloss that depends upon the spectral composition of the incident light, the spectral reflectance of transmittance of the object, and the spectral response of the observer, as well as the illuminating and viewing geometry.

perceived, attribute of visual perception that can be described by color names such as white, gray, black, yellow, brown, vivid red, deep reddish purple, or by combinations of such names.

Color is light What humans perceive as visible light

occupies a tiny portion of the electromagnetic spectrum, from 4.3 - 7.5 x 1014 Hz.

In frequency (700 nm to 400 nm in wavelength). Below visible light is infrared, microwave,

radio & TV, and electric power. Above it is ultraviolet, X-rays, and gamma

rays. The frequency of the radiation determines the color of the light.

Wavelengths The lowest visible frequency is

called RED; the highest is VIOLET.

WHITE light is an even distribution of all visible frequencies.

BLACK is the absence of light. A white surface reflects all light

frequencies equally; a black surface reflects no light.

Colored surfaces reflect some frequencies and absorb others.

Color

Humans see color as HSL (Hue, Saturation, and Lightness) Hue

basic component of color Saturation

purity of hue Brightness

amount of light reflected is measured in percent from black (0) to white

(100)

Hue Hue

Wavelengths of light perceived as color

the attribute of color by means of which a color is perceived to be red, yellow, green, blue, purple, etc. Pure white, black, and grays possess no hue.

Saturation Purity of color The attribute of color perception

that expresses the degree of departure from the gray of the same lightness. All grays have zero saturation.

Brightness (Lightness, Intensity, Value)

Lightness or darkness of the color in range from white to black

The attribute of color perception by which a non-self-luminous body is judged to reflect more or less light.

Color

Subtractive vs. Additive Inks are subtractive CMYK

Light is additive RGB

Colors (Subtractive) Primary colors: RED,

YELLOW, BLUE. Secondary colors:

ORANGE = Red + Yellow

GREEN = yellow + blue

PURPLE = blue + red. Red + yellow + blue

= muddy brown

CMYK: Cyan, Magenta, Yellow, and Black

Primary colors: CYAN, MAGENTA, and YELLOW.

Secondary colors: BLUE = cyan + magenta RED = magenta + yellow GREEN = yellow + cyan.

BLACK = cyan + magenta + yellow

BLACK (K) INK is used in addition to C,M,Y to produce solid black.

WHITE = no color (on white paper, of course).

Colors: Additive Method Primary colors:

RED, GREEN, BLUE. Secondary colors:

YELLOW = red + green, CYAN = green + blue, MAGENTA = blue + red.

WHITE = red + green + blue.

BLACK = no light.

Color Glossary achromatic

perceived as having no hue, that is, as white, gray, or black.

Same intensity for RGB values. contrast

the degree of dissimilarity of a measured quantity such as luminance of two areas.

Color Glossary dithering

technique to simulate the display of colors that are not in the current color palette of a particular image. It accomplishes this by arranging adjacent pixels of different colors into a pattern which simulates colors that are not available to the computer.

Dithering is the process of converting an image with a certain bit depth to one with a lower bit depth.

Color International Color Consortium

http://www.color.org

Using Color Color can be a powerful tool to

improve the usefulness of an information display in a wide variety of areas if color is used properly.

Conversely, the inappropriate use of color can seriously reduce the functionality of a display system (Gerald Murch)

Color

The average person is able to distinguish between 10,000 and 20,000 colors

Monitors today can display well into the millions of colors

General Guidelines for the Use of Color

Design for monochrome first Use colors conservatively Be consistent in the use of color (color code) Conform to human expectancies, for

example Red = Stop or Danger Green = Go or Normal

Use bright colors to emphasize and nonbright colors to de-emphasize

Color Color adds accents Can add memory and enhance

information understanding Enlivens and informs the user Makes displays attractive and

emotionally appealing Views usually better understand

when viewing color vs. monochrome

Color links logically-related data differentiates between required and

optional data highlights student errors separates various screen areas

prompts, commands, input/output fields emphasizes key points communicates overall structure

Rambally and Rambally (1987) and Strickland and Poe (1989)

Color use a maximum of 5 ±2 colors per screen

Rainbow Rule be consistent in color choices within a

program use the brightest colors for the most

important information use bright colors to cue the learner for new

information use a neutral gray as a background

gray recedes optically

Bailey & Milheim, 1991

Color

use significant contrast between text and a background color to provide a higher degree of text readability

avoid the use of complementary colors

blue/orange red/green violet/yellow

There was a cool breeze.

There was a cool breeze.

There was a cool breeze.

Color

use commonly accepted colors for particular actions (remember these may only be culture specific)

red for stop or warning yellow for pause or consideration

green for go or proceed

Color Backgrounds

cool, dark, low-saturation colors recede on the screen olive green, gray, blue, brown, dark

purple, black, etc.

Foregrounds brighter colors come forward on the screen lemon yellow, pink, orange, red, etc.

Color

Light colors give impressions of large sizes light weights tall heights close distances

Dark colors give impressions of small sizes heavy weights short heights far distances

Color

Changes in color to signify changes

(small and large) blue to green signifies a small change blue to orange signifies a large

change

Being Careful With Color

If colors are not appropriately used or the designer uses too many colors, we can create visual noise (1+1 = 3)

“Above all, do no harm” Tufte (1990) too much color is distracting

Let’s Use Every Color

This software is great. I can use lots of colors. Let’s not waste these colors. What is your favorite color? Graphics have lots of colors!

Problems With Color

Color blind users About10% of men (.4% of women) have

color vision defects Most common is not color blindness, but

color weakness 1% of the population is weak in perception of red 5% of the population is weak in perception of

green up to 15% of the population has some kind of

color deficiency

The individual with normal color vision will see a 5 revealed in the dot pattern.

An individual with Red/Green (the most common) color blindness will see a 2 revealed in the dots.

Use Vischeck to show you what your page will look like to someone who is color blind.

Problems With Color

Color insensitivity solutions Instead of using different hues, use

different saturations or different levels of lightness

Don’t use bright red and bright green, use bright red and pale green

Use consistent shapes in addition to color

Problems With Color

Problem colors The eye cannot precisely focus on all

colors together Red and Blue can’t be focused on

together this causes eye strain The center of the retina has virtually

no blue receptors small blue objects almost disappear when

we try to focus on them

Blue type on red is hard to read. It causes eyestrain.

Red type on blue is also hard to read.

It causes eye strain.strain.

Green type on red is also hard to read.

It causes eye strain.strain.

Order in which colors appears The perceived differences in depth

( chromostereopsis ) that result can slow reading speed considerably.

Rules of thumb Chromostereopsis

Regarding the use of simultaneously high-chroma, spectrally extreme colors, you can see that strong contrasts of red/green, blue/yellow, green/blue, and red/blue can create vibrations, illusions of shadows, and afterimages. Unless you need to create a special visual effect, avoid these combinations.

Problems With Color

Problem color solutions Avoid pure, saturated colors at

opposite ends of the spectrum

Don’t use blue for fine lines and text

Responding to Color

Not everyone responds to color the same

cultural differences

gender

age

occupational differences

Responding to Color

cultural differences In Japan, green implies youth in energy,

but in France it connotes criminality In the US, yellow stands for caution, while

it signifies happiness and prosperity in Egypt

gender Several studies show differences in color

perception between males and females

Color Associations: RED * Red has the strongest universal emotional

impact, probably due to its association with blood and fire and therefore with war.

There are cultural differences, however, in the symbolic meaning of red: in England red symbolizes royalty and prestige

("roll out the red carpet"); in the USA red denotes danger in China red means revolution; in India red is the color of weddings and

celebrations.

RED on Displays On displays red is one of the three

primary colors and is very effective for signaling danger or attracting attention, for example as a border in warning messages, but should not be used in large areas or for backgrounds. Red is a dominant, aggressive color that cries out to be noticed.

Opposite or Complementary Colors Green - Red (When red means "stop," then its

opposite is green, which means "go.")

Blue-Green Red-Orange Blue Orange Blue- Violet Yellow-Orange Violet Yellow Red- Violet Yellow-Green

Yellow Yellow is an incandescent color, which

has a welcoming and inviting quality. Its obvious associations with the sun

leads it to symbolize life and warmth. Because of its high visibility it is

commonly used on emergency vehicles and in combination with black it warns of industrial hazards.

Yellow on Displays On displays yellow is produced by a

combination of red and green and is often rather low in saturation.

Because it is the lightest of all the hues it is an effective activity indicator, for example to denote the active window.

It should not be used for text except against a black or dark blue background.

BLUE Blue is the color of the sky and the sea,

and so suggest air, space and depth. It is the most tranquil of colors, with the

ability to relax and soothe, and provides an effective ground for vivid accent colors.

Cool and soft, it s consistently the most preferred fashion color, at both ends of the social spectrum (smart business suits and casual bluejeans).

Blue Blue symbolizes authority and

spirituality, traditionally the color of the robes of the Virgin Mary.

It is the most widely used colors in national flags, showing a desire for unity and stability.

BLUE Represents corporate reliability to

financial managers (as in “Big Blue” IBM)

Represents death to health care professionals (as in “code blue”)

Blue on Displays On displays blue is one of the three

primary colors. Because the eye is least efficient at short

wavelengths, blue is difficult both to focus and to achieve a good contrast.

Blue should therefore never be used for text or fine detail but rather as a background color, taking advantages of its qualities of expansiveness and infinite depth.

GREEN Green is the color of vegetation and is

therefore linked with nature, from which it has become the hallmark of the environmentalist movement.

The traditional feeling that growing crops meant security has resulted in green being associated with safety and normality.

Pharmacies displays a green cross as a sign of health.

GREEN Lime-green is highly visible as a safety

color in the city; dark green is a camouflage color in the

country and is the least popular color for cars.

Light green surroundings are thought to promote a restful state of mind but too much green may result in a sickly appearance.

GREEN on Displays On displays green is the most visible of

the three primary colors, because the eye has highest luminous efficiency for yellow-green wavelengths, and can thus be used most readily to convey information.

Good contrast in the green channel is essential to legibility of text. Use green as an indicator to show a normal state

Cool and Warm Colors

Cool Warm Achromatic

blue yellow white

turqouise orange grey

violet red black

brown

Green and magenta are marginal, depending on which colors surround them: if surrounded by a cool color such as blue they

will appear warm (yellowish), but if surrounded by a warm color such as

orange they will appear cool (bluish). Artist frequently create a balance in a

composition through contrasting warm against cool and this principle will improve the aesthetic qualities of displays.

Warm colors are more effective for attracting attention.

The color of one's surroundings may have a strong effect on mood. The warm hues are stimulating and the cool

hues are relaxing, though a particular individual's response may be dominated by other associations and memories.

Pink is popular in bedrooms because it imparts a warm, restful and romantic glow.

Recently the use of a particular pink color, known as Baker-Miller pink, has been shown in trials in both the USA and Britain to be effective in reducing violent behavior in prisoners.

Achromatics Between white and black lie all the

degrees of neutral gray, the so-called achromatics.

These exhibit no hue, because their reflected light generates zero retinal color difference signals.

White White clothes are associated with

weddings and christenings. White appliances are popular in kitchens

and laundries and for packaging pharmaceutical products because of the color's perceived purity and cleanliness.

White has the greatest lightness for attracting attention against a dark background.

White on Displays On computer displays a white background

gives maximum legibility of dark text (positive presentation to simulate ink on

paper), but it may cause problems in prolonged viewing if too bright.

White should be avoided in the corners of a display because of the sensitivity of the eye to flickering the peripheral visual field.

Large areas of white on the screen will generally result in 'glare', diluting displayed colors.

BLACK Black acts as a stimulant to other colors,

and harmonises with all. In high fashion, the conformity and

undifferentiated anonymity of black make it the standard for evening wear (tuxedos, black tie), for fascists and anarchists (black shirts), for teenage groupie-clones (black T -shirts and jeans), and for accountants, bureaucrats and undertakers (black suits).

BLACK Black is the natural background

(no signal) in computer displays Black is diluted by ambient light. It provides good contrasts with bright

colors and is most legible against light backgrounds, though bolder fonts are needed for black text on a white background than for white text on a black background.

GREY Grey is a conservative color that reduces

emotional response and is non-committal. It blends well with other colors, which

generally appear to be at their most colorful against a dark grey background, and is popular in business applications.

Grey is a good background for most visual tasks because it establishes an intermediate level of adaptation.

Grey on Displays On displays it is therefore

recommended achromatic backgrounds because they stabilize the colors.

White is not the best choice because of flicker and glare; neither is black because colors can seem to 'hang in the air' against a totally black backkground.

Greys are preferable, with off-white or off-black where legibility is paramount.

Colors for every season… Johannes Ittens points to the

characteristic color palettes of the seasons, as an example of objective correlates between color and nature.

For each season one expects certain combinations of color to occur, and the ordered use of these sets of colors can convey a clear impression of the passage of time:

Season Colors

Spring Summer Fall Winter

yellow Vivid Green

Orange White

Yellow-green

Dark Green Brown Black

Light pink Reds Ochre Grey

Light Blue Yellows Faded Green

Turquoise

lilac Violet Pastels

Eysenck’s Rule There seems to be a universal order for

color preference, first postulated by Hans Eysenck who in 1941 collected together the results of all previous tests.

The most popular color by a wide margin is blue, which is easily verified in any group of twenty or so people. Perhaps blue is popular because it is non-threatening and calming. As the natural color of sea and sky it has associations of depth and space.

Eysenck's Rule Eysenck's "universal" order of color

preference for Western adults. 1. Blue 2. Red 3. Green 4. Purple 5. Yellow 6. Orange

Cultural Meanings of color If your product is to have intemational

appeal, you should be aware that Westem perceptions of color are not echoed all throughout the world.

For example, in Japan, the bad guys wear blue hats; in Egypt, yellow is the color of happiness and prosperity.

It's hard to make combinations that will please everybody, but this is one more argument for making your colors customizable.

Responding to Color

age Older people prefer bright primary colors

it is thought that color acuity declines with age

Children are not able to use color coding as quickly as adults

Colors (nearest to farthest) Red, blue yellow, blue Red, green, blue Red, yellow, blue Red, yellow, green, blue Red, orange, yellow, green, blue Red, orange, yellow, green, blue,

purple

Rules of thumb An effective display will look good even

when only achromatics are used. Choose background and foreground colors

from complementary pairs of colors to assure readability; in other words, colors which when added together will yield white, like yellow and blue.

When choosing a foreground and a background, don't choose color pairs that are both light, or both dark. They don't contrast enough.

Rules of thumb Use black on yellow, or black on white for text.

Use dark letters on light backgrounds. When working with a white background, use

saturated or pure colors for your lettering. When working with a black background, use

desaturated (pastels) colors. Francine Frome, a human factors researcher ,

has shown that viewers see a spectral order as a natural one and would select red, green, and blue as intuitive choices for the front, middle, and back layers, respectively, when viewing a multilayer display.

Rules of thumb The outer edges of the retina are not

particularly sensitive to colors in general. Thus, red or green should be used in the center of the visual field, not in the periphery. Use blue or black near the periphery of the visual field. The retina remains sensitive to these colors near the periphery .

Rules of thumb Use blue for large areas, not for text

type, thin lines, or small shapes. Blue-sensitive color receptors are the least numerous in the retina (approximately 5 percent), and are especially infrequent in the eye's central focusing area, the fovea. Blue is a good for screen backgrounds.