Color Theory - Salt Lake City School...

28
COLOR THEORY Digital Media West High School Susan M. Raymond Color Matters

Transcript of Color Theory - Salt Lake City School...

Page 1: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

COLOR THEORYDigital Media

West High School

Susan M. Raymond

Color Matters

Page 2: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

COLOR

• Color plays a vitally important role in the world in which we live. Color can sway thinking, change actions, and cause reactions. It can irritate or soothe your eyes, raise your blood pressure or suppress your appetite

• When used in the right ways, color can save on energy consumption. When used in the wrong ways, color can contribute to global pollution

• As a powerful form of communication, color is irreplaceable. Red means "stop" and green means "go." Traffic lights send this universal message. Likewise, the colors used for a product, web site, business card, or logo cause powerful reactions

• Color theory encompasses a multitude of definitions, concepts, and design applications. All the information would fill several encyclopedias.

Color is a quality of how light is reflected from objects

Page 3: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

WHAT COLOR IS

• Isaac Newton first passed a beam of white light through a prism and saw it divide into several colors, creating a spectrum of colors

• The colors of the light wave spectrum are red, orange, yellow, green, blue and indigo. In physics, mixing the colors of the light wave together produces pure white light.

• It is these light waves, bouncing off or being absorbed by objects around us, that give them color.

• Hence the theory, color is a property of light.

Page 4: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

THE COLOR WHEEL

• A color circle, based on red, yellow and blue, is traditional in the field of art and is a way of arranging colors to show a variety of relationships between colors

• Sir Isaac Newton developed the first circular diagram of colors in 1666, this diagram is called a color wheel

• Since then scientists and artists have studied and designed numerous variations of this concept

Page 5: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

THREE PROPERTIES OF COLOR

• Hue is the basic name of a color or the pure form of color – there are six basic hues: red, yellow, blue, green, orange, and violet

• Intensity or saturation refers to the relative brightness or dullness of the color – a color is at full intensity only when pure and unmixed

• Value is the lightness or darkness of a hue

Page 6: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

PRIMARY COLORS

• Red, yellow, and blue

• In traditional color theory, these are the three pigment colors that can not be mixed or formed by any combination of other colors

• All other colors are derived from these three hues

Page 7: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

SECONDARY COLORS

• These are the three colors formed by mixing two primary colors together - green, orange, and violet (purple)

• Blue + yellow = green

• Red + yellow = orange

• Red + blue = violet

Page 8: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

TERTIARY COLORS

• These are the six colors formed by mixing a primary color with a secondary color - yellow-orange, red-orange, red-violet, blue-violet, blue-green, and yellow-green

Page 9: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

• The question:Now that we have 12 colors...where do the rest of the colors come from?

The answer:Variations in tint, shade, and tone

Shade - hue mixed with black

Tint - hue mixed with white

Tone - hue + gray or hue + complementary color

Page 10: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

COLOR THEORY BASICSAdditive and Subtractive

Page 11: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

ADDITIVE COLOR THEORY

• Additive Color Theory states that in the natural world white light is made up of three basic components: red, green, and blue light

• In theory adding these three primary colors of light, red, green, and blue, together achieve white

• This is where we get RGB which is used by computer monitors

Page 12: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

SUBTRACTIVE COLOR THEORY

• Subtractive Color Theory explains how cyan, magenta, and yellow pigments or inks on paper subtracts white light components

• Since white light is made up of red, green and blue light, the inks subtract out that particular portion or color of light

• Whatever light that is left is recognized by the eye as a particular hue

• This is where we get CMYK which is used in the printing process

Page 13: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

BASIC COLOR SCHEMES

• Color schemes are ways to use groups of colors together so a desired affect is achieved by an artist

• Look at the next few slides to learn more about these schemes

Page 14: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

MONOCHROMATIC SCHEME

• This uses a single pure hue with a number of tints and shades to provide variety

• Pros: Extremely unified and harmonious -effective for establishing an overall mood

• Cons: Can be dull because of the lack of variation and therefore can lose the interest of the viewer

Page 15: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

ANALOGOUS COLORS

• Analogous colors are any three colors which are side by side on a 12 part color wheel, such as yellow-green, yellow, and yellow-orange

• Usually one of the three colors predominates

• Pros: Great selection of possible combinations makes this scheme versatile - the similarity of colors makes the schemes harmonious with great results because it is used in nature and is usually soothing and restful

• Cons: The use of more than three colors can dilute the overall effect of this scheme

