SlideShare a Scribd company logo
The
Science
of Color
The How and Why of Color
Color Attributes
• There are literally millions of colors,
but they can be divided into just a
few color families.
• And every color can be described in
terms of having three main
attributes: hue, saturation and
brightness.
Hue
• Any pure color is referred to as a hue.
• Hue is identified as the color family
or color name (such as red, green,
purple).
• Hue is directly linked to the color's
wavelength.
Saturation
• Saturation, also called “chroma,” is a
measure of the purity of a color or how
sharp or dull the color appears.
• Saturation is the relative brilliance or
vibrancy of a color. The more saturated a
color, the less black it contains.
Brightness
• Brightness, also called “luminance” or “value,” is the
shade (darkness) or tint (lightness) of a color.
• Areas of an evenly colored object in direct light
have higher brightness than areas in shadow.
Tint vs. Shade
•A hue is a specific
color; red, green, blue.
•A tint of a color is made
by adding white.
•A shade is made by
adding black.
Color Wheel
•Invented by Sir Isaac
Newton.
•A tool for understanding
color relationships and
creating harmonious
color schemes.
•The color wheel is
divided into three
categories: primary,
secondary, and tertiary.
Color Wheel
• Primary colors are those
that cannot be created by
mixing other colors
together.
• Secondary colors are
those that are created by
mixing two primary
colors.
• Tertiary colors are those
that are created by mixing
a primary and secondary
color together. For this
reason they have two-
word names.
Example: blue-green,
yellow-orange, etc.
Warm vs. Cool Colors
Warm colors appear larger
than cool colors.
Cool colors
• Cool colors range from blue to violet, the
half of the color wheel with shorter
wavelengths.
• Have a calming effect.
• Frequently used for backgrounds to set off
smaller areas of warm colors.
• Used together, cool colors can look clean
and crisp, implying status and calm.
• Bright cool colors generates more
excitement than light, medium or dark cool
colors.
Warm Colors
• Warm colors range from red
to yellow.
• On the half of the color
wheel corresponding
to the longer wavelengths.
• Warm colors are active,
attention-grabbing and aggressive.
• They stimulate emotions, motivate
and seem to come forward off the
screen or page.
Color Schemes
• Selecting color combinations may be
based on several traditional color
schemes. These are:
– Compliments
– Monochromatic
– Neutral
– Analogous
– Low Intensity
– Split Compliments
– Double Compliments
Complementary Colors
• Any two colors whose light
together produces white are
called complementary colors.
• Complementary colors in an
image are pleasing to the
eye. The colors seem to
belong together.
• The most effective use of
complements is to let one of
them dominate by giving it a
bigger area or a fuller
saturation, while using the
other as an accent.
Complementary Colors
• Complementary colors lie opposite
each other on the color wheel.
They complete or
enhance each other.
• When a pair of high
intensity complements
are placed side
by side, they seem to
vibrate and draw
attention to the
element.
• If the hues are of
low-intensity,
the contrast is not
too harsh.
Complementary Colors
• Intensity can only be altered by
mixing a color with its
complement, which has the
effect of visually neutralizing
the color.
• Changing the values of the
hues, adding black or white,
will soften the effect.
Monochromatic Schemes
• A monochromatic color scheme
uses only one hue (color) and all
values (shades or tints) of it for
a unifying and harmonious
effect.
• You can change the value of a
color by adding black (shade), or
white (tint), or gray (tone).
• As white is added to a color it
becomes “higher” in value
(lighter).
• As black is added it becomes
“lower” in value (darker).
Monochromatic Colors
• Value is the relationship of
light to dark.
• Values that are close together
give the design a calm
appearance.
• Values of pure hues as
well as those of tints
and shades
create movement.
• Value contrasts show texture
and provide an effective
means of directing viewer
attention in a composition.
Neutral colors
• Contains equal parts of
three primary colors - black,
white, gray, and sometimes
brown.
• When neutrals are added to
a color, only the value
changes.
• If you try to make a
color darker by adding
a darker color to it, the
color (hue) changes.
• Black and white are
thought of as neutrals
because they do not
change color.
Analogous Colors
• Colors that contain a
common hue and are
found next to each other
on the color wheel.
• Adjoining colors on the
wheel are similar and
tend to blend together.
• They are effective
at showing
depth.
Analogous Colors
• Analogous color can be
used to create subtle
differences in an image
or design by creating a
peaceful and more
harmonious feeling.
Intensity
• Intensity is the Brightness
or dullness of a color.
• A pure hue is a high-
intensity color.
• A dulled hue, a color
mixed with its
complement, is called a
low-intensity color.
Triads
•A color triad is composed of
three colors spaced an equal
distance apart on the color
wheel.
•The contrast between triad
colors is not as strong as
that between complements.
Triad - Primary Colors
• Primary Color are rarely seen as a trio except in
children’s products.
• Red and yellow, are
popular in the USA
for everything
from fast food
to gas stations.
• Blue and red are also
common, but are
attractive only when
separated by space.
Triad - Secondary
• Colors created by
mixing two primary
colors to create a
secondary color.
• Red + yellow =orange
• Yellow + blue = green
• Blue + red = purple
(violet)
Intermediate Triads
• Colors are created
by mixing a
primary and a
secondary
• Examples:
red-orange
yellow-orange
yellow-green
blue-green
blue-purple
red-purple
Split Complements
• The combination of
one hue, plus the
hues on each side of
its complement.
• Easier to work with
than a straight
complementary
scheme because it
offers more variety.
Example: red-orange,
blue, and green.
Double
Complements
•Two hues and their opposites.
•Four colors arranged into
two complementary color
pairs.
•Scheme is hard to
harmonize.
•If all four colors are used in
equal amounts, the scheme
may look unbalanced.
•Choose a color to be
dominant or subdue the
colors.
Compositional Effects of Color:
Spatial effects
• Hues that are lighter at maximum
saturation (yellows, oranges) appear
larger than those that are darker at
maximum saturation (e.g., blues and
purples).
• Warm colors appear closer and cool
colors fall back.
Compositional Effects of Color
• A large shape or form
appears to be heavier
than a small shape.
Several small shapes or
forms can balance one large
one.
• An object with a
complicated contour is
more interesting and
appears to be heavier,
than one with a simple
contour. A small complex
object can balance a large,
simple object.
Compositional Effects of Color
•Use highly saturated or high-
intensity colors (a pure hue
with no other colors mixed in)
or busily detailed areas to draw
attention.
•Highly saturated colors give the
appearance of carrying more
weight than less saturated,
low-intensity or visually
simpler areas.
How Colors Effect Each Other
• Placing colors next to each other effect how we see
colors and is a complex part of color theory.
• Red appears more brilliant against black.
• Red is somewhat duller against the white.
• Next orange, red appears lifeless.
• In contrast with blue-green, red exhibits brilliance.
• The red square appears larger on black than on
other background colors.
How Colors Effect Each Other
• The color of the surrounding color can affect how
the color looks.
• The block in the center of the examples below are
the same, only the background color has changed.
• Color is partially defined in our brain by the colors
surrounding it.

