Transcript Color Theory 101

Color Theory 101
Color Theory 101
• Just when you thought it was safe to use
the 216 web safe colors available to you…
• Along come millions of other colors
to add to the confusion…
Color Theory 101
• Some of the things we’ll cover…
– Primary Colors
– Color Perception / Color Blindness
– Elements of a Color
– Color Relationships
– Website Coloring
– Color and Emotions
Color Theory 101
• Types of Primary Colors
– Painter’s Colors (Traditional Primaries)
– Subtractive Colors
– Additive Colors
Color Theory 101
• Painter’s Color Wheel (R-Y-B)
Color Theory 101
• Subtractive Colors (R-G-B)
Color Theory 101
• Additive Colors (C-M-Y-K)
Color Theory 101
• Color Perception
– It’s all relative…
• Age can be an issue
• Environment can affect perception
– (EX: Laptop vs Projector)
• Color Blindness
• Past experiences (favorites?)
Color Theory 101
• Color Blindness
Color Normal
Color Deficient Dichromatic
Color Theory 101
Color Blindness
Color Normal
Color Deficient Dichromatic
• http://colorvisiontesting.com/
Color Theory 101
• The 3 Elements of a Color
– Value
– Saturation
– Hue
Color Theory 101
Elements of a Color
• Value
Color Theory 101
Value
• This property of color tells us how light or dark a color is
based on how close it is to white
Color Theory 101
Value
Color Theory 101
Value
Color Theory 101
Value
Color Theory 101
Value
Color Theory 101
Value
Color Theory 101
Value
Color Theory 101
Elements of a Color
• Saturation
Color Theory 101
Saturation
• Saturation refers to how vivid and intense a color is
Color Theory 101
Saturation
Color Theory 101
Elements of a Color
• Hue
Color Theory 101
Hue
• The technical name for color
• Describes the position of a color on a classic color wheel
• Used to name the color (Yellow, Orange, Red, etc.)
Color Theory 101
• Painter’s Color Wheel
Primary Colors
Secondary Colors
Color Theory 101
Painter’s Color Wheel
WARM
COOL
Tertiary Colors
Warm / Cool Colors
Color Theory 101
• Color Relationships
Complimentary
Analogous
Color Theory 101
Color Relationships
Split Complimentary
Triadic
Color Theory 101
Color Relationships
Rectangular
Square
Color Theory 101
• Website Coloring
• Hexadecimal and Web Safe Colors
Color Theory 101
• Website Coloring
• Photoshop color picker
• GIMPShop, Pixie, etc.
Color Theory 101
• Website Coloring
• Sites to Test Colors
– CSS Style Editor for the Weather Display/PHP/AJAX Website
Template Set
• http://www.642weather.com/weather/template/style-edit.php
– kuler (Adobe Color Picker)
• http://kuler.adobe.com/#themes/rating?time=30
Color Theory 101
• Color Emotions
• Red - Stimulates adrenaline and blood pressure, dramatic and rich,
the color of passion.
• Orange - Active and energetic. Represents sunshine, enthusiasm
and creativity.
• Yellow - Highly active and visible. Associated with happiness and
energy.
• Green - Found in nature, is a soothing color, easier on the eyes than
yellow, orange, or red.
• Blue - Calming, can reduce appetite, symbolizes intelligence,
openness and faith.
• Purple - Associated with royalty and power.
Color Theory 101
• Q&A
• Don Grcic
– [email protected]
• Mary Grcic
– [email protected]
Color Theory 101
Reference Sites
• Software training online-tutorials for Adobe, Microsoft,
Apple & more
– Lynda Weinman - Web Safe Colors
– Bruce Heaven - Working with Color
– http://www.lynda.com/
• Non-Dithering Colors in Browsers
– The Browser-Safe Web Palette
– http://www.lynda.com/resources/webpalette.aspx
• Basic color schemes - Introduction to Color Theory
– http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm
Color Theory 101
Reference Sites
• Color Picker Hexadecimal color code generator
– http://www.free-webmaster-tools.com/colorpicker.htm
• Back To Font Web Color Picker
– http://www.markup.co.nz/colorPicker/back_to_font.htm
• Color, Contrast & Dimension in News Design
– http://poynterextra.org/cp/colorproject/color.html
• CSS Style Editor for the Weather Display/PHP/AJAX
Website Template Set
– http://www.642weather.com/weather/template/style-edit.php
Color Theory 101
Reference Sites
• kuler (Adobe Color Picker)
– http://kuler.adobe.com/#themes/rating?time=30
• Color Scheme Designer 3
– http://colorschemedesigner.com/
• Color Wheel - Color Scheme Randomizer - Color Theory
for web designers
– http://www.colorsontheweb.com/colorwheel.asp
• ColorBlender.com Your free online color matching
toolbox
– http://www.colorblender.com/
Color Theory 101
Reference Sites
• HTML Color Codes
– http://html-color-codes.info/
• Kira's Web Toolbox Web Color Picker (Kuler swatches)
– http://www.lightsphere.com/colors/
• Part of color theory class from Dundean Studios
– http://dundean.com/tips_how_to_fix_color.shtml
• Color Wheel Version 2.1 (4096)
– http://www.ficml.org/jemimap/style/color/wheel.html
Color Theory 101
Reference Sites
• GIMPshop.com - A GIMP hack by Scott Moschella
– http://www.gimpshop.com/
• html color codes | Find best color Combinations
– http://colors.napcsweb.com/colorschemer/html_color_codes_tool.html
• Colorblind Homepage
– http://colorvisiontesting.com/
Color Theory 101
Books
• The Principles of Beautiful Web Design
by Jason Beard
– ISBN-10: 0975841963
• Color: A Course in Mastering the Art of Mixing Colors
by Betty Edwards
– ISBN-10: 1585422193
• Color Index: Over 1100 Color Combinations, CMYK and
RGB Formulas, for Print and Web Media
by Jim Krause
– ISBN-10: 1581802366