View
218
Download
0
Category
Tags:
Preview:
Citation preview
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.
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.
Recommended