CSS Home

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.


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.


Color Psychology

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

Next: Web Colors
CSS Home