Technical Data Presentation

Introduction to Color

color?

unction of light and represents one

he electromagnetic spectrum. White
ns the full spectrum of color. Objects
e wavelengths of light and reflect
color we perceive is the wavelength
ich is reflected. As an example, a red
all the colors of the spectrum except
t reflects. Our eyes and brain process
d we perceive a color.

Show Relationships Between

Two models of color

Light-Additive
Pigment - Subtractive

Color form light

u

Narrow range of electromagnetic energy from the

sun and artificial light sources
Wavelengths from approximately 400 nanometers
to 700 nanometers
Some colors can be created by a single, pure
wavelength
Most colors are the result of a mixture of
wavelengths.

Spectral Color

Color from light: ROYGBIV

Primary Colors of Light

(Additive)
u

Also corresponds to print (pigment)secondaries

(pigment)secondaries
l

Red, Blue, Green

Mixed together they form white

Mixed together light

primaries and you get
white

Secondary Primaries
of light
Equal mixtures of primary colors
procuce the secondary colors

Also corresponds to print primaries

Sit between each of the light primaries

Have a complementary light primary

l

180 degrees across the circle

How do you achieve all the other

colors?
Unequal mixtures of light

How Computer Displays Show

Color (Also Televisions!)
u

Computer displays produce color by using electron

guns and colored phosphors. A typical computer
display has three electron guns -- red, green, and
blue

How Computer Displays Show

Color (Also Televisions!)
u

Computer displays produce color by using electron

guns and colored phosphors. A typical computer
display has three electron guns -- red, green, and
blue

Pigment
colors:
Pigment colors:
materials contain atoms which are capable of
materials contain atoms which are capable of
selectively absorbing one or more frequencies of light
selectively absorbing one or more frequencies of light
u the color of an object is determined by what color or
u the color of an object is determined by what color or
colors of light are subtracted from the original set. The
colors of light are subtracted from the original set. The
process
..
processisisshown
shownbybydiagram
diagram
u
u

Pigment colors:
Pigment
colors:is yellow
Why
the banana
u

materials contain atoms which are capable of

selectively absorbing one or more frequencies of light
the color of an object is determined by what color or
colors of light are subtracted from the original set. The
process is shown by diagram.

Primary Colors of Pigment

(Subtractive)
u

Also corresponds to light secondaries

l

Magenta, yellow, cyan

Mixed together they form black

magenta

yellow
cyan

Secondary Primaries
of pigment
u

Also corresponds to light primaries

Blue

Green

Red

Devices that use the pigment model

Printers
Magazines
Books
Papers
Posters
Brochures

HSV Model
Hue:Hue is determined by the
dominant wavelength
Saturation:Saturation refers to the
dominance of hue in the color
Value:How light or dark a color is

Hue: The Color

Saturation: How much color in in an

object

Value: Lightness or darkness

HSV Model-How it works

u

Hues are placed on a color wheel

Add Saturation

Radius of hue circle

Ratio of dominant wavelength (hue) to others

Add Value
l

Normal (perpendicular) axis to the hue circle

Total amount of light energy

Making a slice of the HSV Model:

u
u

Open paint:
Use the template from the
server share (saturation)

Pick a hue.

Complete the chart

Example with red

One HSV interface for a computer

Another HSV interface

RGB Model
u

Additive color model

For computer
displays
Uses light to display
color
Colors result from
transmitted light
Red+Green+Blue=White
colors in the RGB model are
much brighter than the colors in the CMYK model.

RGB Model Cont:

u

It is possible to attain a
much larger percentage of the
visible spectrum with the
RGB model. That is because
the RGB model uses
transmitted light while the
CMYK model uses reflected light.

RGB Model Cont:

u

Computers generally display RGB

using 24-bit color. In the 24-bit RGB
color model there are 256 variations for
each of the additive colors of red,
green and blue. Therefore there are
16,777,216 possible colors (256 reds x 256 greens x 256 blues) in the
24-bit RGB color model.
In the RGB color model, colors are represented by varying intensities
of red, green and blue light. The intensity of each of the red, green and
blue components are represented on a scale from 0 to 255 with 0 being
the least intensity (no light emitted) to 255 (maximum intensity). For
example the magenta color would be R=255 G=0 B=255. Black would
be R=0 G=0 B=0 (a total absence of light).

