Сулейман Демирель Университет имени

атындағы Университет Сулеймана Демиреля

040900, Қазақстан Республикасы, 040900, Республика Казахстан,
Қаскелен қаласы, Абылай хан даңғылы, 1/1 Город Каскелен, проспект Абылай хана, 1/1
www.sdu.edu.kz www.sdu.edu.kz

Color Theory
PED242 – User Interface Design

Spring 2023 1
 Color theory
We can talk about color using two kinds of terminology:
 Color generation systems.
 Color harmony system.
Graphic artists and photographers certainly have to understand color
harmony. Some of that is intuitive. As for color generation, that’s
technical, and based on physics.

Spring 2023 2
 The Visible Spectrum
Color, of course, is simply visible
wavelengths from the
electromagnetic spectrum.

Also part of the spectrum is

infrared, ultraviolet, radio
waves and x-rays.

Spring 2023 3
 The Color Wheel

 If the ends of the spectrum are bent around a color wheel is formed:

Spring 2023 4
 The Color Wheel
 Colors on the wheel can be described using
120˚ three parameters:
o n
tu
rati 0˚ 1. 1. Hue : degrees from 0˚ to 360˚
S a
2. 2. Saturation: brightness or dullness
3. 3. Value: lightness or darkness
Hu
e ( As suggested by Henry Albert Munsell in
“A Color Notation”, 1905)
240˚

Spring 2023 5
 Types of Color Theories
 Subtractive Theory
 The subtractive, or pigment theory deals with
how white light is absorbed and reflected off of
colored surfaces.

 Additive Theory
 The Additive, or light theory deals with
radiated and filtered light.

Spring 2023 6
 Subtractive Theory
 Black absorbs most light
 White reflects most light
 Colored Pigments absorb light and reflect only the frequency
of the pigment color.
 All colors other than the pigment colors are absorbed so this
is called subtractive color theory.
 The primary colors in Subtractive Theory are:
 Cyan( C )
 Magenta( M )
 Yellow( Y )
 Black( K )
 Subtractive or Pigment Theory is used in printing and painting.

Spring 2023 7
 Additive Theory
 Black radiates no light
 White (sun) radiates all light
 Video is the process of capturing and radiating light,
therefore it uses Additive (Light) Theory not
Subtractive (Pigment) Theory.
 The primary colours in Additive Theory are:
 Red( R )
 Green ( G )
 Blue( B )
 The primary colours add together to make white Light Theory is also called Additive
Theory. Light Theory is used in Television, theater lighting, computer monitors, and video
production.
Spring 2023 8
 Color Theory
 Color Wheel
 Color Values
 Color Schemes

Spring 2023 9
 The color wheel
 The color wheel fits together like a
puzzle - each color in a specific place.
Being familiar with the color wheel
not only helps you mix colors when
painting, but in adding color to all
your art creations.

Spring 2023 10
 Primary Colors
 Primary colors are not mixed
from other elements and they
generate all other colors.

 Red
 Yellow
 Blue

Spring 2023 11
 Secondary Colors
 By mixing two primary colors, a
secondary color is created.

 Red + Yellow = Orange

 Yellow + Blue = Green
 Blue + Red = Purple

Spring 2023 12
 Intermediate Colors
 Intermediate, or Tertiary, colors are
created by mixing a primary and a
secondary.
 yellow-green
 yellow-orange
 red-orange
 red-purple
 blue-green
 blue-purple
Spring 2023 13
 Neutral Colors
 The principles of color mixing let us describe a variety of colors, but
there are still many colors to explore. The neutral colors contain
equal parts of each of the three primary colors. Black, white, gray
and sometimes brown are considered "neutral”.

Spring 2023 14
 Color values
 Color values are the lights and darks of
a color you create by using black and
white (‘neutrals”) with a color. This
makes hundreds of more colors from
the basic 12 colors of the wheel.
 pure colors = hue
 color + white = tint
 color + grey = tone
 color + black = shade

Spring 2023 15
 Tints
 Tints are lightened colors. Always begin with white and add a bit of
color to the white until the desired tint is obtained. This is an
example of a value scale for the tints of blue.

Spring 2023 Color values 16

 Tones
 Tones are made by adding gray to a hue. A pure gray that consists
only of black and white.

Spring 2023 Color values 17

 Shades
 Shades are darkened colors. Always begin with the color and add
