SlideShare a Scribd company logo
3
Most read
8
Most read
13
Most read
Understanding color
Using Color in Design
Colors are the native language
of the subconscious.
–Carl Jung, Psychiatrist!
!
Understanding the principles of color theory
and its use in graphic design.
Color is based on light
Color perception based on the two components: wavelength and luminosity
Color of light is determined by wavelength and how it hits a surface
http://www.skidmore.edu/~hfoley/images/spectrum.jpg
Using Color in Design
How We Perceive Color
Color can exist beyond the spectrum visible to humans:
ultraviolet and infrared light are examples
http://science.nasa.gov/newhome/headlines/images/eta_car_pix/0099_infrared_lg.jpg
Using Color in Design
How We Perceive Color
Hue: Any single color in the spectrum (red, yellow, blue, etc).!
Using Color in Design
Terminology
Value: The relative lightness or darkness of a color.
Using Color in Design
Terminology
Tint: A color with white added.
Shade: A color with black added.!
Using Color in Design
Terminology
Saturation: The relative intensity or brightness of a color
Bright, vibrant colors (reds or oranges) have a saturation
dull or muted colors (browns) have a low degree of saturation
Using Color in Design
Terminology
Using Color in Design
Terminology
Saturation: The relative intensity or brightness of a color
Bright, vibrant colors (reds or oranges) have a saturation
dull or muted colors (browns) have a low degree of saturation
Colors can be of the same hue and still have varying degrees of saturation!
Using Color in Design
Terminology
Like the elements of design, hue, saturation and value can be used
to emphasize certain areas of a composition or deemphasize others
Colors can balance, organize and harmonize a design, or to create discord
Colors with high saturation intensity and brighter value are more visible
and demanding of a viewer s attention
Colors with low saturation can be used to set apart secondary information
or to create background elements
Using Color in Design
How Do These Ideas Work Together?
Primary Colors: Red, yellow and blue; the hues that form color wheel base!
Secondary Colors: Green, orange and violet; hues that are mixed
by combining two primary colors.
Tertiary Colors: Colors created by mixing a secondary color and a primary
color. Examples are blue green, red orange, red violet, etc.!
Color Design
Color Schemes
Monochromatic: Composition using tints and shades of only one hue.
Easiest scheme to balance visually, but lacks high impact of other more
contrasting and complicated schemes. !
Color Design
Color Schemes
Complementary Colors: Colors that are opposites on the color wheel that,
when combined, neutralize one another. Scheme provides strong visual
contrast and demands attention. For best use, de-saturate the cool colors
rather than the warm ones.!
Color Design
Color Schemes
Analogous Colors: Colors that fall in adjacent proximity to each other on
the color wheel, such as red, red orange, orange
Using analogous colors in a design creates unity and harmony!
Color Design
Color Schemes
Split Complementary: Color scheme using a hue and the two colors that lay on
either side of its compliment on the color wheel
Provides more visual variety than complementary scheme; strong contrast
Harder to balance than monochromatic, analogous color schemes
For best results, use one warm color with a range of cool colors or vice versa
and avoid de-saturated warm colors!
Color Design
Color Schemes
Triadic: Color scheme uses three colors equally spaced around the color wheel.
Provides strong visual contrast while adding balance and richness.
For best use, choose one color to be used in larger amounts than others;
experiment with color saturation and value!
Color Design
Color Schemes
Tetradic (Double Complementary): This is the richest of all the schemes;
utilizes four colors arranged into two complementary color pairs
Can be hard to harmonize; if all four colors are used in equal amounts, this
scheme risks looking unbalanced and chaotic, so choose one color to be dominant!
Color Design
Color Schemes
Simultaneous Contrast: The concept of color perception based on
the other colors surrounding it.
Color can look completely different when set against different hues,
and is perceived in relation to its surroundings.!
Color Design
Simultaneous Contrast
Advancing/ Receding Color: Warm and bright colors give
the illusion of being closer to a viewer within a composition,
while cool and dull colors appear to be further away.
Color Design
Advancing and Receding Color
Color Design
Advancing and Receding Color
Advancing/ Receding Color: Warm and bright colors give
the illusion of being closer to a viewer within a composition,
while cool and dull colors appear to be further away.
Vibration: Complementary colors of equal saturation and brightness
compete with our eye for attention when seen in close proximity to
one another.
Color Design
Vibration
Weight: Colors differ in visual weight based on their hue and intensity.
For example, red is considered a heavy color, and would demand
a viewer s attention, even if shown in only a small amount within a
composition.!
Color Design
Weight
Weight: Colors differ in visual weight based on their hue and intensity.
For example, red is considered a heavy color, and would demand
a viewer s attention, even if shown in only a small amount within a
composition.!
Color Design
Weight

