Mansoura University

Faculty of Computers and Information

Second Semester- 2022-2023

COMPUTER GRAPHICS

Grade: 2ND YEAR (GENERAL –BIO)

Prepared by:
Dr. Haitham El-Ghareeb,
Dr-Nabila Hamed
Waleed Mohamed,
Special Thanks to: Dr.-Ibrahim El-Hasnony
 Chapter 2
Color theory

2
 COLOR

 Color is an attribute of objects (like texture, shape, smoothness, etc.).

 Any method for explaining the properties or behavior of color within some
particular context is called a color model
 A color model is an abstract mathematical model describing the way colors can be
represented as tuples of numbers, typically as three or four values or color
components. When this model is associated with a precise description of how the
components are to be interpreted (viewing conditions, etc.), the resulting set of
colors is called "color space”.

 No single model can explain all aspects of color, so we make use of different models
to help describe different color characteristics.
3
WHY IS COLOR DIFFICULT AND IMPORTANT?
▪ Color importance:
▪ Color is an excellent descriptor: Suitable for object Identification and Extraction.
▪ Discrimination: Humans can distinguish thousands of color shades and intensities but few
shades of gray levels.

▪ Color of an object depends not only on the object itself, but also on the light sources
illuminating it, the color of surrounding area, and on the human visual system (the eye/brain
mechanism)
▪ Some objects reflect light (wall, desk, paper), while others transmit light (cellophane, glass)
Color Terms

1. Hue distinguishes among colors (e.g., red, green, purple, and

yellow)
2. Saturation refers to how pure the color is, how much gray is
mixed with it
 red saturated; pink unsaturated
 royal blue saturated; sky blue unsaturated
 Pastels are less saturated, hence less vivid and less intense
3. Lightness: perceived achromatic intensity of reflecting object
4. Brightness: perceived intensity of a self-luminous object, such
as a light bulb, the sun, or an LCD screen
 Color Mixture
 The effect of (A) passing light through several filters
(subtractive mixture), and (B) throwing different lights upon
the same spot (additive mixture)

A B
1-Subtractive Mixture ‫الطباعة باألحبار‬

 Subtractive mixture blue green yellow

occurs when mixing red
paints, dyes, inks, etc.
that act as a filters
between the viewer
and the light source /
reflective surface.
 In subtractive mixing,
the light passed by two
filters (or reflected by green
two mixed pigments)
are wavelengths that When you layer two filters (or mix two pigments), the
are passed by the two final color is made of whatever wavelengths of light both
filters let through.
filters Ex. a yellow filter and a blue filter together might leave
only green, since that’s what they both allow
 2-Additive Mixture ‫للشاشات‬

 Additive mixture occurs when color is created

by mixing visible light emitted from light
sources
 Used for computer monitors, televisions, etc.
 Light passed by two filters (or reflected by two
pigments) impinges upon same region of
retina
 On the diagram: pure blue and yellow
(green+red) filtered light on same portion of
the screen, reflected upon same retinal region,
produce white/gray

Two light colors impinge same spot on your retina, blending there to form a new color.

If a screen shines pure blue light and yellow light (which is green + red) on the
same spot, your eye sees them together as white or gray because all the main light
colors (red, green, blue) are present in some combo
COLOR MODELS

 Color Model (Color Space, Color System)

- Specify colors in a standard way

- A coordinate system that each color is represented by a single point.

 Most used models:

- RGB model (Monitor/TV)

- CYM model (3-color Printers)

- CYMK model (4-color Printers)

- HSI model (Color Image Processing and Description)

9
 10

Color Models
1- RGB
2- CMYK
1-Color Models - RGB 11

 Additive Color: RGB

 Describes colors that emanate from glowing
bodies such as lights, TV, and computer monitors
 In additive color models, mixing two colors results
in a brighter color
 Additive Colors
are created by mixing spectral light in varying
combinations. The most common examples of this
are television screens and computer monitors,
which produce colored pixels by firing red, green,
and blue electron guns at phosphors on the
television or monitor screen.
Color Models - RGB 12

 Overlapping colors from 3 projectors produces

new colors
 Red + green -> yellow
 Green + blue -> cyan
 Red + blue -> magenta
Color Models - RGB 13

 RGB color space or RGB color system, constructs all the colors from
