SlideShare a Scribd company logo
1 of 33
color
  Color theory is the study of how pure colors relate to each other and the
  effect of their combinations. We’ll go over some of the most recognized
  color relationships, or schemes, along with examples of their use on various
  websites today.

  Developing a color scheme is often the first step in
  deciding which colors will look best together in a design. In each of the
  following screenshots, the color palette shows the main colors being used
  in the accompanying screenshot, while the pure color hues are marked on
  the color wheel to show the relationships between the colors.
Color Primer


Our eyes have three different types of color receptors, which each
respond to the red, green and blue colors of light differently. For
instance, the color blue stimulates one receptor more than the
others and as a result transmits different information to the brain.
The way in which different combinations of color affect these
different receptors results in the millions of different kinds of color,
called hues. These hues can be mapped to a circle (often called a
color wheel) in degrees (°), with each 60° marking a different base
color. Three of these base colors are called primary (red, green,
blue), three are called secondary (yellow, cyan, magenta) and the six
in between them are called tertiary.

A popular color model in computing is called HSB. It uses hue and
two related terms, saturation and brightness, to define and describe
colors.

Saturation (0 to 100%) refers to how vibrant a color is compared to
its maximum potential. Brightness refers to a color’s lightness (0 to
100%).
Pure colors have high brightness and saturation values, making them
more vivid. Dark colors have low brightness values, making them
blacker. The less saturated a color, the more colorless it appears,
until it has no color. As you can see from the screenshot, many
colors can be made just from mixing one hue degree with various
shades of white, black and gray. Another screenshot demonstrates
this for red at 360°.
tint, shade and tone




                       In discussing color, other terms that describe differences in colors include
                       tint, shade and tone. Tint is the amount of white that a pure color has.
                       Shade is the amount of black it has. Tone is the amount of gray it has. The
                       screenshot demonstrates how a color changes based on these properties.

                       Colors on the Web are understood by the browser as hexadecimal values
                       and are typically labeled with the pound sign (#). Each red, green and blue
                       element of a color is converted from a number (0 to 255) to a set of
                       characters that the computer can understand. At each end of this scale, 0 is
                       represented in hexadecimal format as “00,” while 255 is represented by “FF.”
                       The primary colors in their hexadecimal equivalents are #FF0000 (red),
Monochromatic:
one hue, varying in saturation and brightness.
Analogous or Blend:
hues adjacent to each other on the color wheel.
Complementary:
two hues directly opposite each other on the color wheel.
Triadic:
three hues equidistant from each other on the color wheel.
Square-Tetradic:
four hues equidistant from each other on the color wheel.
Accented:
muted colors, with one color high in saturation.
Warm:
colors from the top of the color wheel, with hues ranging from 271° to 90°.
Cold:
colors from the bottom of the color wheel, with hues ranging from 91° to 270°.
Double-complementary palette:
Mint.com uses a double-complementary color scheme to illustrate the effectiveness of its software. The bright-
orange button pops out from the screen and attracts the user’s eye.
END

More Related Content

What's hot (20)

AHSArt: Color theory Drawing + Painting
AHSArt:  Color theory Drawing + Painting AHSArt:  Color theory Drawing + Painting
AHSArt: Color theory Drawing + Painting
 
Elements of design colour
Elements of design   colourElements of design   colour
Elements of design colour
 
Color wheel
Color wheelColor wheel
Color wheel
 
Color theory
Color theoryColor theory
Color theory
 
Color Theory
Color TheoryColor Theory
Color Theory
 
A Brief Introduction to Color Theory
A Brief Introduction to Color TheoryA Brief Introduction to Color Theory
A Brief Introduction to Color Theory
 
Colour Theory
Colour TheoryColour Theory
Colour Theory
 
Color in design
Color in designColor in design
Color in design
 
COLOR FUNDAMENTALS
COLOR FUNDAMENTALSCOLOR FUNDAMENTALS
COLOR FUNDAMENTALS
 
Understanding Color
Understanding ColorUnderstanding Color
Understanding Color
 
Colour
ColourColour
Colour
 
Color presentation Intro to Art
Color presentation   Intro to ArtColor presentation   Intro to Art
Color presentation Intro to Art
 
Color theory
Color theoryColor theory
Color theory
 
Color Theory
Color TheoryColor Theory
Color Theory
 
color-theory for beginners
color-theory for beginnerscolor-theory for beginners
color-theory for beginners
 
Color Theory
Color TheoryColor Theory
Color Theory
 
Color power point
Color power pointColor power point
Color power point
 
Colour theory
Colour theoryColour theory
Colour theory
 
Colour theory
Colour theoryColour theory
Colour theory
 
Colour theory
Colour theoryColour theory
Colour theory
 

Viewers also liked

Graphic Design (Theory & Practice)
Graphic Design (Theory & Practice) Graphic Design (Theory & Practice)
Graphic Design (Theory & Practice) wael gomaa
 
Integrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product LifecycleIntegrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product LifecycleICS
 
How to design - Graphic design theory
How to design - Graphic design theoryHow to design - Graphic design theory
How to design - Graphic design theoryAbanoub Hanna
 
Color theory - Graphic Design
Color theory - Graphic DesignColor theory - Graphic Design
Color theory - Graphic DesignAbanoub Hanna
 
Principles of Design - Graphic Design Theory
Principles of Design - Graphic Design TheoryPrinciples of Design - Graphic Design Theory
Principles of Design - Graphic Design TheoryAbanoub Hanna
 
Elements of landscape
Elements of landscapeElements of landscape
Elements of landscapeAadesh Jani
 
Principle of landscape design
Principle of landscape designPrinciple of landscape design
Principle of landscape designNitin Thakral
 
The Art of the Presentation
The Art of the PresentationThe Art of the Presentation
The Art of the PresentationJeffrey Stevens
 
How to Use Social Media to Influence the World
How to Use Social Media to Influence the WorldHow to Use Social Media to Influence the World
How to Use Social Media to Influence the WorldSean Si
 
10 Things your Audience Hates About your Presentation
10 Things your Audience Hates About your Presentation10 Things your Audience Hates About your Presentation
10 Things your Audience Hates About your PresentationStinson
 
10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next Presentation10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next PresentationSOAP Presentations
 

Viewers also liked (17)

Color and ppt
Color and pptColor and ppt
Color and ppt
 
Graphic Design (Theory & Practice)
Graphic Design (Theory & Practice) Graphic Design (Theory & Practice)
Graphic Design (Theory & Practice)
 
Integrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product LifecycleIntegrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product Lifecycle
 
How to design - Graphic design theory
How to design - Graphic design theoryHow to design - Graphic design theory
How to design - Graphic design theory
 
Color theory - Graphic Design
Color theory - Graphic DesignColor theory - Graphic Design
Color theory - Graphic Design
 
Color Powerpoint
Color PowerpointColor Powerpoint
Color Powerpoint
 
Color Psychology
Color PsychologyColor Psychology
Color Psychology
 
Principles of Design - Graphic Design Theory
Principles of Design - Graphic Design TheoryPrinciples of Design - Graphic Design Theory
Principles of Design - Graphic Design Theory
 
Psychology of colors
Psychology of colors Psychology of colors
Psychology of colors
 
Elements of landscape
Elements of landscapeElements of landscape
Elements of landscape
 
Landscape Design and Principles
Landscape Design and PrinciplesLandscape Design and Principles
Landscape Design and Principles
 
Principle of landscape design
Principle of landscape designPrinciple of landscape design
Principle of landscape design
 
The Art of the Presentation
The Art of the PresentationThe Art of the Presentation
The Art of the Presentation
 
How to Use Social Media to Influence the World
How to Use Social Media to Influence the WorldHow to Use Social Media to Influence the World
How to Use Social Media to Influence the World
 
10 Things your Audience Hates About your Presentation
10 Things your Audience Hates About your Presentation10 Things your Audience Hates About your Presentation
10 Things your Audience Hates About your Presentation
 
10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next Presentation10 Powerful Body Language Tips for your next Presentation
10 Powerful Body Language Tips for your next Presentation
 
How Google Works
How Google WorksHow Google Works
How Google Works
 

Similar to Color Theory

World colors-odai hatem
World colors-odai hatemWorld colors-odai hatem
World colors-odai hatemodaihatim
 
Presentación1 ingles
Presentación1 inglesPresentación1 ingles
Presentación1 ingleseverezcotelo
 
HSB Color Model Presentation.pdf
HSB Color Model Presentation.pdfHSB Color Model Presentation.pdf
HSB Color Model Presentation.pdfSubhasishHalder11
 
Color and color models
Color and color modelsColor and color models
Color and color modelsSafwan Hashmi
 
presentacion1coloringles-2023 power point.pptx
presentacion1coloringles-2023 power point.pptxpresentacion1coloringles-2023 power point.pptx
presentacion1coloringles-2023 power point.pptxeverezcotelo
 
Kinnari (COLOR THEORY).pptx
Kinnari (COLOR THEORY).pptxKinnari (COLOR THEORY).pptx
Kinnari (COLOR THEORY).pptxKinsyRathod
 
Design Element 4 - Color
Design Element 4 - ColorDesign Element 4 - Color
Design Element 4 - Colormjb77ny
 
Presentacin1coloringles 2020
Presentacin1coloringles 2020Presentacin1coloringles 2020
Presentacin1coloringles 2020everezcotelo
 
Graphic Design Colors
Graphic Design ColorsGraphic Design Colors
Graphic Design ColorsCalvin Nguyen
 
Color fundamentals and color models - Digital Image Processing
Color fundamentals and color models - Digital Image ProcessingColor fundamentals and color models - Digital Image Processing
Color fundamentals and color models - Digital Image ProcessingAmna
 
colour theory ppt- animated ppt
colour theory ppt- animated pptcolour theory ppt- animated ppt
colour theory ppt- animated pptSarahKhais
 
Color Chapter 2 Powerpoint 2
Color Chapter 2 Powerpoint 2Color Chapter 2 Powerpoint 2
Color Chapter 2 Powerpoint 2tanyalangford
 

Similar to Color Theory (20)

About Color
About ColorAbout Color
About Color
 
World colors-odai hatem
World colors-odai hatemWorld colors-odai hatem
World colors-odai hatem
 
Presentación1 ingles
Presentación1 inglesPresentación1 ingles
Presentación1 ingles
 
HSB Color Model Presentation.pdf
HSB Color Model Presentation.pdfHSB Color Model Presentation.pdf
HSB Color Model Presentation.pdf
 
Lect 06
Lect 06 Lect 06
Lect 06
 
Color and color models
Color and color modelsColor and color models
Color and color models
 
presentacion1coloringles-2023 power point.pptx
presentacion1coloringles-2023 power point.pptxpresentacion1coloringles-2023 power point.pptx
presentacion1coloringles-2023 power point.pptx
 
Kinnari (COLOR THEORY).pptx
Kinnari (COLOR THEORY).pptxKinnari (COLOR THEORY).pptx
Kinnari (COLOR THEORY).pptx
 
Colour theory
Colour theoryColour theory
Colour theory
 
Design Element 4 - Color
Design Element 4 - ColorDesign Element 4 - Color
Design Element 4 - Color
 
Presentacin1coloringles 2020
Presentacin1coloringles 2020Presentacin1coloringles 2020
Presentacin1coloringles 2020
 
Graphic Design Colors
Graphic Design ColorsGraphic Design Colors
Graphic Design Colors
 
Color fundamentals and color models - Digital Image Processing
Color fundamentals and color models - Digital Image ProcessingColor fundamentals and color models - Digital Image Processing
Color fundamentals and color models - Digital Image Processing
 
Colour Theory.pptx
Colour Theory.pptxColour Theory.pptx
Colour Theory.pptx
 
Mastering the Art of Colours
Mastering the Art of ColoursMastering the Art of Colours
Mastering the Art of Colours
 
Lecture#10 Theory of Color.pptx
Lecture#10 Theory of Color.pptxLecture#10 Theory of Color.pptx
Lecture#10 Theory of Color.pptx
 
Colour 1 theory 2014
Colour 1 theory 2014Colour 1 theory 2014
Colour 1 theory 2014
 
colour theory ppt- animated ppt
colour theory ppt- animated pptcolour theory ppt- animated ppt
colour theory ppt- animated ppt
 
Color Chapter 2 Powerpoint 2
Color Chapter 2 Powerpoint 2Color Chapter 2 Powerpoint 2
Color Chapter 2 Powerpoint 2
 
ColorsTheory
ColorsTheoryColorsTheory
ColorsTheory
 

Color Theory

  • 1. color Color theory is the study of how pure colors relate to each other and the effect of their combinations. We’ll go over some of the most recognized color relationships, or schemes, along with examples of their use on various websites today. Developing a color scheme is often the first step in deciding which colors will look best together in a design. In each of the following screenshots, the color palette shows the main colors being used in the accompanying screenshot, while the pure color hues are marked on the color wheel to show the relationships between the colors.
  • 2. Color Primer Our eyes have three different types of color receptors, which each respond to the red, green and blue colors of light differently. For instance, the color blue stimulates one receptor more than the others and as a result transmits different information to the brain. The way in which different combinations of color affect these different receptors results in the millions of different kinds of color, called hues. These hues can be mapped to a circle (often called a color wheel) in degrees (°), with each 60° marking a different base color. Three of these base colors are called primary (red, green, blue), three are called secondary (yellow, cyan, magenta) and the six in between them are called tertiary. A popular color model in computing is called HSB. It uses hue and two related terms, saturation and brightness, to define and describe colors. Saturation (0 to 100%) refers to how vibrant a color is compared to its maximum potential. Brightness refers to a color’s lightness (0 to 100%). Pure colors have high brightness and saturation values, making them more vivid. Dark colors have low brightness values, making them blacker. The less saturated a color, the more colorless it appears, until it has no color. As you can see from the screenshot, many colors can be made just from mixing one hue degree with various shades of white, black and gray. Another screenshot demonstrates this for red at 360°.
  • 3. tint, shade and tone In discussing color, other terms that describe differences in colors include tint, shade and tone. Tint is the amount of white that a pure color has. Shade is the amount of black it has. Tone is the amount of gray it has. The screenshot demonstrates how a color changes based on these properties. Colors on the Web are understood by the browser as hexadecimal values and are typically labeled with the pound sign (#). Each red, green and blue element of a color is converted from a number (0 to 255) to a set of characters that the computer can understand. At each end of this scale, 0 is represented in hexadecimal format as “00,” while 255 is represented by “FF.” The primary colors in their hexadecimal equivalents are #FF0000 (red),
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14. Monochromatic: one hue, varying in saturation and brightness.
  • 15. Analogous or Blend: hues adjacent to each other on the color wheel.
  • 16. Complementary: two hues directly opposite each other on the color wheel.
  • 17. Triadic: three hues equidistant from each other on the color wheel.
  • 18. Square-Tetradic: four hues equidistant from each other on the color wheel.
  • 19. Accented: muted colors, with one color high in saturation.
  • 20. Warm: colors from the top of the color wheel, with hues ranging from 271° to 90°.
  • 21. Cold: colors from the bottom of the color wheel, with hues ranging from 91° to 270°.
  • 22. Double-complementary palette: Mint.com uses a double-complementary color scheme to illustrate the effectiveness of its software. The bright- orange button pops out from the screen and attracts the user’s eye.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33. END