In my previous article, “The Meaning of Colors” we discussed the exciting world of colors, we understood that using a wide range of shades, tones, and tints of the same hues, can evoke different feelings, that is why it is vital to always use the appropriate colors, schemes in our designs.

Creating the best color scheme is not easy. Luckily there are specific rules that can help us. Let’s get to know those different color harmonies, that are based on the 12-color wheel.

Monochromatic

These are the easiest color schemes, fairly simple to use. They are from the same hue, just its different shades, tints, and tones. For better understanding visit my article about “Understanding color terminology”. You should use this harmony when you would like to present one subject or an easy topic. Changing the saturation or the value can bring attention to the details. Just with a minimal manipulation, you can create a huge variety of harmonic schemes.

Analogous

You can meet analogous color schemes all around you, it is a fairly common scheme in nature and pleasant to the eye. These are created by using three colors next to each other on the color wheel. They usually have the same chroma level, but by using different tones, shades, and tints we have an exciting variety of colors on the palette that nicely work together and create serene and comfortable designs. Just make sure you have enough contrast among them so they will be more suitable for a website. It is best if you have one dominant color, a second to support it, and the third as an accent.

Complementary 

Complementary colors take place on the opposite side of the color wheel. They mutually reinforce their impact, especially using the hues creates a vibrant, even jarring look. You need to be careful using this harmony; however, it is suitable for highlights and bringing attention to something. Complementary schemes consist of only two colors, however using a wide range of their tones, shades, and tints it can be easily expanded and gives a more pleasing experience to the eye. You should not use the two colors equally, you should choose the weaker color and use it predominantly, and the second as an accent.

Split Complementary

This color harmony is a great choice, it has a strong visual contrast, however, not that deep, then the complementary ones, so it has less tension for the eye. It consists of three colors. The original hue and instead of the opposite one on the color wheel, it uses the two adjacent colors. On the palette it is recommended to use different chromas to give a nice contrast to the website. Using split complementary colors give your design a lively, joyous feeling.

Triadic

It uses the hues located exactly the same distance from one another on the 12-color wheel. Especially by using the hues or colors with high saturation levels, can give a fake, vibrant, playful atmosphere for your design. You can find this harmony in cartoons and surreal scenes. It is the most successful if you use one color with a very bright hue to stand out, and the others in a muted way as accents.

Tetradic (Double Complementary)

This is a rather difficult color scheme. It uses four colors, two pairs of complementary colors. You need to be careful, do not use all for colors equally. It can kill your design. Use one color as a dominant (preferably the weakest one), the others just as accents. It also works nicely if you use the same values and chromas of the four colors. You can either create lighter or darker schemes depending on your topic.

Square

This harmony is really similar to the previous one; however, in this case, all four colors are located evenly on the wheel. It works exactly like the tetradic scheme, be careful to use just one color as a dominant. You also need to pay attention to balance among the warm and cool colors.

Custom

You do not always have to follow the rules above. Even if it can be intimidating at first, you can create custom color schemes, as well. Just utilize chroma, value, and saturation to create fabulous color palettes on your own. E.g., you can use colors with the same saturation and chroma levels to create a nice harmony and a sense of cohesion in your palette.  

Reference:

• Smashing Magazine – Psychology of Web Design 2012, Color Theory for Designers
• Online Webdesign Tanfolyam – A színelmélet alapjai
• Video: Blender Guru – Understanding color
• tigercolor.com/color-lab/color-theory/color-harmonies.htm
• sessions.edu/color-calculator/