the combination of the Red, Green and Blue colors.
 The red, green and blue use 8 bits each, which have integer values
from 0 to 255. This makes 256*256*256=16777216 possible colors.
Color Models - RGB 14

 The color systems used by scientists and

artists are entirely different.
 Anartist will mix blue and yellow paint to
get a shade of green.
A scientist will mix green and red light to
create yellow. The printed page in a
magazine is yet another system.
Color Models - RGB 15

 This color model is used in computer monitors,

television sets, and theater. If you put your eye
up against your television screen you might
something like
 COMPLEMENTARY HUES – ADDITIVE MIXTURE

Complementary hues: Any hue will approach gray if

additively mixed with it’s opposite hue on the color
circle. Such hue pairs are complementary. Of particular
importance are the pairs that contain four unique hues:
red-green, blue-yellow “complementary hues”

 Note that combining two complementary hues can never equal

gray. For example, adding green to red will give you a yellowish
gray, which is more neutral than the initial red
COLOR GAMUT
‫مجال األلوان المتاح في الجهاز‬

Definition of GAMUT
1. The subset of colors which can be accurately
represented within a given color space or by
an certain output device and ink combination.

2. The complete set of colors found within an

image at a given time. Converting a digitized
image to a different color space, or printing it
to a given medium generally alters its gamut.

The gray area represents the entire chromatic

range. The colored triangle represents the color
display.
 THE RGB COLOR MODEL
 RGB primaries are additive (RGBA)
 The RGB cube (Grays are on the dotted main diagonal)
 Main diagonal => gray levels
 black is (0, 0, 0)
 white is (1, 1, 1)
 RGB color gamuts
 differs from one display to another
 differs by company too:
Adobe RGB
 Adobe RGB - larger space
sRGB
 Currently the standard for digital photography
 sRGB (HP/Microsoft) - fewer colors, but allocated bit
depth better and more than enough for most on-screen
and Web uses
 Most monitors now cover 100% of sRGB space
2-Color Models - CMYK 19

 Subtractive Color : CMYK

 Most object reflect light
 Mixing two colors creates a darker one
 Similar to paint and printer's ink
 Primary colors are cyan, magenta, yellow,
which are complements of red, green and blue,
respectively
 Where 3 inks overlap, there is black ( gray)
Color Models - CMYK 20

 Subtractive colors are seen when pigments

‫ صبغات‬in an object absorb certain wavelengths
of white light while reflecting the rest.
Color Models - CMYK 21

 CMYK is a subtractive, reflected light color

system. All colors start with white "paper", to
which different color "inks" are added to absorb
(subtract) light that is reflected.
 In theory, CMY are all you need to create black
(applying all 3 colors at 100%). Alas, that usually
results in a muddy, brownish black, so the
addition of K (black) is added to the printing
process. It also makes it easier to print black text
Color Models - CMYK 22
THE CMY(K) COLOR MODEL

 Used in electrostatic and in ink-jet plotters that deposit pigment on paper

 Cyan, magenta, and yellow are complements of red, green, and blue
 Subtractive primaries: colors are determined by what is subtracted from white light, rather
than by what is added to blackness Green Yellow (minus blue)

 white is at origin, black at (1, 1, 1):

 C  1  R  (minus red)

Cyan Black Red

 M  = 1 − G 
    
 Y  1  B  Blue Magenta (minus green)

subtractive primaries (cyan, magenta, yellow) and their mixtures

 RGB AND CMYK

RGB and CMYK are two different color spaces. The RGB color space uses light in colors of red,
green, and blue to create the visible spectrum. Our eyes see color in terms of reflected light, so the
observed world is closer to RGB than CMYK. That is why native RGB devices that use light to
create color, such as film recorders, scanners, and cameras can reproduce color fairly accurately.

RGB. Three colors of light, red, green and blue

CMYK. Three inks, cyan, magenta and
make white light. Cyan, magenta and yellow are also
combinations of RGB. yellow make black. In practice this black
lacks intensity, so a separate black (K) is
The intensity of light also changes the color. usually added. Red, green and blue are
made from CMYK.
CMY AND CMYK COLOR MODELS

- CMY: Secondary colors of light, or primary colors of pigments are

used.
- Used to generate hardcopy output (Printer and Copier).
- Some facts:
• Printer papers are white (reflect all colors)
• Printers use ink (Transparent)
 K (Black) is practical problem of C+M+Y≠Black (Muddy Brown)
