What is Color? Lecture Objectives

• Define color and describe how it relates to creative fields

• Describe the basic anatomy of the human eye as it relates to processing and perceiving color

• Differentiate subtractive, process, and additive color systems

• Describe how color systems relate to software color modes

• Identify and apply color attributes in creative work

• Describe the structure and purpose of a color wheel

• Recognize and utilize basic color theory terminology

• Apply color relationships and schemes in creative work What is Color?

• The term color refers to how we describe the impact of light waves on objects around us

• Color is a complex human experience generated collectively by the eye and the brain

• Color would not exist without light

• Color is one of the essential elements of design that can be inherently part of other elements, such as line or shape Color Properties

• Color itself isn’t tangible; surfaces and objects from our physical environment contain color properties

• Color possesses physical, psychological, and chemical properties:

• Physical aspects of color refer to color physics and perception; how we see and why

• Psychological aspects of color encompasses color expressiveness, moods and meanings; global interpretations of color that vary culturally and regionally

• Chemical aspects of color refers to pigments, dyes, or screen-based media such as computers and tablets; how color manifests in daily life

• These combined properties of color make it an essential consideration in creative media Color and the Human Eye

The human eye has two different color receptor cells, called rods and cones

• Rods perceive lightness or darkness, referred to as values

• Cones are sensitive to particular waves of light: red, green and blue

• Rods and cones work in combination to give us the range of colors and values we perceive

• Visual information from the rods and cones is broken down into dots or patterns, and then re-formed in our brains Subtractive, Additive, and Process Color

• Subtractive, Additive, and Process color represent three essential physical categories of color to consider for creative fields

• A physical object’s surface, like a palette of paint, absorbs light rays in a subtractive manner, which reflects the colors we see

• A poster design printed at a professional offset printing shop mixes color plates using cyan, magenta, yellow, and black inks; this is called called process color

• Process color for offset printing is a type of subtractive color, as the inks reflect light

• An image on a computer or tv screen mixes light rays in an additive manner to emit colors, rather than reflecting the colors More about Subtractive Color

• When light strikes an object, like a banana, most of the light wavelengths are absorbed, or subtracted, by the banana

• The yellow wavelength is reflected, and that’s why we see bananas as yellow

• Subtractive Color applies to the colors we see on pigmented surfaces, such as paintings, on objects around us, like a banana, or physically printed designed surfaces like packages of tea

• Subtractive Color always refers to the color reflected off physical materials around us More about Additive Color

• Additive Color media, such as your smartphone or tablet, mixes and emits light rather than reflecting it

• The screens we view contain mixtures of light rays that combines and adds to other light rays to create the colors we see; this is called Additive Color

• A computer monitor, a tablet screen, a TV monitor, or a projection are all examples of additive color media

• Additive and Subtractive color systems are essential to know in creative media

• Producing different types of graphics for print and screen require different color modes and settings that relate to the object or device you are designing for What are Primary Colors?

• The term and concept of Primary Colors refers to three foundational colors that form all other colors in the spectrum when mixed together Primary additive colors for screens: RGB

• Subtractive and Additive color systems each have different primary colors, and produce different results when mixed

• Subtractive primary colors for painting are different from Subtractive primary colors for process printing Primary subtractive colors for painting: RYB • These primaries and color systems are helpful to understand when choosing color modes in software to design creative work for print or screen

Primary subtractive colors for process printing: CMYK Black not shown in this diagram Additive Primary Colors

• The additive primary colors are red, green and blue, RGB

• These colors form all other colors in the additive spectrum

• These colors create white light when mixed together as colored spotlights

• When designing graphics that will be viewed on a computer or other light- based media, like games, websites or video, select RGB color mode to ensure the colors display accurately Subtractive Primary Colors

• The subtractive primary colors for painting and drawing with color media are red, yellow and blue (RYB)

• These primaries form all other colors in the subtractive spectrum

• These primaries create a muddy dark brown when mixed together as paints or inks

• The subtractive primary colors for process printing at a commercial printer are cyan, magenta, and yellow; black ink is added as a fourth plate for contrast CMY(K)

• When designing graphics on a computer for offset printing, like package designs or posters, the CMYK color mode ensures the colors translate accurately

• Graphic software programs offer a variety of CMYK swatches and swatch books of process color swatches Reading the Color Wheel

• The color wheel was created to organize the spectrum of hues

• The structure allows designers, artists, and other creatives to easily view, categorize and relate colors to one another

• The hues on the wheel can be broken into three categories:

•Primary Colors •Secondary Colors •Te r t i a r y C o l o r s

• With subtractive color, as discussed earlier, the primary colors are red, yellow, and blue; notice how these form a triangle in the color wheel

• These primary hues blend to create all the other pure hues on the color wheel Reading the Color Wheel

• When primary colors are mixed, secondary colors are created: •Orange •Green •Violet

• Note that these secondary colors also form a triangle, spreading out from the middle

• When secondary colors are mixed, tertiary colors are created. Some examples of tertiaries are: •Red-Orange •Blue-Violet •Ye l l o w-Green

• The relationships between primary, secondary and tertiary hues on the color wheel aids in understanding color relationships and constructing color schemes for visual projects Color and Temperature

• The traditional color wheel organizes colors into relative temperatures, from warm to cool

• Approximately half of the color wheel is warm and half cool

• The midpoints between warm and cool, sometimes called chameleon colors, are violet and green

• Violet and green can take on warm or cool appearances depending on the surrounding colors

• Color temperature and color schemes play heavily into the psychological effects of color Color Attributes

There are three qualities or attributes to consider: Hue, Value and Saturation

