Put simply, Color Theory is the interaction of colors in a design through complementation, contrast and vibrancy.

The first part of the answer is easy to understand. But if you don’t have a degree in design it may be hard for you to understand or put to use the last 3 terms which define basic color theory. (complementation, contrast and vibrancy)

Complementation refers to the way we see colors in terms of their relationships with other colors. When colors occupy opposite ends of the color spectrum, they lead people to consider a design visually appealing by establishing a happy medium the eye can reside in. Rather than straining to accommodate for a particular area of the color spectrum, the eye is provided a balance. There are two common uses of complementation: the Triadic and Compound color scheme that we will be discussing later. Complementation can take you to new heights of design sophistication when you can begin to master the intricacies of color combinations.

Contrast reduces eyestrain and focuses user attention by clearly dividing elements on a page. The most apparent example of contrast is an effective selection of background and text color, as shown below:

Color Theory for Web Designers
Color Theory for Web Designers
Color Theory for Web Designers
Color Theory for Web Designers

If you’re ever in doubt, the best practice is usually to choose a very light color for the background, and a very dark color for the text itself. This is one area where color theory is crucial to the usability of a web design; In most projects, large text areas aren’t a place to try to be really creative – so keep it simple and legible.

Along with establishing readable text, contrast can also draw the viewer’s attention towards specific elements of a page. Think about highlighting a textbook: when you want to draw your attention to a specific portion of the page, you make the surrounding area look different than the rest of the text. The same principle applies to Web Design: Using a variety of contrasting colors can help focus the viewer’s attention on specific page elements.

If your website has a dark background, focus on the main content with a lighter color.

Color Theory for Web Designers
Color Theory for Web Designers

This principle also applies to Analogous colors (which we will discuss later):

Color Theory for Web Designers

Not to sound silly, but vibrancy dictates the emotion of your design. Brighter colors lead the user to feel more energetic as a result of your design, which is particularly effective when you are trying to advertise a product or invoke an emotional response. Darker shades relax the user, allowing their mind to focus on other things. A great example of this is a comparison between CNN and Ars Technica:

Color Theory for Web Designers
CNN’s website features a stark red banner across the top, which leads to heightened emotions from users as they are stimulated by the vibrancy of the design (and the contrast between red, white, and black- the primary color scheme of the website).102.

Color Theory for Web Designers
Ars Technica utilizes a darker color scheme for its background and header to relax the user and focus their attention towards their content. By doing so, their technical and detailed writing is considered the forefront of the site. And more importantly, the user is allowed to transfer the mental energy traditionally reserved for responding to vibrant colors to understanding the article’s contents.

Article Provided By: tuts+

Mojoe.net, mobile app, Web Design, Web Development and IT SupportIf you would like to discuss Your Logo with Mojoe.net or your website’s analytics, custom logo designs, social media, website, web application, need custom programming, or IT consultant, please do not hesitate to call us at 864-859-9848 or you can email us at dwerne@mojoe.net.