‫وذلك بسبب مشكلة في جودة االحبار الكيميائية‬. Add a fraction of Black color

25
Color Models - CMYK 26

 Below is an example of a photo originally produced in

RGB colors converted to CMYK colors as displayed on a
computer monitor. Notice how the colors are much
more vibrant on the RGB picture.
Color Models – RGB vs. CMYK 27
3-RGB AND HSV/HSI/HSL COLOR SPACE CONVERSION

- Human description of color is not RGB or CMYK

‫ أخضر فاتح‬،‫ أحمر غامق‬:‫مثلا‬

 So, other models are required like: HSV/HSI/HSL
 HSV (hue-saturation-value), HSI (hue-saturation-intensity) and HSL (hue-
saturation-lightness) are the three most common cylindrical-coordinate
representations of points in an RGB color model.
 The HSV/HSI/HSL representations rearrange the geometry of RGB in an attempt
to be more intuitive and perceptually relevant.
 The representations HSV, HSI and HSL are very similar, but not completely
identical.

28
THE HSV COLOR MODEL-1

 Hue
 In HSV, hue represents color. In this model, hue is
an angle from 0 degrees to 360 degrees.
THE HSV COLOR MODEL-2

 Saturation
 Saturation indicates the range of grey in the color
space. It ranges from 0 to 100%. Sometimes the
value is calculated from 0 to 1. When the value is
‘0,’ the color is grey and when the value is ‘1,’ the
color is a primary color. A faded color is due to a
lower saturation level, which means the color
contains more grey.
 Value
 Value is the brightness of the color and varies with
color saturation. It ranges from 0 to 100%. When
the value is ‘0’ the color space will be totally black.
With the increase in the value, the color space
brightness up and shows various colors.

[Link]
Color Models 31

 Varying Brightness

 Varying Saturation
 Suggested Rule for Creating Color
Palettes using HSV
• Color Palettes is all selected colors to be used in scene.
• Suggested rule (not strict, you can ignore it sometimes):
[Link]
your-games-artwork--gamedev-1174
AN INTRODUCTION TO COLOR THEORY AND COLOR
PALETTES

 User interface (UI) designers have the challenging task of incorporating color into their
interface in a way that poignantly communicates a brand’s visual identity.
 While it might seem like a website’s color palette is a matter of the client’s personal taste, in
reality, UI designers rely on a framework called color theory: a multilayered set of guidelines
that informs the use of color in design.
 Color theory is a framework that informs the use of color in art and design, guides the
curation of color palettes, and facilitates the effective communication of a design message on
both an aesthetic and a psychological level.
 Modern color theory is largely based on Isaac Newton’s color wheel, which he created all the
way back in 1666. The basic color wheel displays three categories of color; primary colors,
secondary colors, and tertiary colors.

33
COLOR WHEEL

 An artist creates a color painting by mixing color pigments ‫ صبغة‬with white and black pigments
to form the various shades in the scene.


You can use a color wheel to find color harmonies by using the rules of color
combinations. Color combinations determine the relative positions of different
colors in order to find colors that create a pleasing effect. 34
 Based on Color Wheel:
SHADES,TINTS AND TONES

 Shade
A shade is created by adding black to a base hue,
darkening the color. This creates a deeper, richer color.
Shades can be quite dramatic and can be
overpowering.
 Tint
A tint is created by adding white to a base hue,
lightening the color. This can make a color less intense,
and is useful when balancing more vivid color
combinations.
 Tones
A tone is created by combining black and white—or
grey—with a base hue. Like tints, tones are subtler
versions of the original color. Tones are less likely to
look pastel, and can reveal complexities not apparent
in the base color.
36

[Link]
Color Harmony Schemes 37

 Primary colors: ‫ألوان أساسية‬

red, yellow and blue

 Secondary colors:
‫ألوان فرعية‬
obtained by mixing two primary
colors - orange violet, green

 Tertiary colors:
‫ألوان ثانوية‬
obtained by mixing equal amounts
of a primary and secondary color -
red-violet, blue-violet, blue-green,
yellow-green, yellow-orange, red-
orange
 38

 Primary Colors Secondary colors Tertiary Colors

COLOR TEMPERATURE

 Even if you’re a design beginner, you’ve likely heard the terms “warm, cool and neutral” terms.