just a bit of black at a time to get the desired shade of a color. This is
an example of a value scale for the shades of blue.

Spring 2023 Color values 18

 Color Schemes
 Color Schemes are a systematic way of using the color wheel to put
colors together… in your art work, putting together the clothes you
wear, deciding what colors to paint your room…..
 monochromatic, complementary, analogous, warm and cool.

Spring 2023 19
 Monochromatic
 “Mono” means “one”, “chroma” means “color”… monochromatic
color schemes have only one color and its values. The following slide
shows a painting done in a monochromatic color scheme.

Spring 2023 20
 Using the Wheel
 The colors are arranged on the wheel in
such a way that purposeful color choices
can be made.
 Choices of color combination depend on
what you are trying to accomplish.
Such as:
 Contrast
 Blending
 Affect

Spring 2023 21
  This painting has a
monochromatic color
scheme - blue and the values
(tints and shades) of blue.

Spring 2023 22
 Complementary
 Complementary colors are
opposite on the color wheel
provided a high contrast - if you
want to be noticed wear
complementary colors!

Spring 2023 23
 Using the Wheel
 Complementary Colors
 Colors opposite from one another on the
wheel.
 These colors will provide the most visual
contrast.
 Contrast is the noticeable level of
difference between two colors.

Spring 2023 24
 Contrast with Text
 This is why black text on a white background is so popular and
effective. There’s a high degree of contrast.
 The more a color contrasts with the colors around it, the more easily
visible that color will appear. This fact is extremely important when
using different colored texts and backgrounds.
 On the other hand, blue and black offer little contrast. An extended
read of this combination could be painful.

Spring 2023 25
 Contrast with Text
 But be careful, even though colors may contrast they may not
always work well for text and background pairing.
 “Simultaneous Contrast” occurs when a color like red is fore
grounded on blue. Note how the text appears to slightly vibrate.
This would get annoying real quick.
 But simultaneously be aware of extreme lack of contrast in your text
and background choices.
 Honestly, this is just painful. Do not make your readers struggle with
this!

Spring 2023 26
 Practical Example
 Neither of these flyers is completely ineffective and both provide
shape contrast with the text box.

Spring 2023 27
  This painting has
complementary colors and
their values - blues and
oranges.

Spring 2023 28
 Analogous
 The analogous color scheme is
3-5 colors adjacent to each
other on the color wheel. This
combination of colors provides
very little contrast.

Spring 2023 29
 Using the Wheel
 Analogous Colors
 Colors positioned next to each
other on the wheel.
 These colors have very little
contrast; therefore, they will
provide harmonious blends.

Spring 2023 30
 Analogous Colors in Nature
 Nature offers an excellent look at analogous colors in action.
Question: what color of flower could be added to this photo to
provide a strong and attention drawing contrast?

Spring 2023 31
  Analogous colors are
illustrated here:
yellow, yellow-green,
green and blue-green,
blue

Spring 2023 32
 Warm
 Warm colors are found on the
right side of the color wheel.
They are colors found in fire and
the sun. Warm colors make
objects look closer in a painting
or drawing.

Spring 2023 33
  This is an illustration of the use
of warm colors - reds, oranges
and yellows.

Spring 2023 34
 Cool
 Cool colors are found on the left
side of the color wheel. They are
the colors found in snow and ice
and tend to recede in a
composition.

Spring 2023 35
  Note the cool color
scheme in this
painting (greens,
purples and blues).

Spring 2023 36
 Nature
 We Now Know Why Tigers' Bright Orange Color Is Actually Excellent
Camouflage

Spring 2023 37
 Nature

Spring 2023 38
 Military camouflage
 What color schemes are used in the army?

Spring 2023 39
 Color Temperature Scale
 “White” light actually usually has a slight color cast. This is due to
either the color temperature of the source, or the wavelengths
missing.
 Higher temperature light is bluer. Lower temperature is redder. This
is expressed in color temperature, using the Kelvin scale.

Spring 2023 41
 Color Temperature Scale
 Sunlight is about 5,500 degrees Kelvin.
 Electronic flash is about 6,000 degrees K, so slightly blue.
 Incandescent light is about 3,000 degrees K, so orangeish.
 Candle light is about 2,400 degrees K, so reddish.

Spring 2023 42
 Color Temperature Scale
 Note the reddish cast to sunset and candle light, compared with the
