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

Finding Color Triads
Using Hex Codes to Find Harmonious Color Combinations

By , About.com Guide

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.

Explore Web Design / HTML
About.com Special Features

Holiday Central

What to eat, where to go, fun things to do and how to save money on the perfect gifts. More >

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

  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>

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

All rights reserved.