This is referred to as color temperature, and it’s an essential consideration when it comes to
color theory:
 Warm colors contain shades of yellow and red;
 cool colors have a blue, green, or purple tint;
 Neutral colors include brown, gray, black, and white.

 The temperature of a color has a significant impact on our emotional response to it. Within
the psychology of colors, for example, warm colors show excitement, optimism, and creativity,
whereas cool colors symbolize peace, calmness, and harmony.

39
Color Harmony Schemes 40

 Warm (yellow, orange, red) or cool ( blue, green) colors

Color Harmony (Color Schemes) 41

 Certain combinations of colors tend to be

pleasing. They arise from the color harmony
schemes
 examples:
 Monochromatic

 Complementary

 Analogous

 Triadic
 42

Harmony Schemes-
1-Monochromatic
 all colors have hues that are the
same or within a few degrees of
one another
 colors vary in saturation or
brightness, but hue is consistent
 enhances cohesiveness to overall
layout of web page
Monochromatic Examples 43
 44

Harmony Schemes-
2-Complementary
 uses a pair of
complementary hues, which
appear opposite one
another on a color wheel
 one color is dominant, the
other is an accent
 use the dominant hue to fill
the large areas
Using the Wheel

Complementary Colors are the

colors opposite from one another
on the wheel.

These colors provide the most

visual contrast.

Contrast is the noticeable level

of difference between two colors.
Complementary examples 46
Harmony Schemes- 47
3-Analogous

 three colors which lie close together

on a color wheel
 often echo the colors found in
nature
 pleasing combinations ( such as
orange, yellow, green)
 more interesting if the colors do not
have the same brightness and
saturation
Analogous examples 48
Harmony Schemes- 49
4-Triadic

 Any 3 colors, spaced equally

around a color wheel
 Color hues form a triad
 Offers wide variety of choice and
can create excitement
 Can be overpowering unless
colors chosen vary in brightness
and saturation, or the number of
text and background are limited
Triadic examples 50
Triadic examples 51
Harmony Schemes- 52
5- Tetradic ‫رباعي‬
 Four colors that are evenly spaced on the color wheel.
Tetradic color schemes are bold and work best if you let
one color be dominant ‫الغالب‬, and use the others as
accents ‫ مساعدين‬. The more colors you have in your
palette, the more difficult it is to balance,

[Link]
Tetradic ‫ رباعي‬examples 53

[Link]
Harmony Schemes- 54
6- Split complementary
 When figuring out split-complementary colors, you
want to start out with a base color. From there, you
combine it with two colors that sit directly
adjacent to its complementary color without
choosing the complementary color itself.

[Link]
Example for Split-Complementary 55

[Link]
scheme-in-design-a6c3f1e22644
Color in Text and Background 56
guidelines
1. Text should be readable ‫مقروء‬
2. Contrast between text and background is
important
3. Dark text on light background is best or one
with high brightness and low saturation
4. Avoid combinations that differ only in their
blue component ( yellow on white)
5. Avoid red-green, red-blue, magenta-green
combinations which cause vibration and eye
fatigue.
Palette Flashing Problem 57
‫زغللة أثناء االنتقال بين صورتين‬

 Palette Flashing occurs when you use a series of

images each with its own color palette. When
the new image replaces the older one a flash
occurs on the screen - a serious problem in
multimedia
 Solution
 use a single palette for all project images or
 fade each image to white or black before
showing the next image since white and black
are present in most palettes
AN INTRODUCTION TO COLOR THEORY AND COLOR
PALETTES

 Primary colors
are colors you can’t create by combining two or more other colors.
The primary colors are red, blue, and yellow.
 The secondary colors
are orange, purple, and green—in other words, colors that can be
created by mixing any two of the three primary colors.
 Tertiary colors
are created by mixing a primary color with a secondary color. The
tertiary colors are magenta, vermillion, violet, teal, amber, and
chartreuse.

58
 10 best color palette generators

• Coolors
• Adobe Color
• Paletton
• Colormind
• Color Hunt
• Canva
• Khroma
• ColorSpace
• Colorkuler
• Designinspiration
[Link]
8531-the-ultimate-list-of-online-colour-
palette-generators-for-web-design
COLOR TOOLS

 Adobe Color

60
Thanks
61