Color Wheel and Color Theory

Using Color Harmoniously on Your Web Site

Colour System Sampler
Dominik Pabis/E+/Getty Images

When many people first start building their Web pages, they create pages in colors that they like. If you're lucky or have a good eye, you'll end up with colors that look nice together. But it's very easy to set up a color scheme that clashes and is difficult for your readers to view for long periods or at all.

Learning about color theory will help you to understand how color works on Web pages. It will also allow you to take advantage of color psychology and the way that colors affect human behavior.

One of the first places to start learning color theory is with the color wheel.

Sir Isaac Newton first put together a circular diagram of colors in 1666. This color wheel allows you to see groupings of colors that are harmonious together and other colors that might clash.

Primary Colors

The primary colors (represented in the related image) are RED, YELLOW, and BLUE. These colors, in traditional color theory, cannot be formed by mixing any other color. All other colors are derived by combinations of these colors. They are represented in HTML as:

  • Red: #ff0000 or #f00 in CSS
  • Yellow: #ffff00 or #ff0 in CSS
  • Blue: #0000ff or #00f in CSS

Secondary Colors

Secondary colors (represented in the related image) are ORANGE, GREEN, and PURPLE. These colors are the combination of red and yellow (orange), yellow and blue (green), and blue and red (purple). They are represented in HTML as:

  • Orange: #ff9900 or #f90 in CSS
  • Green: #00ff00 or #0f0 in CSS
  • Purple: #ff00ff or #f0f in CSS

Tertiary Colors

Tertiary colors (represented in the related image) are YELLOW-ORANGE, RED-ORANGE, RED-PURPLE, BLUE-PURPLE, BLUE-GREEN, and YELLOW-GREEN. These are the combinations of the secondary colors. They are represented in HTML as:

  • Yellow-Orange: #ffcc00 or #fc0 in CSS
  • Red-Orange: #ff6600 or #f60 in CSS
  • Red-Purple: #cc00cc or #c0c in CSS
  • Blue-Purple: #9900ff or #90f in CSS
  • Blue-Green: #00cccc or #0cc in CSS
  • Yellow-Green: #ccff00 or #cf0 in CSS

To put it all together, move on to the Color Harmony article.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Color Wheel and Color Theory." ThoughtCo, Sep. 26, 2017, thoughtco.com/color-wheel-and-theory-3464186. Kyrnin, Jennifer. (2017, September 26). Color Wheel and Color Theory. Retrieved from https://www.thoughtco.com/color-wheel-and-theory-3464186 Kyrnin, Jennifer. "Color Wheel and Color Theory." ThoughtCo. https://www.thoughtco.com/color-wheel-and-theory-3464186 (accessed December 14, 2017).