Page 16: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

COMPLEMENTARY COLORS

• Complementary colors are any two colors which are directly opposite each other on the color wheel, such as red and green and red-purple and yellow-green

• In the illustration below, there are several variations of yellow-green in the leaves and several variations of red-purple in the orchid

• These opposing colors create maximum contrast and maximum stability – they heighten and accent one another

• Pros: Extremely eye-catching and vibrant, sometimes more so than the triadic scheme

• Cons: The limited number of colors in complementary schemes means the colors are easily digested and then discarded by the viewer

Page 17: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

TRIADIC

• The points on the triangle indicate the colors you should choose

• This scheme is very appealing and well balanced

• Most effective color scheme consists of the three primary colors - the extreme contrast has immense visual impact.

• Pros: Extremely stable, each color perfectly balances with the other - the bold nature makes for a vibrant color scheme and is useful for presenting information in bold decisive patterns

• Cons:The vibrancy may be too garish and detract from the message

Page 18: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

SPLIT COMPLEMENTARY

• Split Complimentary colors are similar to complimentary but instead of just two colors directly opposite on the color wheel, two of the three colors are adjacent to one of the colors that is opposite

• Pros: This scheme has more variety than a simple complementary color scheme

• Cons: It is less vibrant and eye-catching - it is difficult to harmonize the colors

Page 19: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

COLOR HARMONY

• Harmony can be defined as a pleasing arrangement of parts, whether it be music, poetry, color, or even an ice cream sundae.

• In visual experiences, harmony is something that is pleasing to the eye. It engages the viewer and it creates an inner sense of order, a balance in the visual experience. When something is not harmonious, it's either boring or chaotic. At one extreme is a visual experience that is so bland that the viewer is not engaged. The human brain will reject under-stimulating information. At the other extreme is a visual experience that is so overdone, so chaotic that the viewer can't stand to look at it. The human brain rejects what it can not organize, what it can not understand. The visual task requires that we present a logical structure. Color harmony delivers visual interest and a sense of order.

• In summary, extreme unity leads to under-stimulation, extreme complexity leads to over-stimulation. Harmony is a dynamic equilibrium.

Page 20: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

NATURE

• Nature provides a perfect departure point for color harmony

• In the illustration below, red yellow and green create a harmonious design, regardless of whether this combination fits into a technical formula for color harmony

Page 21: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

COLOR CONTEXT

• How color behaves in relation to other colors and shapes is a complex area of color theory

• Compare the contrast effects of different color backgrounds for the same red square

• Red appears more brilliant against a black background and somewhat duller against the white background

• In contrast with orange, the red appears lifeless; in contrast with blue-green, it exhibits brilliance

• Notice that the red square appears larger on black than on other background colors

Page 22: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

• Different readings of the same color

Page 23: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

• If your computer has sufficient color stability and gamma correction (link to Color Blind Computers) you will see that the small purple rectangle on the left appears to have a red-purple tinge when compared to the small purple rectangle on the right

• They are both the same color as seen in the illustration above

• This demonstrates how three colors can be perceived as four colors

Page 24: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

• Observing the effects colors have on each other is the starting point for understanding the relativity of color

• The relationship of values, saturations and the warmth or coolness of respective hues can cause noticeable differences in our perception of color

Page 25: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

PSYCHOLOGY OF COLOR

• The eye contains three different types of color receptors, each sensitive to one of the primary colors of the light spectrum. This seems to suggest an active connection between our physiological makeup and the world in which we live. Colors have the power to evoke specific emotional responses in the viewer. Red, yellow and their variations are referred to as warm colors, perhaps because we associate them with fire and the sun. Blue and green are considered cool colors. They also happen to be the colors of sky, water and forests. Personal memories play a part in color perception as well. If your mother usually wore a particular shade of blue and you loved your mother, then that shade of blue would have good associations for you.

Page 26: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

WARM COLORS

• Advance

• Excitement, passion, liveliness

• Yellow to red-violet on the color wheel

Page 27: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

COOL COLORS

• Cool colors recede

• Serenity, calmness

• Violet to yellow-green on the color wheel

Page 28: Color Theory - Salt Lake City School Districtstaffsites.slcschools.org/sraymond/digital_media_I/2014-2015Tutoria… · product, web site, business card, or logo cause powerful reactions

• Color discord is the perception of dissonance in a color relationship

• Emotional or symbolic colors are a subjective approach to color usage to elicit an emotional or symbolic response in the viewer