Principles of Visual Design LCC 2720 Lecture 3 Color

Principles of Visual Design 2720

Principles of Visual Design LCC 2720

Lecture 3

Color


Color Wheel


Primary Colors


Secondary Colors


Tertiary Colors


Primary, Secondary and Tertiary Colors


Primary, Secondary and Tertiary Colors


Standard 12-Color Wheel


Three Characteristics of Color

Hue

Saturation

Value


Hue, Saturation and Brightness (Value)in the Photoshop/Illustrator Color Picker


Hue, Saturation and Brightness (Value)in the Photoshop/Illustrator Color Picker


The First Color Wheel

Sir Isaac Newton created the first color wheel resulting from his experiments with refracting light.


Modern Color Theory


Color Theory Overview

According to color theory, harmonious color combinations use:

Any two colors opposite each other on the color wheel.

Any group of colors next to each other on the color wheel.

Any three colors equally spaced around the color wheel forming a triangle.

Color schemes remain harmonious regardless of the rotation angle.


Color Theory Overview

Any four colors forming a rectangle.

The split of one color’s compliment.

Monochromatic combinations.

Color schemes remain harmonious regardless of the rotation angle.


Monochromatic

Monochromatic color schemes are guaranteed to be harmonious as they are a single color with variations of value and saturation. They have the highest degree of harmony, but the lowest degree of contrast. Since they grab your attention less than any other color combination they’re usually used for more reserved, corporate, expensive, or nostalgic types of designs.


Monochromatic Design

However, as all rules are there to be broken, the laid back color scheme of this design makes it extremely appealing to the eye. The uniformity and subtlety of color is balanced with a huge upside-down alphabet and strange collage of iconography. If the colors contrasted each other with hue we wouldn’t notice the strange imagery as much.


Monochromatic Design

Because of the emphasize on the iconography in monochromatic designs this is actually a very common technique among designers today.


Complementary Colors

Any two colors 180 degrees opposite on the color wheel.


Complementary Colors

Complementary Colors have the highest contrast (in terms of hue, not value). Because of this they are as bold of a combination as possible. Color compositions based on them usually work, however can become tiring to look at due to the high hue contrast.


Expansion of Color Theory

Standard color theory doesn’t take color value into account. So, according to color theory, these two compositions are technically the same as the complimentary colors of magenta and green. Therefore you can adjust the value of the hue and lower the punch-factor of these colors.


Complimentary Colors

Using Compliments as a basis for a color scheme, but slightly branching out to include variances of value, will widen the breadth and make compositions that are pleasing for longer periods of time.

+ =


Artists Mix Complimentaries to Achieve Rich Vibrant Grays, Browns, and Neutral Colors…


Analogous Colors

These are any number of colors that are adjacent on the color wheel.


Analogous Colors


Analogous Colors

These combinations have an extremely high degree of harmony but low degree of contrast.


These can seem very drab. A complimentary color could be added here for an accent that add dynamism to the design

Analogous Colors


These can seem very drab. A complimentary color could be added here for an accent that add dynamism to the design

Analogous Colors


Triadic Colors

Triadic colors are any colors 120 degrees (one third of a 360 degree circle) apart on the color wheel.


The Triad of the Three Primary Colors are the most energetic and balanced color combination possible. Together, they draw intense visceral interest.


The Triad of the Three Primary Colors are the most energetic and balanced color combination possible. Together, they draw intense visceral interest, as such, they are appealing to children. Due to the commercial forces of marketing, we’ve learned to associate this Triad with children.


Split Complimentary

This is a combination of two colors next to the opposite of the first color.


Split Complimentary Colors

This is structure is dynamic enough to hold interest, but not with an excess of intensity of hue contrast from which the eye tires so easily.


Split Complimentary

This combination balances the interests of harmony and contrast, neither dominating the composition


Split Complimentary



Split Complimentary



Analogous with a Single Complimentary

This usually is pretty striking combination as the analogous colors are of the strongest harmony, but the compliment of the center color punches the composition with a dramatic accent.


Double Complimentary

Double complimentary combinations are almost on the verge of breaking down into simply a panoply of color without any structure. However, since we can still intuitively grasp the structure of this combination it will retain a (weakened) harmony.


Double Complimentary


Double Complimentary may be referred to as ‘Tetrads’


Invent New Color Combination Structures

Of course, you can always invent new combinatory structures. You could call this one a “Missing Tetradic”.

?


Invent New Color Wheels

