• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Tips and Tricks HQ

  • Home
  • Blog
  • Projects
    • All Projects
    • Simple WP Shopping Cart
    • WP Express Checkout Plugin
    • WP Download Monitor
    • WP Security and Firewall Plugin
    • WP eStore Plugin
    • WP Affiliate Platform
    • WP eMember
    • WP Lightbox Ultimate
    • WP Photo Seller
  • Products
    • All Products
    • Checkout
  • Support
    • Support Portal
    • Customer Only Forum
    • WP eStore Documentation
    • WP Affiliate Software Documentation
    • WP eMember Documentation
  • Contact

Color Theory Tips – Give Your Site Design a Facelift

You are here: Home / Make Money / Online Marketing / Color Theory Tips – Give Your Site Design a Facelift

Last updated: August 1, 2012 by Korin Iverson





This is a follow-up from the Color Psychology and How it Affects Your Site article. Using color on your site is a great way to show individuality and creativity, however too much color can have a negative or unwanted effect.

In this article I will cover color theory, harmony and basic rules on how to use color.  It is important to understand how different colors work together to create harmonies so you can choose a good color theme for your site.

What is Color Theory and Harmony?

Color Theory: is developing aesthetically pleasing color relationships.

Color Harmony: is a successful color relationship that can be applied to an infinite number of color combinations.



Basic Color Theory

The following section will give a quick overview of basic color theory.

Primary Colors

The primary colors are:

  • Red
  • Blue
  • Yellow

Secondary Colors 

Secondary colors are created when two primary colors are mixed together (creating a new color).

The secondary colors are:

  • Purple/Violet (Red + Blue)
  • Orange (Red + Yellow)
  • Green (Blue + Yellow)

Tertiary Colors

Tertiary colors are created when one of the following happens:

  1. One primary and one secondary color are mixed together.
  2. Two secondary color are mixed together

The tertiary colors are:

  • Red-Orange
  • Yellow-Orange
  • Yellow-Green
  • Blue-Green
  • Blue-Violet/Purple
  • Red-Violet/Purple

Color Harmonies

Color harmonies consist of similar hues or contrasting ones that are soothing to the eye.

Color harmonies are usually subjective to personal preference; however there are some guiding principles that help make effective decisions about color usage.

A color by itself can elicit an emotional and physical response. The nature of this response can be altered by placing it in context with one or more colors. Perception of a color shifts dynamically when aligned with other colors.

You can vary color combinations to product color relationships (harmonies) that are allied or contrasting and therefore can affect the viewer’s impression.

Color Harmonies 

  • Complementary
  • Split Complementary
  • Double Complementary
  • Analogous
  • Triadic
  • Monochromatic

Complementary: These are color pairs that are directly opposite to each other. These harmonies represent the most contrasting relationships. Using complementary colors cause a visual vibration and will engage the eye.

Example of complementary color schemes for your website:

Split Complementary: A split complementary is three colors (one color accompanied by 2 other) that are equally spaced from the first color’s complement. This harmony tones down the harsh contrast of a complementary harmony, providing a more sophisticated relationship.

Example of  split complementary color schemes for your website:

Double Complementary: The combination of two pairs of complementary. When using a double complementary harmony, avoid using equal amounts of all four colors (use one color as the main color and accent with the other 3 colors). This will make the scheme less jarring.

Example of  double complementary color schemes for your website:

Analogous: These are combinations (two or more colors) that are equally spaced from each other on the color wheel. These colors in a analogous harmony have similar light wave lengths (so they are easier on the eye).

Example of  analogous color schemes for your website:

 

Triadic: Triadic harmonies are combinations of any three colors that are spaced evenly around the color wheel. This is one of the most commonly used color harmonies. Triadic harmonies work best when using secondary and tertiary colors, primary colors can result in gaudy relationships. A triad with two colors that share a common primary (example: Green and purple share blue.) can produce a more pleasing result.

Example of  triadic color schemes for your website:

 

Monochromatic: These color schemes are made up of  shades and tints of one color (Example: Green). Monochromatic schemes use one hue and a variety of saturations and lightness to form a relationship of similar colors. Monochromatic color schemes work well for website design.

