Color Theory

Something as simple as changing color can evoke a completely different feeling on a website. Using CSS, you can change the background colors of your site, components, sections within your site as well as the color of fonts. Although color use is somewhat subjective, Color Theory can help us create a common language/conventions about color.

Overview

Color Wheel

Color wheels provide us with a way to show the relationships between primary colors, secondary colors, tertiary colors. This system is the basis of color pairing methods and color scheme creation. The wheel forms a circle of colors that clockwise from top, go red, red-orange, orange, orange-yellow,yellow, yellow-green, green, blue-green, blue, blue-purple, purple, and purple-red. Red, yellow and blue are primary colors - meaning that when mixing these colors (eg paints, and inks), all other colors can be obtained by mixing them. Orange, green, and purple are secondary colors - meaning that they are made of a mix of primary colors. Red-orange, orange-yellow, yellow-green, blue-green, blue-purple, and purple-red are tertiary colors - meaning they are formed by blending primary and secondary colors. On the color wheel, cool colors are on the bottom left: yellow-green, green, blue-green, blue, blue-purple, purple. Colors that are considered warm on the wheel are at the top right: Red, red-orange, orange, orange-yellow, yellow.

Relationships

• Complementary: Complementary colors are any two colors which are directly opposite each other, such as red and green and red-purple and yellow-green.
• Analagous: Analogous colors are any three colors which are side by side on a 12-part color wheel, such as yellow-green, yellow, and yellow-orange. Usually one of the three colors predominates.

Color Psychology

• Warm Colors
• Red: Power, Excitement, Passion, Love, Anger, Speed
• Orange: Warmth, Excitement/Energy, Happiness, Vitality
• Yellow: Happiness, Hope, Deceit
• Cool Colors
• Green: Abundance, Nature, Health, Envy
• Blue: Corporate, Calm, Responsible, Sadness
• Purple: Creativity, Royalty, Sophistication
• Neutral Colors
• Black: Sophistication, Mystery, Power, Elegance, and Formality
• Gray: Moody, Conservative, Formality
• White: Cleanliness, Sincerity, and in design, white is generally considered a neutral backdrop that lets other colors in a design have a larger voice.
• Brown: Nature, Wholesomeness, Ruggedness
• Tan or Beige: Conservative, Piety, Dull
• Cream or Ivory: Calm, Elegant