Many Crafts such as Floral Arrangement and Furniture Craft have their own Color Wheels. Individual artists often devise their own color wheels to limit their color palettes with a concrete reference in an intuitive way.


LIMIT YOUR COLOR PALETTE

The All Important Fact You Should Remember from Color Theory is to define your color palette and stick with it. If you find a color you feel just has to go into your composition, you should rethink your palette altogether and possibly start over.


A Tip for Nice Color Combinations

1) Get a photo with some colors you like.

2) Open it in Photoshop and tweak/exaggerate the colors

Using “Curves”.

3) Use the eyedropper, get some colors off it

and paint some swatches.


Color Balancing

Different colors have different levels of influence on drawing the eye. For example…


Color Balancing

Different colors have different levels of influence on drawing the eye. For example…


Color Balancing

The yellow is screaming for attention while the blue patiently waits for your eye.


Color Balancing

So this is an unbalanced color composition.


Color Balancing

So how can we balance this composition out?


We could try this.

Color Balancing


Or this.

Color Balancing


Or this.

Color Balancing


Accent Colors

Accent colors define a composition by drawing attention due to their anomaly in the design. Most effective designs have carefully calculated combination of accent and dominant colors.


Accent Colors


Accent Colors


Warm and Cool Colors

Cool colors tend to spread out and soothe, where warm colors tend to contract and excite. When creating color palettes for your designs use this knowledge to your advantage. Choose the colors that help communicate your message by reinforcing its underlying logic.


How do these colors tell you how to feel about your “McDonald’s Experience”?


However, also due to the attention-gettingpower of yellow it is also used to mean caution…


Cultural, physiological and personal forces each contribute to our perceptions of color


Hue Intensity

Lowering the overall hue intensity of a design usually gives it an aged look. This is reminiscent of black and white/sepia film and photographs.


Juxtaposition changes how color is perceived…

Is this a rich butterscotch mocha…


Juxtaposition changes how color is perceived…

Or a Dirty Yellow…


Sequence changes how color is perceived…

Is this a pure grey…





Or a cool grey…


We have two types of Photoreceptor

cells inside our eye:

Rods: Which responds to dim light.

Cones: Which responds daylight and color.


They’re names were given for a very clear reason…


Animals such as dogs have more Rods than we do but less Cones. What does this mean?


1) They have better night vision.

2) In darkness they have greater sensitivity to differences in color Value, but not Hue.

This is why they have trouble seeing a red ball in green grass. They aren’t color blind, but are color impaired compared to humans.

Red ball in thegrass to you…

and to your dog.


1) They have better night vision.

2) In darkness they have greater sensitivity to differences in color Value, but not Hue.

This is why they have trouble seeing a red ball in green grass. They aren’t color blind, but are color impaired compared to humans.

Red ball in thegrass at night to you…

and to your dog.


RBG

Red Green and Blue


RBG(additive color process)

On RBB monitors small phosphoric dots combine to form color.



Red, Blue and Green light combines to form White.






RGB in the Photoshop/Illustrator Color Picker


CMYK

Used for printed materials:

Cyan, Magenta, Yellow and Black


CMYK(subtractive color process)


CMYK in the Photoshop/Illustrator Color Picker


The Web Uses a “Hexidecimal” Numerical System for Colors

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

0 1 2 3 4 5 6 7 8 9 A B C D E F

Decimal

Hex


Some Hex Colors


Color Gamut

Is the full range of colors that can be recorded or output by a particular medium. In other words, its “Color Space”.


Color Gamut

The yellow line = the color gamut for an average RGB monitor.

The cyan line = the color gamut for average CMYK printing.


Human Color (Visible Light) Gamut


Human Color Gamut


The Gestalt of Color

When our cones are flooded with color for a period of time they become overloaded in a sense. This is best understood through an experiment.


Stare at the dot for 30 seconds…


Stare at the dot for 30 seconds…


Synesthesia

This is the faculty to receive stimuli through one sense, sight, for example, and perceive it through another, hearing, for example.


Synesthesia

Wassily Kandinsky heard blaring trumpets when he saw bright yellow.


Some Synesthese Experience Have Words, Numbers, Space, Color cross wired in very interesting ways.

Radical = Radical

or

452-6220 = 452-6220


Some Synesthese Experience Have Words, Numbers, Space, Color cross wired in very interesting ways.

“bzzzzzzzzzzzzzz” =


Which is Kiki and which is Booba?

We all are synesthese, it’s just more subtle for most of us…


??

?

Documents

Principles of Visual Design LCC 2720 Lecture 3 Color