COLOR
Mar 31, 2015
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