Four Quick Tips For Improving Color Harmony In Your Theme Customizations

Last Updated on September 11, 2022 by 41 Comments

Four Quick Tips For Improving Color Harmony In Your Theme Customizations
Blog / Resources / Four Quick Tips For Improving Color Harmony In Your Theme Customizations

β€œWith great power comes great responsibility.” That’s what Spider Man would tell you if he was teaching you about color theory. When using our themes, the Theme Customizer gives you full control over the colors in your design; but how do you make sure that you don’t ruin a great design by choosing disharmonious color combinations?

1. Step One: Learn Basic Color Terminology

terms

Hue – The hue refers to the position of a color on the color-wheel, each of which represents a certain spectrum of light. It’s what differentiates the primary colors of Red, Yellow and Blue, as well as all combination in-between. When you see the color blue, the term β€œblue” refers the hue. There are many forms of blue (light, dark, vibrant, and pale) each of which share the same hue despite being distinguishable in color.

hue

Value – This refers to the relative lightness and darkness of a color. The value of a color is distinguished by its relationship to a scale of white to black. A light blue and a dark blue is an example of a single hue with two different values.

value

Saturation – This term refers to the relative β€œstrength” and β€œweakness” of a hue. Colors with a higher saturation will appear more vibrant. Saturation should not be confused with lightness and darkness, which as stated above, relates to a color’s Value. For example, you can have a bright color that lacks purity due to the addition of light gray. The result is a light color with low saturation. On the same vein, you can have fully saturated colors that have drastically different Values. Colors are considered de-saturated as they near gray-scale and they hue itself becomes less dominant.

saturation

2. Use Complimentary Colors To Begin A Beautiful Color-Scheme

Starting off with complimentary colors is a great way to begin exploring ideas for your website’s color-scheme. Complimentary colors appear opposite each other on the color wheel. Simply picking two complimentary colors on the wheel and calling it a day, however, will likely result in a lurid, headache-inducing discord that will send your visitor screaming. The real trick to beautiful color combinations isn’t just the hue, but also the relative Value and Saturation of the hue in relation to the colors around it. Let’s go through a simple method I use to create color harmony:

complementary

In the above example, I begin with the complimentary colors Green and Red. Next I create a palette of green/red variations by taking my original two colors and adjusting their value and saturation. Next I add a second dynamic by experimenting with analogous colors (colors next to each other on the color wheel). By performing a slight hue shift of green, we are given an additional array of green-blue and green-yellow.

Finally I picked one color from each variation set using the following principle that I have found to be, for the most part, true: Colors generally look good together when their Values are varied, but their Saturations are similar. The end result is a color scheme based on classic complimentary color harmony with varied value and a similar range of saturation.

3. Using Analogous Color Can Also Result In Simple & Yet Beautiful Combinations

Using colors that are next to each other on the color wheel is also a great way to ensure that your colors don’t clash. These are called analogous colors. I often like using analogous colors in combination with monochromatic colors (grayscale colors). Basing a design solely on analogous colors can often feel a slightly stale.

analogous

Above I have created two different analogous color-schemes. One that uses Green and Yellow, and another that uses Green and Blue. By creating a simple gradation between the two colors, and use varying values as we did in our first example, we are left with a color combination that is simple yet stunning.

4. Avoid The Dreaded Color Discord

discord

A discord is a color combination that clashes. The result is a terrible, unreadable and vibrating mess of muddy color! The most common cause of color clashing is combining colors that are too similar in value. Above is an example of the exact same three hues paired together with differing values & saturations. Even though the hues are the same in both examples, the version on the left is in glaring disharmony while the version on the right feels balanced. The colors on the left vibrate as your eyes struggle to find the defining line between each hue. Avoiding this simple mistake will solve 90% of your color problems πŸ™‚

The Moral Of The Story?

website

The next time you are inside the theme customizer adjusting your website’s colors, don’t just make your text and background orange because that’s the color of your logo. Think about the type of orange you are using and how it will relate to the rest of your design. Better yet, try thinking about creating harmony with your orange logo by pairing it with something different based off the principles above! How about a dark, de-saturated blue?

I hope you found this post useful. Don’t forget to color responsibly πŸ™‚

Divi

Want To Build Better WordPress Websites? Start Here! πŸ‘‡

Take the first step towards a better website.

Get Started
Divi
Premade Layouts

Check Out These Related Posts

WordPress vs Medium (2024) β€” Where Should You Blog?

WordPress vs Medium (2024) β€” Where Should You Blog?

Updated on February 14, 2024 in Resources

If there is one question that goes back to the very beginning of blogging, it’s “what blogging platform should I use?” Everyone asks this question (to Google, most likely), and everyone gets bombarded with a thousand different answers. That’s primarily because there are so...

View Full Post
9 Non-Profit Child Themes for Divi

9 Non-Profit Child Themes for Divi

Updated on January 23, 2023 in Resources