More Related Content

What's hot (20)

PPTX
Colour theory II
noeliacalle
 
PPTX
Lesson 2 interactive media
hwells2101
 
PPT
Color powerpointart8
Victor Junior/Senior High School
 
PPT
Creating a Color Scheme
Karen02J
 
PPT
Selfportrait warhol
akeka
 
PDF
Johannes Itten
Rachel Hayes
 
PPTX
Color Theory
Sai Kiran Reddy
 
PPT
Color Matches
palaciok001
 
PPT
Chapter 1
Mary Haas
 
PPTX
Year ten colour theory information
missfcmay
 
PPT
Colour Optics
OhMiss
 
PPTX
Lesson 4 colour
hwells2101
 
PPTX
colour theory ppt- animated ppt
SarahKhais
 
DOCX
Colour task sal
Allana Brereton
 
PPT
Chapter 4
Mary Haas
 
PPTX
Color theory
HIMANSHURajak2
 
PPT
Colour Theory
Michael Turcotte
 
PPTX
Color ppt
Inder Singh
 
PPTX
The physics of color - Rey San Andrew Rimando
Rey Rimando
 
PPT
Colour theory
Palvi Jaswal
 
Colour theory II
noeliacalle
 
Lesson 2 interactive media
hwells2101
 
Color powerpointart8
Victor Junior/Senior High School
 
Creating a Color Scheme
Karen02J
 
Selfportrait warhol
akeka
 
Johannes Itten
Rachel Hayes
 
Color Theory
Sai Kiran Reddy
 
Color Matches
palaciok001
 
Chapter 1
Mary Haas
 
Year ten colour theory information
missfcmay
 
Colour Optics
OhMiss
 
Lesson 4 colour
hwells2101
 
colour theory ppt- animated ppt
SarahKhais
 
Colour task sal
Allana Brereton
 
Chapter 4
Mary Haas
 
Color theory
HIMANSHURajak2
 
Colour Theory
Michael Turcotte
 
Color ppt
Inder Singh
 
The physics of color - Rey San Andrew Rimando
Rey Rimando
 
Colour theory
Palvi Jaswal
 

Similar to Understanding color (20)

PPTX
Design Element #4 - Color PowerPoint Unit
mjb77ny
 
PPTX
Color terms
Sharonmontgomery165
 
PDF
ColorsTheory
uploadlessons
 
PPT
Color Chapter 2 Powerpoint 2
tanyalangford
 
PPTX
World colors-odai hatem
odaihatim
 
PPT
Elements intro-color
kbudge
 
PPTX
Colors, id
Vandita jain
 
PPTX
AHSArt: Color theory Drawing + Painting
Appoquinimink High School
 
PPTX
color, composition, images
indyrra
 
PPTX
colors, composition, images
indyrra
 
PPT
Clothing chapter 9 - Color
bartlettfcs
 
PPTX
Color Theory by Abdullah and rabia khan.pptx
rabia66khan66
 
PPTX
Color matches2-1225285125023446-8
Ulviyye Ulvi
 
PPTX
Lesson 10 a understanding color
Wilfred Dexter Tanedo
 
DOCX
Colour study
jinghuiyew
 
PPTX
Creative Industry Lecture 2 a b color form and space
Wilfred Dexter Tanedo
 
PPTX
Digital Color Theory
ManamiIshimura
 
PPTX
Colour Theory.pptx
FaizaSheikh18
 
PPTX
Design color theory
jesskrichels
 
Design Element #4 - Color PowerPoint Unit
mjb77ny
 
Color terms
Sharonmontgomery165
 
ColorsTheory
uploadlessons
 
