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 Normal Color Deficient Dichromatic

• Color Blindness

Color Theory 101

• http://colorvisiontesting.com/

Color Normal Color Deficient Dichromatic

Color Blindness

Color Theory 101

• The 3 Elements of a Color

– Value

– Saturation

– Hue

Color Theory 101

• Value

Elements of a Color

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

• Saturation

Elements of a Color

Color Theory 101

Saturation

• Saturation refers to how vivid and intense a color is

Color Theory 101

Saturation

Color Theory 101

• Hue

Elements of a Color

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

Secondary ColorsPrimary Colors

Color Theory 101

Warm / Cool ColorsTertiary Colors

COOL

WARM

Painter’s Color Wheel

Color Theory 101

• Color Relationships

Analogous

Complimentary

Color Theory 101

Color Relationships

Triadic

Split Complimentary

Color Theory 101

Color Relationships

Square

Rectangular

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– dgrcic@gmail.com

• Mary Grcic– mag68@roadrunner.com

Color Theory 101

• 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

Reference Sites

Color Theory 101

• 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

Reference Sites

Color Theory 101

• 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/

Reference Sites

Color Theory 101

• 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

Reference Sites

Color Theory 101

• 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/

Reference Sites

Color Theory 101

• The Principles of Beautiful Web Design by Jason Beard– ISBN-10: 0975841963

• Color: A Course in Mastering the Art of Mixing Colorsby Betty Edwards– ISBN-10: 1585422193

• Color Index: Over 1100 Color Combinations, CMYK and RGB Formulas, for Print and Web Mediaby Jim Krause– ISBN-10: 1581802366

Books