• Hue refers to the name given to the color we see, for example, red

• The terms color and hue are often used interchangeably, but they are different

• A hue is always pure, and is represented on a color wheel as a primary, secondary or tertiary

• A color might be a mix of several hues, or hues and colors; it might be mixed with black or white, and may not be on the color wheel at all

Material Referenced from 2D Visual Basics for Designers by Robin Landa, Thomson Delmar Learning Copyright 2007 Color Attributes

• Value describes the relative lightness or darkness of any color or hue

• Examples: •The yellow hue is lighter in value than the violet hue •The color pink is a lighter value than the hue red

• To lighten the value of a hue, you can: •Add white, called a tint •Add black, called a shade

• Examples: •A shade of red-orange would be brown •A tint of violet would be lavender •A tint of red would be pink •A shade of blue would be navy blue Color Attributes

• Saturation refers to the pureness or intensity of a color or hue

• A given color or hue’s saturation is described as high or low

• Examples of high-saturation hues:

•Red, violet, yellow-green, orange, etc. •Any pure hue on the color wheel

• Examples of low-saturation hues:

•Pink, beige, mauve, sage, brown •A pure hue can be desaturated by mixing white, black, gray, or another color with it More about Color and Value

• Colors and hues both contain value

• In a composition, it can sometimes be difficult to see past the saturation of a color or hue to see the actual value

• The two diagrams on this page are the same, with the one on the right converted to grayscale for this exercise

• The highest value contrast swatches shown are the black and white swatches on top

• Notice the pure primary hues are higher in value contrast than secondary hues

• Color value and color saturation both play a significant role in: • Legibility of text against a background • Compositional balance • Directing a viewer’s eye around a composition Color, Value, and Achromatics

• White, black and gray are not included on most traditional color wheels

• These colors are called achromatics; they are neutral colors lacking hue or chroma

• Achromatics define our range of light to dark

• Achromatics are essential entities in color theory and color mixing

• Achromatics affect the value and saturation of hues when mixed

• Achromatics blend with hues to create a vast array of color combinations not on the color wheel Basic Color Schemes

• The color wheel can be used to determine color combinations, or color schemes, to enhance a message or emotion in design

• A few strategies for combining colors include the following color schemes:

• Complementary • Analogous • Monochromatic • Color Chords (Triad and Tetrad) Basic Color Schemes: Complementary

• Hues directly opposite from each other on the color wheel are complementary colors

• These color combinations are dynamic, exciting, and “pop” when used together

• Complements can be primary, secondary or tertiary

• Complementary colors will always live opposite from one another on the color wheel Basic Color Schemes: Analogous

• Any set of three to four colors that are adjacent to one another on the color wheel are called analogous colors

• When used together, analogous colors create a quiet, calming and pleasing visual harmony Basic Color Schemes: Monochromatic

• Monochromatic color schemes are a set of colors all related to one central hue

• The image to the right represents a monochromatic blue color scheme

• Notice that in addition to the primary blue on the color wheel, tints and shades of blue are also visible, from mixing white and black with blue

• You may also notice that blue-violet is included; hues may be intermixed in a monochromatic scheme

• Similar to analogous schemes, monochromatic schemes can lend a sense of calm and order to a composition Color Chords: Triads and Tetrads

• Groups of colors that are spaced out evenly on the color circle are referred to as color chords, a reference to a musical chord of complementary notes struck all at once

• A triad chord is three colors, made of equidistant colors 4 steps from each other

• A tetrad chord is four colors, evenly spaced 3 steps from each other on the wheel Practice Analyzing Color

• Observe how color schemes and attributes are used to create dramatic contrast in this poster

• The eyes and exclamation mark nose and mouth are all red, a pure hue

• The medium-dark value of the red pops out against the light value white of the head

• The solid background is a color; a mix of green and gray

• The red is high-saturation, allowing the pure hue of red to be emphasized, and stand out from the the low-saturation green background

• Red and green are complimentary colors Practice Analyzing Color

• In this image, observe how color attributes are used for emphasis

• There’s a clear focal point of the light value yellow-green square against all the other dark value squares

• The high saturation of the light green square against the low saturation squares allows it to pop out as the emphasis

• Hue, value, and saturation are tools to direct where a viewer’s eye goes in the composition

• This simple image is a great example of how color and value can help direct a viewer’s eye Color Summary

• The term color refers to how we describe the impact of light waves on objects around us

• Color is a complex human experience generated collectively by the eye and the brain

• Color would not exist without light

• Color is one of the essential elements of design that can be inherently part of other elements, such as line or shape

• Color possesses physical, chemical, and psychological properties

• In the human eye, rods and cones work in combination to give us the range of colors and values we perceive

• Subtractive, Additive, and Process color represent three essential physical categories of color to consider for creative fields, each possessing different primary colors

• The structure of a color wheel allows designers, artists, and other creatives to easily view, categorize, and relate colors to one another using schemes and temperatures

• Color attributes can help enhance a message or direct a viewer’s eye when used strategically Terms to Remember • Physical properties of color: • Physical • Psychological • Chemical • Physical categories of color, corresponding primary colors, and media types: • Subtractive / RYB / painting • Additive / RGB / smartphones, monitors • Process / CMY(K) / offset printing • Human anatomy and color: • Rods • Cones • Color Attributes • Hue • Value • Saturation • Color Schemes • Complementary • Analogous • Color Chord / Triad / Tetrad • Monochromatic

Triad and Tetrad diagrams from luminouslandscape.com Some lecture elements reference 2D Visual Basics for Designers by Robin Landa, Thomson Delmar Learning