Color Chapter 2 Powerpoint 2
tanyalangford
 
World colors-odai hatem
odaihatim
 
Elements intro-color
kbudge
 
Colors, id
Vandita jain
 
AHSArt: Color theory Drawing + Painting
Appoquinimink High School
 
color, composition, images
indyrra
 
colors, composition, images
indyrra
 
Clothing chapter 9 - Color
bartlettfcs
 
Color Theory by Abdullah and rabia khan.pptx
rabia66khan66
 
Color matches2-1225285125023446-8
Ulviyye Ulvi
 
Lesson 10 a understanding color
Wilfred Dexter Tanedo
 
Colour study
jinghuiyew
 
Creative Industry Lecture 2 a b color form and space
Wilfred Dexter Tanedo
 
Digital Color Theory
ManamiIshimura
 
Colour Theory.pptx
FaizaSheikh18
 
Design color theory
jesskrichels
 
Ad

More from Anetwork (20)

PDF
Content Marketing & Bloggers
Anetwork
 
PPTX
History Of Graphic Design
Anetwork
 
PPTX
Communication
Anetwork
 
PDF
Confilict management
Anetwork
 
PDF
Way of Doing Task
Anetwork
 
PDF
SEO for Startups
Anetwork
 
PDF
SEO. Links & Link building. Automation.
Anetwork
 
PDF
Future of Search Engine Factors, AMP, On-Page Key to Success
Anetwork
 
PDF
User Generated Content
Anetwork
 
PPTX
SEO Ranking Factors
Anetwork
 
PPTX
Campaign Planning
Anetwork
 
PDF
3 Main Purposes in Social Media for Businesses
Anetwork
 
PDF
Email Marketing
Anetwork
 
PPTX
Data-Driven Marketing
Anetwork
 
PDF
5 دلیل بدیهی برای تفهیم اهمیت سئو
Anetwork
 
PDF
بازاریابی دیجیتال چیست؟
Anetwork
 
PDF
چرا تبلیغات آنلاین
Anetwork
 
PDF
case study تاثیر فرم عضویت ساده در موفقیت کمپین تبلیغاتی بازی آنلای
Anetwork
 
PDF
مدیریت بودجه و کاهش هزینه تبلیغات کلیکی
Anetwork
 
PDF
نمونه موردی اهمیت طراحی صفحه فرود اختصاصی برای کمپین
Anetwork
 
Content Marketing & Bloggers
Anetwork
 
History Of Graphic Design
Anetwork
 
Communication
Anetwork
 
Confilict management
Anetwork
 
Way of Doing Task
Anetwork
 
SEO for Startups
Anetwork
 
SEO. Links & Link building. Automation.
Anetwork
 
Future of Search Engine Factors, AMP, On-Page Key to Success
Anetwork
 
User Generated Content
Anetwork
 
SEO Ranking Factors
Anetwork
 
Campaign Planning
Anetwork
 
3 Main Purposes in Social Media for Businesses
Anetwork
 
Email Marketing
Anetwork
 
Data-Driven Marketing
Anetwork
 
5 دلیل بدیهی برای تفهیم اهمیت سئو
Anetwork
 
بازاریابی دیجیتال چیست؟
Anetwork
 
چرا تبلیغات آنلاین
Anetwork
 
case study تاثیر فرم عضویت ساده در موفقیت کمپین تبلیغاتی بازی آنلای
Anetwork
 
مدیریت بودجه و کاهش هزینه تبلیغات کلیکی
Anetwork
 
نمونه موردی اهمیت طراحی صفحه فرود اختصاصی برای کمپین
Anetwork
 
Ad

Recently uploaded (20)

PPTX
Una a presentación Designó do portal.pptx
defariasrosaschristi
 
PDF
Parasite Movie Presentation [ENG-102].pdf
MD RATUL HOSSEN
 
PPTX
Eco-Friendly Living.ppt BIRLA OPEN MIND INTERNATIONAL SCHOOL
aartidevi7613
 
PDF
DOC-20250716-WA0020..pkjhnb.kjuvhjuhv.kihjdf
sayeedarhan829
 
PPTX
Week 1 - Module 1 - Discussion - Introduction to Personality Development and ...
pia8mm
 