CMYK color model selection

interface
u

Notice that in addition to Cyan, Magenta, and Yellow, Black (referred to by

the letter K) is also mixed in. Even though black can theoretically be made by
mixing the three print primaries, for practical reasons, pure black ink is added
to expand the range of colors.

CMYK Model
u

Subtractive color model

For printed material
Uses ink to display color
Colors result from reflected light
Cyan+Magenta+Yellow=Black

CMYK cont...
u

The muted appearance of the CMYK model demonstrates

the limitation of printing inks and the nature of reflected
light.
When cyan, magenta and yellow inks are combined it
forms black - in theory. However, because of the impurities
in ink, when cyan, magenta and yellow inks are combined
it produces a muddy brown color. Black ink is added to
this system to compensate for these impurities

CMYK cont...
In the CMYK color model,
colors are represented as
percentages of cyan, magenta,
yellow and black. For example
in the above CMYK chart
the red color is composed
of 14% cyan, 100% magenta,
99% yellow and 3% black.
White would be 0% cyan,
0% magenta, 0% yellow
and 0% black (a total absence of ink on white paper).

Color Application
u
u

When In Doubt, Save Images As RGB

Once an image has been converted from RGB to CMYK
and brought into printable gamut, the extra RGB data will
be lost
Use RGB For Screen Displays and CMYK For Print

Color Gamuts: One use of the CIE

u

u
u

System is hard to use due to mathamatical

calculations needed to define colors
One use is to specify ranges of colors that can be
produced by a particular light source.
This range is referred to as a gamut.
RGB computer monitor color gamut is much
smaller than all the possible colors.
When two colors are added and their sum is white
they are said to be complementary colors.

Lets mix colors on our computers

u

Open paint, double click on the colors at the

bottom, select define custom colors

Lets mix colors:

u

Go to the following web site and practice:

http://oldsci
http://
oldsci..eiu
eiu..edu
edu/physics/
/physics/DDavis
DDavis/3050/
/3050/ColorM
ColorM
ix/Pencils/
ix
/Pencils/PhotoRGB
PhotoRGB//PhotoRGB
PhotoRGB.html
.html
Now try this one:
http://oldsci
http://
oldsci..eiu
eiu..edu
edu/physics/
/physics/DDavis
DDavis/3050/
/3050/ColorM
ColorM
ix/Pencils/
ix
/Pencils/PhotoCYMK
PhotoCYMK//PhotoCYMK
PhotoCYMK.html
.html
This one: http://imagers
http://imagers..gsfc
gsfc..nasa
nasa..gov
gov/color/
/color/

Color and Emotions

u

u
u

Different colors evoke different reactions in viewers. Be aware that

some of these reactions will be culturally specific. For example, in the
U.S., brides often wear white as a symbol of purity and widows wear
black as a symbol of mourning. However, in many Asian cultures,
brides wear black. The following is a guide as to the possible meaning
of colors.
Red - danger, stop, negative, excitement, hot
Dark Blue - stable, calming, trustworthy, mature

Light Blue - youthful, masculine,

cool Green - growth, positive, organic, go, comforting

Color and Emotions cont...

u

White - pure, clean, honest

Black - serious, heavy, death

Gray - integrity, neutral, cool, mature

Brown - wholesome, organic, unpretentious

Yellow - emotional, positive, caution

Gold - conservative, stable, elegant

Orange - emotional, positive, organic

Purple - youthful, contemporary, royal

Pink - youthful, feminine, warm

Pastels - youthful, soft, feminine, sensitive

Metallic - elegant, lasting, wealthy

Color hints
u

Avoid the simultaneous display of highly saturated,

