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.
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.
- 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 can be an important factor in communicating tone and brand recognition, and on the web, color psychology has become important to digital design and marketing. The following color associations are derived from a mix of applied psychology, marketing, and design publications.
Further Reading and Examples of Color Psychology on the Web
- 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
Next: Web Colors