More Related Content

Similar to Image Processing - Color Science.pptx

ID_Interior_colour_schemes.pptx
ID_Interior_colour_schemes.pptxID_Interior_colour_schemes.pptx
ID_Interior_colour_schemes.pptx
Rajnitaneja72
 

Similar to Image Processing - Color Science.pptx (20)

Colors, id
Colors, idColors, id
Colors, id
 
Colour theory II
Colour theory IIColour theory II
Colour theory II
 
Color Theory
Color TheoryColor Theory
Color Theory
 
Colour
Colour Colour
Colour
 
Green colorintro
Green colorintroGreen colorintro
Green colorintro
 
color
color color
color
 
Hue value-intensity
Hue value-intensityHue value-intensity
Hue value-intensity
 
Hue value-intensity
Hue value-intensityHue value-intensity
Hue value-intensity
 
Introduction to color theory for Multimedia Students
Introduction to color  theory  for Multimedia StudentsIntroduction to color  theory  for Multimedia Students
Introduction to color theory for Multimedia Students
 
Color Theory
Color TheoryColor Theory
Color Theory
 
The color wheel
The color wheelThe color wheel
The color wheel
 
color psychology in Films, Importance of Color in movies
color psychology in Films, Importance of Color in moviescolor psychology in Films, Importance of Color in movies
color psychology in Films, Importance of Color in movies
 
