COLOR

PURPOSES OF COLOR

• Attention

• Mood

ATTENTION

• Color is rarely helpful to convey information

• Color can draw attention (Flowers and bees)

• Careful demands on attention• Guide not force

ATTENTION

MOOD AND SETTING

MOOD

• Emotion• Happy, Intense,

Excited, Love

• Age• Baby, Child, Youth,

Adult

• Energy• High, Low

• Gender• Male, Female

MOOD

• Emotion• Happy, Intense,

Excited, Love

• Age• Baby, Child, Youth,

Adult

• Energy• High, Low

• Gender• Male, Female

MOOD

• Emotion• Happy, Intense,

Excited, Love

• Age• Baby, Child, Youth,

Adult

• Energy• High, Low

• Gender• Male, Female

MOOD

• Emotion• Happy, Intense,

Excited, Love

• Age• Baby, Child, Youth,

Adult

• Energy• High, Low

• Gender• Male, Female

MOOD

• Emotion• Happy, Intense,

Excited, Love

• Age• Baby, Child, Youth,

Adult

• Energy• High, Low

• Gender• Male, Female

MOOD

• Emotion• Happy, Intense,

Excited, Love

• Age• Baby, Child, Youth,

Adult

• Energy• High, Low

• Gender• Male, Female

DESIGNING A MOOD

DESIGNING A MOOD

DESIGNING A MOOD

SETTING MOOD NEUTRAL ---- DESIGNING

SETTING MOOD NEUTRAL ---- LESS INTENSE

SETTING MOOD BIASED

BASIC COLOR SCHEMES

• Key Color• Control Saturation

• Tints and Shades

• Accent Color

Hue

Saturation

Value

Hue

Saturation Lightness

HUMAN VISION PRINCIPLES

• Information • Contrast in Value

• Do not depend on only one set of cones

• Peripheral vision• Gray and Blurred

Why is this so much easier?

SIMPLE COLOR SCHEME

• Pick a key color

• Add black and white

• Add a tint and a shade

• Pick a contrast color

PICK A KEY COLOR

Key

White

Black

Tint

Shade

Accent

PICK A TINT (MIX WITH WHITE)

Key

White

Black

Tint

Shade

Accent

PICK A SHADE (MIX WITH BLACK)

Key

White

Black

Tint

Shade

Accent

PICK AN ACCENT (CHANGE HUE)

Key

White

Black

Tint

Shade

Accent

PICK AN ACCENT (CHANGE HUE)

Key

White

Black

Tint

Shade

Accent

This is some text on our page

This is some more text

Button Text

POWERPOINT EXERCISE

Key

White

Black

Tint

Shade

Accent

This is some text on our page

This is some more text

Button Text

KULER.ADOBE.COM

TEXTURE

TEXTURE

This is some text

TEXTURE

This is some text

TEXTURE

This is some text

TEXTURE

This is some text

TEXTURE

This is some text

GRADIENTS

This is some textThat I canUse toDemonstrateProblemsWith gradients

This is some textThat I canUse toDemonstrateProblemsWith gradients

GRADIENTS

This is some textThat I canUse toDemonstrateProblemsWith gradients

This is some textThat I canUse toDemonstrateProblemsWith gradients

GRADIENTS

This is some textThat I canUse toDemonstrateProblemsWith gradients

This is some textThat I canUse toDemonstrateProblemsWith gradients

TRANSPARENT GLOWS

OVERVIEW

• Use of color• Attention

• Mood

• Mood• Pick relevant images, blur them, select colors

• Try your choices out for people’s response

• Setting• Black, White, Color

OVERVIEW

• Hue, Saturation, Value• Information contrast in the Value range

• Lower saturation for more pleasing colors

• 6 Color Scheme• Key color, white, black, tint, shade, accent

• Kuler.adobe.com

• Texture

• Gradient

• Glow