Colors
Computer Graphics
CPIT 285
Dr. Rayed AlGhamdi
2
Colors
Very early in school we may start using12 colors
We learn the 12 colors are made of three primary
colors
3
Colors
Primary Colors
➢ Red
➢ Blue
➢ Yellow
4
Colors
Mixingprimary colors
three more colors can
be generated, called
secondary
➢ Orange Secondary
Colors
➢ Green
➢ Violet
5
Colors
Furthermore, mixing a
primary color with a
secondary, generate six
more colors called
tertiary:
➢ Yellow-orange
Tertiary
➢ Red-orange Colors
➢ Red-violet
➢ Blue-violet
➢ Blue-green
➢ Yellow-green
6
Colors
7
Color Wheel
8
Color Wheel
How more
colors can be
generated?
9
Color Wheel
How more
colors can be
generated?
10
Color Wheel
To generate more colors, four concepts need to be
considered
11
Color Wheel
Hue refers to the origin of the color we use
Tint
mixture of pure colors with only White added.
Tone
mixture of pure colors with only Gray added
Shade
mixture of pure colors with only Black added
12
Color Wheel
Tint Tone Shade
(mix with white) (mix with gray) (mix with black)
13
HSV Picker
Color Wheel
More colors can be generated on the computer based
on three elements:
➢ Hue: the color
➢ Saturation: color
intensity
➢ Value: color
brightness/darkness
Color Harmony
Eye Pleasing
15
Color Harmony
Thus far, how these colors can be used together?
Some combinations of colors are pleasing to the
eye and some others are not!
➢ Are there ways to choose/organize colors to be eye
pleasing?
➢ How these ways help?
16
Color Harmony
Harmony can be defined as a pleasing arrangement
of parts.
In visual experiences, harmony is something that is
pleasing to the eye.
When something is not harmonious, it's either
boring or chaotic.
So how do we achieve color harmony, using ranges
of hue, saturation and value?
17
Color Harmony Schemes
Coloring harmony schemes can be divided into two
main groups (each consist a number of schemes):
Gradual Harmony
➢ Monochromatic
➢ Analogous
Contrastive Harmony
➢ Complementary
➢ Split complementary
➢ Triadic (equally distant on the wheel)
➢ Tetradic (double complementary)
18
Color Harmony Schemes
Complementary Split Triadic Tetradic Analogous Monochromatic
Complementary (equally distant)
19
Color Harmony Schemes
Monochromatic
➢ This is the easiest
style for harmonic
palette, using only
one color from the
color wheel, and
creating variations
by using saturation
and value.
20
Color Harmony Schemes
Analogous
➢ It uses the colors
which are next to
each other in the
color wheel, such as
from blue to green.
➢ Playing with these
you can get a variety
of well mixed colors
for your design.
22
Color Harmony Schemes
Complementary
➢ It uses colors
opposite from one
another in the color
wheel, such as blue
and orange.
➢ To create interesting
& refreshing palette,
we again use lighter
or darker shades of
colors & a different
intensity.
23
Color Harmony Schemes
Spilt Complementary
➢ It uses the two colors
adjacent to its
complement
➢ This color scheme
has the same strong
visual contrast as the
complementary
color scheme, except
we have more colors
to play with.
24
Color Harmony Schemes
Triadic
➢ It is to choose ones
which are equally
spaced on the color
wheel.
➢ The combinations are
visually very effective.
➢ Use with caution.
➢ One color to be
dominated and use
the two others for
accent.
25
Color Harmony Schemes
Tetradic
➢ It can be called double
complementary.
➢ Color mixing is using
four colors from the
wheel.
➢ The selected colors
make a rectangular or
square shape on the
wheel.
➢ The palette looks best
if one color dominates,
and others are used for
details and as
refreshment.
26
Color Harmony Schemes
Tetradic
➢ In the previous
example, you may
think that 8 colors
were used!
➢ Remember, there
are no fixed lines
between colors on
the wheel.
➢ In addition to tint,
tone & shade
manipulation, any
hue in a range of 0-
360 can be selected.
27
Color Harmony Schemes
Tetradic
➢ It is commonly
used in popular
logos...
Meaning & Feeling
Communication
Color usages should communicate
with the viewers to share the same
meaning/feeling that a designer
wanted to reach.
29
Color Harmony
Theused colors in a scheme should be associated
with the meaning/feeling…
30
Cool Warm
Colors Colors
Color Harmony
Cool Warm Neutral
Colors Colors Colors
Cool colors tend to have Warm colors tend to Neutral colors are a
a calming effect on the have an exciting effect. great selection to mix
viewer. Used alone how- However, when these with cool or warm
ever, these colors can colors are used alone palettes. They are great
have a cold or they can over-stimulate, for background in
impersonal feel, so when generating emotions of design, and tend to tone
choosing cool colors, it anger and violence. down the use of other
may be wise to add a When choosing warm bold colors. Black is
color from another group tones, adding colors from added to create a
to avoid this and add another group will help ‘shade’, while white is
warmth to your palette. to balance this. added to create a ‘tint’.
33
34
35
Color Harmony
Other important factors to bare in mind when mixing
colors are:
➢ Not to use all colors equally (one color should dominate
the others)
➢ Use highly saturated colors with cautions
Beginner’s Guide
Guide for beginners in using the harmony
schemes correctly and communicating
color meanings/feelings professionally.
37
Color Harmony
Ways helping to use the harmony
schemes correctly/ professionally:
➢ Use tools that assist
David M. Kessler’s
Simple Color System
38
Color Harmony
Ways helping to use the harmony
schemes correctly/ professionally:
➢ Be Inspired by Nature
39
Color Harmony
Ways helping to use the harmony
schemes correctly/ professionally:
➢ Get Ideas from others works
40
Color Harmony
Ways helping to use the harmony
schemes correctly/ professionally:
➢ Learn by discovering the coloring
themes in computer software
e.g. MS Office design themes
41
Color Harmony
Ways helping to use the harmony
schemes correctly/ professionally:
➢ Keep browsing designers websites
to find inspiration and palettes.
o www.colorlovers.com
o www.colrd.com
o www.freepik.com
o www.easel.ly
o …
42
Color Harmony
43
Color Harmony
44
Color Harmony