bluish cast of a sunny day.

Spring 2023 43
 Color Temperature Scale
 Some light is missing whole areas of the spectrum. Florescent light,
for example, is often missing warm colors, and so may look a rather
sickly greenish/bluish

Spring 2023 44
 Color Temperature Scale
 Of course, digital cameras willadjust
for color cast, to an extent. And we
can adjust it in Photoshop, as we
have learned.
 Sometimes we don’t want to take the
color completely out of context,
however. Candle light should look
warm.

Spring 2023 45
 Color in Digital Images
 In addition to color cast, graphic artists and photographers need to
understand how color is generated by machines we use, such as
computers, televisions, and printing presses.
We generate colors in two ways:
 The additive system.
 The subtractive system.

Spring 2023 46
 Color in Digital Images
 The additive system begins with the absence of color, that is,
black, and adds colors to that to reach the color we want.
 It is based on three additive primaries: red, green, and blue
(RGB system).
 Additive color is used in projected systems, such as televisions
and computer monitors, and movies.

Spring 2023 47
 Color in Digital Images
 Consider the computer monitor. A monitor projects
color based on three “guns” of variable voltage:
one each for R, G and B. The more intense the
voltage, the more intense the color projected.
 These voltages are expressed in numbers from 0
(black, no color), to 255 (most intense color).
 Voltages are projected as phosphor (light sensitive)
dots on a screen. Check out a computer screen
with a magnifying glass; you’ll see it’s actually
made of square dots, called picture elements, or
pixels.
Spring 2023 48
 Color in Digital Images
 Obviously, 0, 0, and 0 voltage will produce black,
while 255, 255, and 255 will produce
white.
 Other colors depend on a combination of
intensities of RGB.
 Keep in mind the color is not actually mixed on
the screen. It is either on or off, based on bits,
color or no color.
 Each pixel has a certain number of bits that can
display a color.
Spring 2023 49
 Color in Digital Images
 Most modern computer monitors can transmit “true color,” or 24-bit
color. This means each “channel” (R, G, or B) contains 8 bits per
channel that can transmit color.
 Eight bits means the channel can make eight combinations of on or
off of the color, per pixel, 256 colors total. You have three channels.
How many colors can be generated?
 256 x 256 x 256=16,777,216

Spring 2023 50
 Color in Digital Images
 Eight-bit color also exists, 256 colors total. These are called “web-
safe” colors, because they are sure to render accurately on anyone’s
monitor. Nowadays we don’t have to worry about that as much.
(Below: 8-bit vs. 24-bit color.)

Spring 2023 51
 Color printing
 You also can have 32-bit color, even 48-bit color. The last one has
281 trillion colors, far more than the eye can discern. But it is useful
in some printing techniques, or so I’ve read.
 Additive color is really handy in projected applications. But it doesn’t
work in printed applications, that is, ink on paper.

Spring 2023 52
 Color printing
 Additive color won’t work for printing because we can’t begin with
black. We must begin with a piece of paper, and that’s usually white.
 White, as we know, is all colors. So we can’t add to all colors. We
must subtract.
 Furthermore, an offset printing press can’t generate the enormous
number of colors available on a computer screen. We need to run a
piece of paper through the press for each ink.

Spring 2023 53
 Color printing
 The press below has four heads, one for each ink in the CMYK
system.

Spring 2023 54
 Color printing
 Printed color, therefore, is based on the subtractive system. While
the additive primaries (used to generate all colors ) are RGB,
beginning with black…
 …the subtractive primaries are Cyan, Magenta, Yellow and Black
(CMYK), and begin with white.
 Cyan=blue-green. Magenta=red-blue. Yellow=red- green.
 Note the relationship between the additive and subtractive
primaries.

Spring 2023 55
 Color printing
 You can actually project the additive colors to produce the
subtractive.

Spring 2023 56
 Color printing
 Subtractive primaries are based on ink colors of CMYK. Black is
abbreviated “K” by tradition, perhaps because it is the “key” color. In
color printing, you need black to make the other colors vibrant and
snappy.
 This is why the subtractive process is also called the four-color
process, producing color separations, or “seps.” Colors used are
called the process colors.

Spring 2023 57
 Color printing
 Note that in effect the ink in the subtractive system acts like a filter,