There are lots of nonprofit organizations across the globe. Just about every one of them needs a well-designed website to tell their story and receive donations to help their causes. Divi is an excellent theme for nonprofits such as charities. Fortunately, you don’t have to start from scratch for...

View Full Post

41 Comments

  1. Hi

    some images are can’t see in this page. please fix it and also

    V good article

  2. This is a good articles and it contains similar concepts to what I’d learn at fashion school. This would be good as a infographic.

  3. This page taught me more about colors than 5 lessons in my school. Thank you very much.

  4. Thank Nick, really insightful:)

    One thing that leaves me confused though is point 4 – example of discord. You say that to reach the harmony I should use similar saturation and different value. But in the exemplary circles on the right you d e s a t u r a t e the green (besides tuning the value) and it is saturation that the two mostly differ in. Do I overlook sth?

    • It’s desaturated, but the values are also drastically different. It’s the difference in value that solves the visual vibration problem.

      • Nick I know I may be meticulous but I checked with colour picker – red and green differ in saturation, their value is almost equal;) What you say works for the inner par – green and blue;) I guess it’s due to the fact that when you desaturated the green it became much brighter than the red; tricky stuff but probably the rule is we should avoid the jarring vibrance by tuning both saturation and value until reaching pleasant result

  5. I found great tips about improving the color…

    thanks,

  6. Thanks, this is the simplest explanation of color theory I’ve read. Hope it helps me design better.

  7. This was a very easy to understand color tutorial. Thank you!

  8. Wow, I just love this tutorial!!! Will help me in my future color selections!!!

  9. Perfect guide for customization. Thanks for sharing it.

  10. Thanks for the tips Nick

  11. thank you for sharing this tutorial, great information.

  12. Fantastic article. HSV has been a mystery for me until now. You’ve explained these simple things so clearly. Thanks!

  13. Thanks for the article.

    One thing that has annoyed me in recent years, is when designers make the text a slightly dark gray & the background a light gray in their themes. (http://cl.ly/image/0Z0T0E1L1O34) The contrast is bad and often times I have to make sure the text is high contrast by making it black a dark color.

    In regards to that… Elegant Themes’s shortcodes are similar. The buttons – the background is a particular color and the text for it is a slightly darker color of the rest of the button. Bad contrast & hard to read. I liked the buttons before the latest short code redesign (yes, it was quite awhile ago). I realize the buttons have a gradient to them, but, for instance, the big teal button is #5ce4e6 near the text & the text is #3da7a9 (values are approximate). – http://cl.ly/image/160o1V2m1r1M

    But in my opinion the text would be better to be black or in some cases white making them easier to read, this has been my experience when working with clients. Really, the only “perfect” button, is the black & white button in my opinion.

  14. Does a color have to be “web safe” now or does this not matter any more?

    • Nope, luckily that rule is a relic of the past πŸ™‚ Computers today can render millions of colors.

  15. Thanks for sharing this tutorial, great information.

  16. Excellent guide to color choices. What are your favorite tools for choosing colors, in rgb and hex?

    • Thought I’d chime in and say, I like using ColorSchemer Studio 2. It’s PC & Mac compatible. It’s $50, but if you have a Mac, it often goes on sale in the Mac App Store (I got it for $0.99). Also the same people have an iPhone app that works well too & it’s free – ColorSchemer touch.

  17. Simple colour theory, easy to grasp, effective concepts to apply. You better bookmark this to keep as a reference. Thanks!

  18. Great useful information. Thanks for taking the trouble !

    • Great theory . I used it on my own blog to create perfect graphics . But practice is something different . But have to try.
      Thank you for good manual.

  19. Thanks for the mini course in “colorogrpahy.” It’s filled with valuable facts and insights

  20. Love it!

  21. Fabulous color combination and great article…

  22. Great tips, such an valuable information regarding color combination for designs. Thanks for sharing this helpful tips !!!

  23. Cool!

    • Excellent information!

  24. Thank you for the helpful advice on picking a color scheme. I believe it will come in handy for me.

  25. Amazing article, caring about hue is very important. It is the only way if you wanna to get colors that makes your web a live

  26. Are these tips come from ET new designer Kenny Sing? πŸ˜€

    You all are rockzz! Keep up the good working!!

    • This one is all Nick Roach πŸ™‚

  27. This is great! Thanks for the great info.

  28. What’s the chance of getting this as a downloadable PDF document?

  29. I think I’ve not much problem in choosing the right color scheme, but I’m having problem on how to apply them. For most of the cases, I ended using 1 or 2 color out of 4 or 5 colors from the color scheme.

    ps: It’d great if you can link to some color-scheme generators. I know few good tools, but you readers might want to know them.

  30. Thanks πŸ™‚

  31. Perfect guide for customization. Thanks for sharing it.

  32. thanks so good, this is what l was searching for yesterday πŸ˜‰

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Get Started With Divi