Color theory In UI
Color theory In UIColor theory In UI
Color theory In UI
 
Color theory
Color theoryColor theory
Color theory
 
Colour 1 theory 2014
Colour 1 theory 2014Colour 1 theory 2014
Colour 1 theory 2014
 
Final colour
Final colourFinal colour
Final colour
 
Color theory hue tint shade intensity
Color theory hue tint shade intensityColor theory hue tint shade intensity
Color theory hue tint shade intensity
 
ID_Interior_colour_schemes.pptx
ID_Interior_colour_schemes.pptxID_Interior_colour_schemes.pptx
ID_Interior_colour_schemes.pptx
 
Color theory
Color theoryColor theory
Color theory
 
Color Theory - part 1
Color Theory - part 1 Color Theory - part 1
Color Theory - part 1
 

Recently uploaded

Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
Bhaskar Mitra
 

Recently uploaded (20)

Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 

Image Processing - Color Science.pptx

  • 1. The Science of Color The How and Why of Color
  • 2. Color Attributes • There are literally millions of colors, but they can be divided into just a few color families. • And every color can be described in terms of having three main attributes: hue, saturation and brightness.
  • 3. Hue • Any pure color is referred to as a hue. • Hue is identified as the color family or color name (such as red, green, purple). • Hue is directly linked to the color's wavelength.
  • 4. Saturation • Saturation, also called “chroma,” is a measure of the purity of a color or how sharp or dull the color appears. • Saturation is the relative brilliance or vibrancy of a color. The more saturated a color, the less black it contains.
  • 5. Brightness • Brightness, also called “luminance” or “value,” is the shade (darkness) or tint (lightness) of a color. • Areas of an evenly colored object in direct light have higher brightness than areas in shadow.
  • 6. Tint vs. Shade •A hue is a specific color; red, green, blue. •A tint of a color is made by adding white. •A shade is made by adding black.
  • 7. Color Wheel •Invented by Sir Isaac Newton. •A tool for understanding color relationships and creating harmonious color schemes. •The color wheel is divided into three categories: primary, secondary, and tertiary.
  • 8. Color Wheel • Primary colors are those that cannot be created by mixing other colors together. • Secondary colors are those that are created by mixing two primary colors. • Tertiary colors are those that are created by mixing a primary and secondary color together. For this reason they have two- word names. Example: blue-green, yellow-orange, etc.
  • 9. Warm vs. Cool Colors Warm colors appear larger than cool colors.
  • 10. Cool colors • Cool colors range from blue to violet, the half of the color wheel with shorter wavelengths. • Have a calming effect. • Frequently used for backgrounds to set off smaller areas of warm colors. • Used together, cool colors can look clean and crisp, implying status and calm. • Bright cool colors generates more excitement than light, medium or dark cool colors.
  • 11. Warm Colors • Warm colors range from red to yellow. • On the half of the color wheel corresponding to the longer wavelengths. • Warm colors are active, attention-grabbing and aggressive. • They stimulate emotions, motivate and seem to come forward off the screen or page.
  • 12. Color Schemes • Selecting color combinations may be based on several traditional color schemes. These are: – Compliments – Monochromatic – Neutral – Analogous – Low Intensity – Split Compliments – Double Compliments
  • 13. Complementary Colors • Any two colors whose light together produces white are called complementary colors. • Complementary colors in an image are pleasing to the eye. The colors seem to belong together. • The most effective use of complements is to let one of them dominate by giving it a bigger area or a fuller saturation, while using the other as an accent.
  • 14. Complementary Colors • Complementary colors lie opposite each other on the color wheel. They complete or enhance each other. • When a pair of high intensity complements are placed side by side, they seem to vibrate and draw attention to the element. • If the hues are of low-intensity, the contrast is not too harsh.
  • 15. Complementary Colors • Intensity can only be altered by mixing a color with its complement, which has the effect of visually neutralizing the color. • Changing the values of the hues, adding black or white, will soften the effect.
  • 16. Monochromatic Schemes • A monochromatic color scheme uses only one hue (color) and all values (shades or tints) of it for a unifying and harmonious effect. • You can change the value of a color by adding black (shade), or white (tint), or gray (tone). • As white is added to a color it becomes “higher” in value (lighter). • As black is added it becomes “lower” in value (darker).
  • 17. Monochromatic Colors • Value is the relationship of light to dark. • Values that are close together give the design a calm appearance. • Values of pure hues as well as those of tints and shades create movement. • Value contrasts show texture and provide an effective means of directing viewer attention in a composition.
  • 18. Neutral colors • Contains equal parts of three primary colors - black, white, gray, and sometimes brown. • When neutrals are added to a color, only the value changes. • If you try to make a color darker by adding a darker color to it, the color (hue) changes. • Black and white are thought of as neutrals because they do not change color.
  • 19. Analogous Colors • Colors that contain a common hue and are found next to each other on the color wheel. • Adjoining colors on the wheel are similar and tend to blend together. • They are effective at showing depth.
  • 20. Analogous Colors • Analogous color can be used to create subtle differences in an image or design by creating a peaceful and more harmonious feeling.
  • 21. Intensity • Intensity is the Brightness or dullness of a color. • A pure hue is a high- intensity color. • A dulled hue, a color mixed with its complement, is called a low-intensity color.
  • 22. Triads •A color triad is composed of three colors spaced an equal distance apart on the color wheel. •The contrast between triad colors is not as strong as that between complements.
  • 23. Triad - Primary Colors • Primary Color are rarely seen as a trio except in children’s products. • Red and yellow, are popular in the USA for everything from fast food to gas stations. • Blue and red are also common, but are attractive only when separated by space.
  • 24. Triad - Secondary • Colors created by mixing two primary colors to create a secondary color. • Red + yellow =orange • Yellow + blue = green • Blue + red = purple (violet)
  • 25. Intermediate Triads • Colors are created by mixing a primary and a secondary • Examples: red-orange yellow-orange yellow-green blue-green blue-purple red-purple
  • 26. Split Complements • The combination of one hue, plus the hues on each side of its complement. • Easier to work with than a straight complementary scheme because it offers more variety. Example: red-orange, blue, and green.
  • 27. Double Complements •Two hues and their opposites. •Four colors arranged into two complementary color pairs. •Scheme is hard to harmonize. •If all four colors are used in equal amounts, the scheme may look unbalanced. •Choose a color to be dominant or subdue the colors.
  • 28. Compositional Effects of Color: Spatial effects • Hues that are lighter at maximum saturation (yellows, oranges) appear larger than those that are darker at maximum saturation (e.g., blues and purples). • Warm colors appear closer and cool colors fall back.
  • 29. Compositional Effects of Color • A large shape or form appears to be heavier than a small shape. Several small shapes or forms can balance one large one. • An object with a complicated contour is more interesting and appears to be heavier, than one with a simple contour. A small complex object can balance a large, simple object.
  • 30. Compositional Effects of Color •Use highly saturated or high- intensity colors (a pure hue with no other colors mixed in) or busily detailed areas to draw attention. •Highly saturated colors give the appearance of carrying more weight than less saturated, low-intensity or visually simpler areas.
  • 31. How Colors Effect Each Other • Placing colors next to each other effect how we see colors and is a complex part of color theory. • Red appears more brilliant against black. • Red is somewhat duller against the white. • Next orange, red appears lifeless. • In contrast with blue-green, red exhibits brilliance. • The red square appears larger on black than on other background colors.
  • 32. How Colors Effect Each Other • The color of the surrounding color can affect how the color looks. • The block in the center of the examples below are the same, only the background color has changed. • Color is partially defined in our brain by the colors surrounding it.