PDF
FEDEX Crystal Plaques at Clazz Trophy Malaysia | #1 Reliable Trophy Supplier ...
Clazz Trophy Malaysia
 
PDF
Criteria-Fashion Show for the ABIS Year 2023
FrancisjadeSolomon
 
PPTX
slide power point presentation for parent
MarynethAlcaoTulud
 
PDF
Dev Das Creative Portfollio Presentation
iamrealdevidas
 
PDF
Joseph Kim: Bridging Small-Town Roots with Big-City Dreams
Joseph Kim Nolensville Tennessee
 
PDF
ACM_Intro_Containers_Cloud.pdf Cloud.pdf
Trevor Roberts Jr.
 
PPTX
Presentation2.bdjajajnajjabdhajauauhubhs
annalexisbeltran8
 
DOCX
TANLNINS (2).docxHGHGHGHGHGHGHGHGHGHGHGHGHG
nathancasinao
 
PPT
2C Central and Eastern Europe - the flowering (Russia)
dolgalev
 
PPTX
• Hinduism is not founded by any particular prophet. Buddhism was founded by ...
BeshoyGirgis2
 
PPTX
Kubernetes Info Operators Operators Operators
Trevor Roberts Jr.
 
PDF
My Anime Academia Storyboard layouts.pdf
A11yKat
 
PDF
la tradición dominicana no es solo historia, sino que irradia luz y vitalidad...
EusebioVidal1
 
PPTX
Slide_Egg-500091-International Sculpture Day 4-3.pptx
SusmitaPatil2bl17cv1
 
PPTX
Presentation3. Hshauqbbdnsnjajajakakkqsnsna
annalexisbeltran8
 
Una a presentación Designó do portal.pptx
defariasrosaschristi
 
Parasite Movie Presentation [ENG-102].pdf
MD RATUL HOSSEN
 
Eco-Friendly Living.ppt BIRLA OPEN MIND INTERNATIONAL SCHOOL
aartidevi7613
 
DOC-20250716-WA0020..pkjhnb.kjuvhjuhv.kihjdf
sayeedarhan829
 
Week 1 - Module 1 - Discussion - Introduction to Personality Development and ...
pia8mm
 
FEDEX Crystal Plaques at Clazz Trophy Malaysia | #1 Reliable Trophy Supplier ...
Clazz Trophy Malaysia
 
Criteria-Fashion Show for the ABIS Year 2023
FrancisjadeSolomon
 
slide power point presentation for parent
MarynethAlcaoTulud
 
Dev Das Creative Portfollio Presentation
iamrealdevidas
 
Joseph Kim: Bridging Small-Town Roots with Big-City Dreams
Joseph Kim Nolensville Tennessee
 
ACM_Intro_Containers_Cloud.pdf Cloud.pdf
Trevor Roberts Jr.
 
Presentation2.bdjajajnajjabdhajauauhubhs
annalexisbeltran8
 
TANLNINS (2).docxHGHGHGHGHGHGHGHGHGHGHGHGHG
nathancasinao
 
2C Central and Eastern Europe - the flowering (Russia)
dolgalev
 
• Hinduism is not founded by any particular prophet. Buddhism was founded by ...
BeshoyGirgis2
 
Kubernetes Info Operators Operators Operators
Trevor Roberts Jr.
 
My Anime Academia Storyboard layouts.pdf
A11yKat
 
la tradición dominicana no es solo historia, sino que irradia luz y vitalidad...
EusebioVidal1
 
Slide_Egg-500091-International Sculpture Day 4-3.pptx
SusmitaPatil2bl17cv1
 
Presentation3. Hshauqbbdnsnjajajakakkqsnsna
annalexisbeltran8
 