Example of  monochromatic color schemes for your website:

Color Tools (Resources)

Here are some great color tools and resources to help you color scheme.

Color Wheel: Anyone working with color should have a good color wheel. There are many different versions of the color wheel (including both digital and physical). I believe the most useful one is the twelve – step color wheel. (Add color wheel graphic download).

Websites: There are many color websites however I personally use and recommend the following (these are also great for color inspiration).

  • Colourlovers
  • Kuler (Adobe)
  • Color Scheme Designer

Desktop Applications: There are many desktop application for color management and scheming. I personally like to use software from Pantone (industry leader in color management).

  • Colormunki
  • Pantone Color Manager Software

Now that you understand a little more about how colors work together, you can play around with the color combination of your site’s theme and make it even more appealing.

Related Posts

  • Color Psychology and How it Affects Your Site

Online Marketing,  Web Design color theory,  color tips,  effects of color

Reader Interactions

Comments (6 responses)

  1. Steve says:
    October 26, 2012 at 7:24 pm

    Super tips on Wed Design, I have found through my own trials that colors due matter. Black on white will really be a down fall for any site design. Seen readers drift away very quickly. Colors due matter, your ad placements should also try to match your site design. Thanks for the great read and tips.

  2. Jamie says:
    September 29, 2012 at 2:04 pm

    Whenever we design a WordPress theme we should always try to use the base colors well. Playing with shades sometimes produce unwanted results. I think this article highlights the importance of color concepts that every designer should have.

  3. George says:
    September 18, 2012 at 7:46 am

    Color palletes are a great way to choose color and mainly should be based on the logo , some websites like colorcombos provides good color combos and matches

  4. Ivy says:
    August 3, 2012 at 7:01 pm

    @Peter, This is a great way to keep color themes simple yet still enjoyable. A couple of colors that work well together with shade variations or neutrals (white, black, gray) added in to fill the gaps is a great way to go.

  5. Peter Fisher says:
    August 3, 2012 at 6:53 pm

    Colour theory is quite a difficult and subjective area. I don’t claim to be a UI/X developer but I try and stick to one to three base colours and throw in some shades

Leave a Reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Featured & Popular Articles

Video Answers to Top WordPress QuestionsWordPress Optimization Tips and Tricks for Better Performance and SpeedEssential WordPress Security Tips - Is Your Blog Protected?WordPress Simple PayPal Shopping Cart PluginTop 15 Search Engine Optimization (SEO) Techniques I Forget to DoList of the Best and Must Use WordPress PluginsHow do I Start a Blog and Make Money Online?Good Domain Name Picking Tips for Your Blog SetupFind Out Which WordPress Web Hosting Company Offers the Cheapest and Reliable Web Hosting Solution

Featured WordPress Plugins

wordpress estore plugin
wordpress membership plugin
WP Express Checkout Plugin
WordPress Lightbox Ultimate Plugin
WordPress photo seller plugin
wordpress affiliate plugin

Recent Posts

  • Accept Donations via PayPal from Your WordPress Site Easil [...]
  • Buy Now Button Graphics for eCommerce Websites [...]
  • Subscription Button Graphics for eCommerce Websites [...]
  • Adding PayPal Payment Buttons to Your WordPress Sidebar Ea [...]
  • PayPal QR Codes [...]

Comment & Socialize

  • @Rodrigo Souza, Thank you f ...
    - admin
  • The example for 'slm_add_ed ...
    - Rodrigo Souza
  • @Ron, All the valid transac ...
    - admin
  • Hello, when people have sel ...
    - Ron
  • We have hte following featu ...
    - admin

Check out our solutions

View our WordPress plugin collection and start using them on your site.

Our WordPress Solutions

Footer

Company

  • About
  • Privacy Policy
  • Terms and Conditions
  • Affiliate Login

Top WordPress Plugins

  • Simple Shopping Cart
  • PayPal Donations
  • WP Express Checkout
  • WP eStore
  • WP eMember

Blogging Tips

  • How to Start a Blog
  • Selecting a Good Domain
  • Cheap WP Hosting
  • WP Video Tutorials
  • Simple SEO Tips

Search


Keep In Touch

Copyright © 2023 | Tips and Tricks HQ