Color theory In UI
- 1. Use Of Colors In UI Designing
- 2. 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:
- 3. 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.
- 4. 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.
- 5. 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.
- 6. Red • Promotes: power, importance, youth • most stimulating color, red is so energizing it has been used to incThe rease blood circulation. Representing passion and power, red is the color that will attract the most attention, which is why it is commonly used for warnings and important notices. • Red is very appropriate for the No Way NSA website, whose purpose is calling alarm to a perceived threat from the NSA. Using red in the first section of the single-page site is especially clever because it calls attention to the primary message while physiologically inducing people to “get out of the danger zone” by scrolling downwards. This, of course, only makes the user engage with more content. • However, this could work against you, as red can incite anger, or at least overstimulation. If you’re going for a more relaxed atmosphere, use it sparingly (or at least in a lighter shade) or not at all.
- 7. Blue • Promotes: calm, safety, openness (lighter shades), reliability (darker shades) • Like yellow, blue’s meaning varies greatly depending on the shade. All blues are universally relaxing and safe, but the lighter shades will seem more friendly while the darker ones seem more somber. Social media sites like Twitter and Facebook take advantage of light and medium shades, while corporate websites prefer dark shades’ tones of strength and reliability.
- 8. Purple • Promotes: luxury, romance (lighter shades), mystery (darker shades) • Purples suggests lavishness and wealth in general, making it a popular choice for fashion and luxury goods (and even chocolate, like the Cadbury ). Lighter shades like lavender (with pink hues) are considered romantic, while darker shades seem more luxurious and mysterious.
- 9. Orange • Promotes: friendliness, energy, uniqueness • As the most muted of the warm colors, orange is uniquely versatile. As a primary color it can be engaging and energizing, and as a secondary color it also retains these properties in an unobtrusive way. Orange also helps to create a sensation of movement and energy. • Aside from it being part of the brand style, orange works well with Fanta’s lighthearted and cartoonish site. The color shows creativity while retaining familiarity.
- 10. Yellow • Promotes: happiness, enthusiasm, antiquity (darker shades) • ellow is one of the more versatile colors, depending on the shade. • A bright yellow is the most energetic of the colors, without the severity of red. Middle shades of yellow give a sense of comfort while still feeling invigorating. Darker shades (including gold) can give the impression of antiquity, and lend an air of timelessness, wisdom, and curiosity.
- 11. Green • Promotes: growth, stability, financial themes, environmental themes • Green bridges the gap between warm and cool colors, though tends to be more of a cool color. This means green has the same relaxing effects of blue, but still retains some of the energizing qualities of yellow. As such, it creates a very balanced and stable atmosphere.
- 12. Purple • Promotes: luxury, romance (lighter shades), mystery (darker shades) • Historically associated with royalty, purple retains the tone of luxury, even to the point of decadence. • Purples suggests lavishness and wealth in general, making it a popular choice for fashion and luxury goods (and even chocolate, like the Cadbury). Lighter shades like lavender (with pink hues) are considered romantic, while darker shades seem more luxurious and mysterious.
- 13. Black • Promotes: power, edginess, sophistication • The strongest of the neutral colors, black exists on almost every website. • It can take on varying characteristics depending on its supporting colors, or dominate all of them if used in excess. Its strength amidst neutrality makes it the color of choice for long blocks of text, but as a primary color can give the impression of edginess, sophistication, or even evil.
- 14. Color Scheme • Every site has a color scheme, the primary colors it uses for its main areas. As we’ve been discussing, the repeated use of these colors will affect the user’s mind and mood, typically subconsciously, so choose them well. • While there are lots of different ways to mix colors togethers, we’re going to focus on the 3 most successful, and common, ones:
- 15. 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.
- 16. Triadic
- 17. 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. • Look at how stunning the page for Florida Flourish looks just based on its colors alone. The red and green contrast together with the text tags and plants, plus the blue and orange with the sky atop the desert. At the same time, the red/orange and blue/green complements really bring the whole view together nicely.
- 19. 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. • By using blues, turquoise, and greens for their analogous site, Blinksale creates a subdued and even safe atmosphere for its site. Notice how they use the contrasting yellow to draw attention to their call-to-action. •
- 20. Analogous