Basic Color Theory for web UI/UX

by - May 19, 2021

Across human history, master painters and other artists have earned global recognition for their ability to manipulate colors. In the modern era, the art-form now opens up a lot of new commercial and business applications, first in advertising, and now in web design. With an almost bottomless depth, the skill of color usage can be improved and refined endlessly. 


Color Theory
 The topic of color could fill a whole book on its own, so we’ll stick to what’s relevant to UI design here. We can break down color theory into three parts with regards to web UI design: 

• Contrast — Every shade of color has a set opposite — an “arch-nemesis” whose contrast is far greater than any other color. You can use the color wheel below to find each specific color’s opposite. Simply locate the color on the opposite end of the circle. 

• Complementation — Colors aren’t always at odds with each other: complementary colors accent each other and bring out their best, the opposite of contrast. These are the colors opposite each other on the color wheel, for example, purple’s complement is green. 

• Vibrancy — Each color evokes specific moods: the brighter warm colors (red,orange, yellow) tend to energize a user and make them more alert, while darker cool shades (green, blue, purple) tend to be more relaxing and tranquil. CNN uses a red banner in their top navigation to heighten alertness, a color decision that suits the site’s breaking news content. 

Vibrancy: Emotional Implications of Color 

There’s no denying the link between emotions and colors: in fact, the human race has been documenting the psychological impact of color since the Middle Ages. Naturally,any web designer wants to harness this as well, since the right colors create the right moods and atmosphere for your site. We’ve analyzed the advice of the researchers at Vandelay Design and Smashing Magazine, and filtered it through our own experience at UX. 
Please note that different cultures around the world perceive colors differently. We describe emotional associations that are most relevant to Western cultures. 


Triadic 

The triadic is the most basic and balanced of the three structures.Using vibrancy and complementation, but straying from the trickier contrast,the triadic structure is the safest and most reliable scheme. On the 12-step color wheel, select any three colors located 120 degrees from each other: one color for the background, and two for content and navigation.
     


Triadic color wheel



Compound (Split Complementary)

The next scheme gets a little trickier to pull off, but can be rewarding if done well. The concept uses four colors: two contrasting pairs and two complementary pairs.


Compound color wheel


Analogous

Lastly there is the analogous scheme, which focuses exclusively on complementary colors. This one really highlights the vibrancy of the colors chosen, for example, a red-orange-yellow analogous scheme will seem very energetic and lively. While this scheme is relatively easy to pull off, the trick is in deciding which vibrancy of color to use, as it will be exaggerated.

Analogous color wheel


Share
Tweet
Pin
Share
Tags :

You May Also Like

0 Comments