Understanding color

  • 2. Using Color in Design Colors are the native language of the subconscious. –Carl Jung, Psychiatrist! ! Understanding the principles of color theory and its use in graphic design.
  • 3. Color is based on light Color perception based on the two components: wavelength and luminosity Color of light is determined by wavelength and how it hits a surface http://www.skidmore.edu/~hfoley/images/spectrum.jpg Using Color in Design How We Perceive Color
  • 4. Color can exist beyond the spectrum visible to humans: ultraviolet and infrared light are examples http://science.nasa.gov/newhome/headlines/images/eta_car_pix/0099_infrared_lg.jpg Using Color in Design How We Perceive Color
  • 5. Hue: Any single color in the spectrum (red, yellow, blue, etc).! Using Color in Design Terminology
  • 6. Value: The relative lightness or darkness of a color. Using Color in Design Terminology
  • 7. Tint: A color with white added. Shade: A color with black added.! Using Color in Design Terminology
  • 8. Saturation: The relative intensity or brightness of a color Bright, vibrant colors (reds or oranges) have a saturation dull or muted colors (browns) have a low degree of saturation Using Color in Design Terminology
  • 9. Using Color in Design Terminology Saturation: The relative intensity or brightness of a color Bright, vibrant colors (reds or oranges) have a saturation dull or muted colors (browns) have a low degree of saturation
  • 10. Colors can be of the same hue and still have varying degrees of saturation! Using Color in Design Terminology
  • 11. Like the elements of design, hue, saturation and value can be used to emphasize certain areas of a composition or deemphasize others Colors can balance, organize and harmonize a design, or to create discord Colors with high saturation intensity and brighter value are more visible and demanding of a viewer s attention Colors with low saturation can be used to set apart secondary information or to create background elements Using Color in Design How Do These Ideas Work Together?
  • 12. Primary Colors: Red, yellow and blue; the hues that form color wheel base! Secondary Colors: Green, orange and violet; hues that are mixed by combining two primary colors. Tertiary Colors: Colors created by mixing a secondary color and a primary color. Examples are blue green, red orange, red violet, etc.! Color Design Color Schemes
  • 13. Monochromatic: Composition using tints and shades of only one hue. Easiest scheme to balance visually, but lacks high impact of other more contrasting and complicated schemes. ! Color Design Color Schemes
  • 14. Complementary Colors: Colors that are opposites on the color wheel that, when combined, neutralize one another. Scheme provides strong visual contrast and demands attention. For best use, de-saturate the cool colors rather than the warm ones.! Color Design Color Schemes
  • 15. Analogous Colors: Colors that fall in adjacent proximity to each other on the color wheel, such as red, red orange, orange Using analogous colors in a design creates unity and harmony! Color Design Color Schemes
  • 16. Split Complementary: Color scheme using a hue and the two colors that lay on either side of its compliment on the color wheel Provides more visual variety than complementary scheme; strong contrast Harder to balance than monochromatic, analogous color schemes For best results, use one warm color with a range of cool colors or vice versa and avoid de-saturated warm colors! Color Design Color Schemes
  • 17. Triadic: Color scheme uses three colors equally spaced around the color wheel. Provides strong visual contrast while adding balance and richness. For best use, choose one color to be used in larger amounts than others; experiment with color saturation and value! Color Design Color Schemes
  • 18. Tetradic (Double Complementary): This is the richest of all the schemes; utilizes four colors arranged into two complementary color pairs Can be hard to harmonize; if all four colors are used in equal amounts, this scheme risks looking unbalanced and chaotic, so choose one color to be dominant! Color Design Color Schemes
  • 19. Simultaneous Contrast: The concept of color perception based on the other colors surrounding it. Color can look completely different when set against different hues, and is perceived in relation to its surroundings.! Color Design Simultaneous Contrast
  • 20. Advancing/ Receding Color: Warm and bright colors give the illusion of being closer to a viewer within a composition, while cool and dull colors appear to be further away. Color Design Advancing and Receding Color
  • 21. Color Design Advancing and Receding Color Advancing/ Receding Color: Warm and bright colors give the illusion of being closer to a viewer within a composition, while cool and dull colors appear to be further away.
  • 22. Vibration: Complementary colors of equal saturation and brightness compete with our eye for attention when seen in close proximity to one another. Color Design Vibration
  • 23. Weight: Colors differ in visual weight based on their hue and intensity. For example, red is considered a heavy color, and would demand a viewer s attention, even if shown in only a small amount within a composition.! Color Design Weight
  • 24. Weight: Colors differ in visual weight based on their hue and intensity. For example, red is considered a heavy color, and would demand a viewer s attention, even if shown in only a small amount within a composition.! Color Design Weight