beginning with the white paper, all colors. So if you place cyan ink
and magenta ink over the paper, what do you get?
 Cyan=green and blue, so transmits those colors, and absorbs red.
 Magenta=red and blue, so transmits those colors, and absorbs
green. But red has already been absorbed by the cyan, so the only
color left to transmit is blue.
 Result: blue.

Spring 2023 58
 Color printing
• Question: you combine cyan, magenta,
and yellow. What do you get? A muddy
brown. Inks are not pure, and it is
impossible to get a good black by mixing
them, hence the addition of black in the
CMYK system.
• Printers use the four-color system, called
process colors, as a way to avoid using a
spot color for each color specified by the
illustration. With only four colors, CMYK,
we can generate all colors.
Spring 2023 59
 Color printing
 The process color system does not actually “mix” the colors on a
page, one atop the next. Instead the colors are deposited
overlapping each other, in an pattern at a precise angle. We mix the
colors in our mind to see the desired color.
 In this way, each color forms a dot, similar to the half-tone process
used for black and white “continuous tone” (contone) generation, as
for photos.

Spring 2023 60
 Color printing & Color in Digital Images
 Here we can see a close-up of a half-tone
pattern. Note the closer the dots, the more
overlap, and the darker the color. From
farther away, it looks like gray.

Spring 2023 61
 Color in Digital Images
 Four-color separations and halftones are printed by screening them
into dots. The smaller the dots, the finer the resolution. This is
expressed in dpi, dots per inch.
 Similarly resolution on computers is expressed in ppi, pixels per inch.
The two are related.
 Generally, we need to save photos as double the ppi of the dpi
specified.

Spring 2023 62
 Color in Digital Images
 For example, many magazine-quality publications require about 133
dpi, called a 133-line screen. This means photos need to be saved at
a resolution of 266 ppi to be of acceptable quality.
 Publications on newsprint or other low quality stock are printed at
55- or 65-line screens to avoid dot gain. This is why they don’t look
as high quality as those in magazines.
 “Dot gain” means that as the ink soaks into low quality paper, it gets
bigger, giving the photo a muddy look.

Spring 2023 63
  Ink must soak into lower-quality paper to allow it to dry
quickly, because newspapers are quickly printed and
distributed within hours.
 Magazines often are printed on coated stock (shiny paper) that does
not allow ink to soak in. Instead it dries more slowly by oxidation.
This keeps fine details sharp, but a printer has to let the publication
dry before it can be distributed.
 Consider the color dot pattern at left; the higher the dot gain, the
more likely fine details will become muddy.

Spring 2023 64
  This close-up shows a process color screening process. Note cyan
atop yellow appears as green. Magenta on yellow appears
(orangish) red.

Spring 2023 65
  Color separations must be created and printed with a high degree of
accuracy to produce a quality printed product. This requires skilled
printers.
 Recall that a piece of paper must be run through an offset press four
times to print process color: once for each process ink, plus black.
 If the paper is run through at a slightly different angle, the colors
won’t overlap properly. A color ghost may be seen on an edge, and
colors will be muddy. This is called “out of registration.”

Spring 2023 66
  Registration problems are particularly common in publications
printed and distributed quickly, such as newspapers.
 In magazines and quality publications, graphic artists and
photographers may prefer to see proof copies of color separations,
to check color quality.
 They may also prefer to go to the printers at the beginning of a run,
to check color quality off the press.

Spring 2023 67
  Here from a recent Minneapolis Star-Tribune outstate edition we
see a major registration problem. It probably was fixed by the time
the metro edition appeared.

Spring 2023 68
 We said color theory can be related to color generation system or color
harmony. Color harmony may be considered by three properties:
 Hue.
 Value.
 Saturation.

Spring 2023 69
  Hue is the name of the color, determined by the wavelength of the
electromagnetic spectrum.
 The Munsell color wheel sets up five primary hues: red, yellow,
green, blue and purple.

Spring 2023 70
  Value is the degree of lightness or darkness of a color. In paint, we
mix black to darken a color, called a shade, and white to lighten a
color, called a tint.
 Saturation, or intensity, is a measure of the color’s perceived purity
or brightness. Munsell called this chroma.

Spring 2023 71
 Homework due 10.02.2023
 Neutral Colors
 Monochromatic color
 Complementary colors
 Analogous Colors
 Warm Color
 Cool Color

Spring 2023 72