1. Home
  2. Computing & Technology
  3. Web Design / HTML

Finding Color Triads

Using Hex Codes to Find Harmonious Color Combinations

By Jennifer Kyrnin, About.com

If you've read my article on color harmony you will know that color triads are color groups that work well together and bring a lot of life to a design. Using hexadecimal color codes, it's easy to create color triads from any color set you might have.

A very basic color triad might be orange, purple, and sea-gren. These are written #fc0, #c0f, and #0fc in CSS color shorthand. In this color triad the three characters are f, c, and 0. By changing the combination of the triplets, you can create different colors that are harmonious with one another. Here's how to do it.

  1. Pick your primary color.
    For the above color scheme, I used orange: #fc0.
  2. Rotate the characters so that the three characters are in completely different positions.
    I put f last, c first, and 0 in the middle. This gave me a light purple color: #c0f
  3. Rotate the characters one final time so that they are all in different positions.
    There is only one combination left where the characters have not been in those positions, a sea-green: #0fc

You can do this with non-browser-safe colors as well, just treat each double character as you did the single characters. For example, in my iris layout I used: blue #859CFE, pink #FE859C, and green #9CFE85. The three double character groups are 85, 9c, and fe.

More Web Design / HTML Quick Tips

Explore Web Design / HTML

More from About.com

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. Web Design
  5. Principles of Web Design
  6. Color
  7. Finding Color Triads - Using Hex Codes to Find Harmonious Color Combinations

©2008 About.com, a part of The New York Times Company.

All rights reserved.