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