spectrally extreme colors. Remember that this causes the
lens to rapidly change shape and so tires the eyes.
Desaturate the colors or else use colors that are close
together in the spectrum.
Pure blue should be avoided for text, thin lines, and small
shapes. Since there are no blue cones in the center of the
retina, these are difficult to see. But blue makes an
excellent background color, e.g. for a computer display it
tends to blur the raster lines.
Avoid adjacent colors that differ only in the amount of
blue. Since blue does not contribute to brightness, this
creates fuzzy edges

Color hints cont...

u

Older operators need higher brightness levels to distinguish

colors.
Colors change in appearance as the ambient light level
changes.
The magnitude of a detectable change in color varies
across the spectrum.

It is difficult to focus upon edges created by color alone.

Avoid red and green in the periphery of large displays.

Opponent colors go well together.

For color-deficient observers, avoid single color

distinctions

Color use
u

Code to discriminate

Code to group

Color Application - Graphs

u

colors close to each other in the HSV color model are hard to
distinguish from each other. So, for example, when you select colors to
represent different lines in a graph, make sure they have a reasonable
spread of Hue, Saturation, Value, or some combination of the three.
Shifts is Hue are traditionally used to code levels of a independent
variable in a graph:

Color Application - Graphs cont...

u

In figure 16, three of the lines are coded with primary colors -- 120
degrees apart on the hue wheel -- while the fourth is fairly even split
between blue and red. In addition, all of the colors are much darker and
more saturated than the white background. These are the two areas of
differentiation you are typically concerned with in a graph:
distinguishing the lines (or other marks) from each other
distinguishing the lines (or other marks) from the
background

Color Application - Graphs cont...

u

Figure 17 shows an example where the range of hues is too narrow:

Figure 17 - Multiple line graph coded with a narrow range of hues

In Figure 17 all of the chosen hues were in a narrow range between red
and magenta, making it difficult to distinguish them from each other.
In addition, the colors were lighter and lower in saturation, adding to
the difficulty in perceiving the differences.

Color Application - Graphs cont...

u

What if you have to print the graph out on a grayscale printer?

use the widest range of values to distinguish the lines from each other

When practical, it is a good practice to redundantly code line graphs

with both shape and color

Color Use - Area Rendering and LUTS

u

Another good color application is

sensing or medical images.

area rendering of remote

With area rendering, each point in the image has a number value
assigned to it (usually between 0-255). A color is then assigned to that
number through a color lookup table (or LUT).
As the visualization designer, you have control of what colors are
assigned to these image values. Usually
some scheme is used to develop this
lookup table. For example, in Figure 19
a grayscale is used

Area Rendering and LUTS cont...

u

Just as with the line graph, the goal is to create a broad a range of color
on one or more dimension of color; in this case, value.
You can create a more rapid change in grays around the area of interest
by compressing the grayscale so it ramps from white to black more
rapidly about the value of 200:

Area Rendering and LUTS cont...

Hue can also be introduced to highlight areas of interest.
A powerful technique is to introduce a single saturated
color into the LUT to represent either a single image
value or a range of image values:
In Figure 21, a saturated red
is used to highlight a range
of values around 200 in the
image. The contrast of a
saturated red against the
desaturated grays stands
out very nicely

Area Rendering and LUTS cont...

Alternatively, if there are multiple image value ranges
of interest, the grayscale LUT can be substituted
for a LUT made up of a range of hues
Figure 22 - A medical image
coded with a range of hues

Area Rendering and LUTS cont...

u

This color LUT progresses in a serial fashion around the hue wheel, so
that ranges of image values are represented by hues of the same family.
This is the same scheme as in the grayscale where the grays move
from white to black through the image values. Just as with the
grayscale image, the lower-mid region of the image is represented by a
fairly narrow range of hues.
This can be improved by having the hues
shift more rapidly in around the image
value of 200 (approximately where the
pointer is on the LUT in Figure 22):

Area Rendering and LUTS cont...

u

Now the all the image values below 200 are represented as black while
the values from 200 to 255 are represented by 20 different hues,
ranging across the full spectrum.
Figure 23 - The image rendered
with a compressed hue
range