Colors subconsciously influence our thinking and rationality. We’re faced with color choices all the time, starting with deciding what color to wear in the morning, and often, we choose what to wear based on the emotions and intentions that color conveys. More important than your wardrobe choice is the color choice of your brand or website.

 

Color research and planning is an important part of the design process, and before starting the design, it is essential to choose the appropriate color to effectively execute the brand, value delivery and overall tone.

 

So how do we use color to create the right emotion in web design?

 

The ability of master painters and other artists to manipulate color has been recognized throughout the history of mankind. Today, the art form of color is widely used in business, first in advertising and now in web design. The colors are unfathomable, and the skills with which they are used are constantly improving.

 

We will explore the fundamentals of color theory and color schemes and then examine the emotional effects of certain colors.

 

Color theory

 

There are a lot of topics related to color, so we’ll only cover those related to UI design. We can divide color theory into three parts of Web UI design:

 

Contrast – the shadows of each color have an opposite – contrast is far greater than that of any other color corresponding to it. You can use the color wheel below to find the opposite of each particular color. Just find the color at the other end of the circle.

Complementary – colors do not always contradict each other, complementary colors emphasize each other, as opposed to contrasting colors, they bring out the best in each other. These are the colors relative to each other on the color wheel, for example, the complement of purple is green.

 

Energy – Each color evokes a specific mood: warm colors (red, orange, yellow) tend to motivate users and make them more alert, while darker colors (green, blue, purple) tend to be more relaxed and serene. CNN uses a red banner at the top of the navigation on its website to increase alertness, and the color is determined to fit the breaking news content on the site.

 

Color theory in web design is more than just a visual ornament, it can have a game-changing impact on your business.

 

Vitality: The emotional meaning of color

The connection between emotion and color cannot be denied: in fact, humans have documented the psychological effects of color since the Middle Ages. Naturally, any web designer wants to take advantage of this, because the right color can create the right mood and atmosphere for your site.

 

red

Transmission: power, importance, youth

 

As the most exciting color, red is so effective in increasing blood circulation, it represents passion and power, and it is the color that attracts the most attention, so it is often used for warnings and important announcements.

 

Red is appropriate for the No Way NSA website, which aims to awaken awareness of the threat from the NSA. The use of red in the first part of a one-page site is particularly clever because it alerts people to the main message by scrolling down, while biologically inducing them to “step out of the danger zone.” Of course, this only allows users to engage with more content.

 

However, this can work against you, as red can incite anger, or at least over-stimulation. If you want a more relaxed atmosphere, please use it (or at least in lighter shadows) or not.

 

orange

Delivery: friendliness, energy, uniqueness

As the warmest warm color, orange is unique. As a primary color, it can attract and inspire, and as a secondary color, it also retains these properties in an unobtrusive way. Orange also helps create a sense of movement and energy.

 

In addition to being part of the brand’s style, orange is a good match for fender’s bright and cartoonish web site. Color shows creativity while maintaining familiarity.

 

yellow

Deliver: Happiness, passion, retro (dark color)

Yellow is one of the more versatile colors, depending on the hue.

 

Bright yellow is the most vibrant color and does not have the severity of red. The mid-tone of yellow gives a feeling of comfort while still feeling uplifting. Dark tones (including gold) can give a retro impression and provide an atmosphere of timelessness, intelligence and curiosity.

 

In the example above of Flash Media, a web design firm, the deep color of yellow radiates energy, curiosity and authority. That makes a lot of sense for a company, and their consulting and skills are valuable.

 

green

Delivery: growth, stability, financial theme, environmental theme

Green softens the gap between warm and cool colors, though often cooler colors. This means that green has the same relaxing effect as blue, but still retains some of the motivating qualities of yellow. Therefore, it creates a very balanced and stable atmosphere. Dark shadows give off more of a sense of money/affluence, and you can see green on Ameritrade.

 

blue

Delivery: Calm, security, openness (lighter tones), reliability (darker tones)

Like yellow, the meaning of blue varies greatly depending on the hue. All blues are generally relaxed and secure, but lighter shadows seem friendlier, while darker ones seem duller. Social media sites, such as Twitter and Facebook, use lighter or medium hues, while corporate sites prefer heavier, more reliable hues.

 

Event design agency Van Vliet&Trap’s clever use of dark blue, by using blue in the flowers in the background, they visually hint at their expertise in floral design, while also radiating trust and reliability. This makes sense because they plan high-visibility (and somewhat nerve-wracking) events such as weddings.

 

purple

Delivery: Luxury, romance (light tones), mystery (dark tones)

Historically associated with royalty, purple retains a luxurious tone, even to the point of decadence.

 

Purple denotes general luxury and wealth, making it a popular choice for fashion and luxury goods (even chocolate, as in the Cadbury example above). Lighter hues such as lavender (pink hues) are considered romantic, while darker hues seem more luxurious and mysterious.

 

black

Delivery: power, softness, complexity

As the strongest neutral color, black is present on almost every website.

 

It can have different features depending on the color it supports, or take over all of them if used in excess. Its neutral power makes it the color of choice for long blocks of text, but as a basic color can give the impression of silky, complex, and even sinister.

 

For most sites, black creates instant complexity and a sense of permanence. The sense of elegance is particularly strong when used in conjunction with white typeface, and a minimalist layout is set up, which you can see in Bose’s “Dream and Reach” microsite.

 

white

Deliver: cleanliness, virtue, simplicity

White is associated with virtue in Western culture and is the color most associated with purity and innocence.

 

Minimalist and simple websites use it most often as a background. White is the least attention-grabbing color compared to other colors, so it accentuates the other colors on the page the most.

 

This works especially well for artist Kaloian Toshev’s AWWAwards winning site. The white background draws attention to his vibrant artwork while creating an aura of art gallery elegance.

 

gray

Delivery: neutral, form, melancholy

While it may look brooding or sad in some situations, gray is a popular choice in traditional or professional Settings. One of the greatest strengths of grey, however, is its variation in tone — its skillful use, its jumping between black and white, its changing shadows, and its customised aesthetic.

 

When paired with brighter colors and presented in a flat user interface, the Awwwards with a gray background feel more contemporary than its dull style.

 

beige

Transfer: Surrounding color features

Beige is a wildcard for colors because its main use is to highlight other colors.

 

Beige is dull, although it can be used to symbolize humility. However, it usually bears the character of setting off the colors around it, making it an interesting design tool. For these reasons, beige is almost always a secondary or background color.

 

Dark beige tones (as on Dishoom) will create an earthy and almost paper-like texture, while lighter tones feel fresher. In this case, the lighter shadows surrounding the brand name, darkened outwards, help to create a sense of fresh ingredients for the restaurant drawn from the essence of the earth.

 

ivory

Delivery: comfortable, elegant, simple

In terms of emotional response, ivory (and cream) is a slight variation of white.

 

Ivory is warmer than white and offers the same sense of simplicity and complementarity while providing a comfortable feel. Ivory should be used instead of white to soften the contrast between it and darker colors. For the Art in My Coffee website, orange/brown was added to the cream background (which looks a bit grey) to create a warm feeling.

 

The color scheme

Each site has a color scheme that uses the main colors in its main areas. As we’ve been discussing, the reuse of these colors will affect the user’s state of mind and mood, often subconsciously, so it’s good to choose them.

 

While there are many different ways to mix colors together, we’ll focus on three of the most successful and common ones:

 

Triples – Triples are the most basic and balanced of the three structures. Using dynamism and complementarity, but deviating from the tricky contrast, the ternary structure is the safest and most reliable scheme. On the 12-step color wheel, select any three colors that are 120 degrees apart: one color for the background and two colors for content and navigation.

Compound (split complementary) – This color scheme is slightly complex, but can work well if used well. The concept uses four colors: two contrast pairs and two complementary pairs.

The color scheme for the Florida Flourish shown below is a good example. Red and green contrast with text labels and plants, plus desert above the blue and orange sky. Meanwhile, red/orange and blue/green additions harmonize the view.

 

Similar – There is a similar scheme at the end, focusing on complementary colors. Really highlights the vibrancy of the chosen color, for example, a similar scheme of red orange yellow will look very lively and lively. While this scheme is relatively easy to pull apart, the trick is to decide which color to use for liveliness, as it can be exaggerated.

By using similar sites in blue, turquoise and green, Blinksale creates a soft, even safe atmosphere for the site. Notice how they use contrasting yellows to draw attention to their appeal.

What we’ve just discussed is how color theory can add to the foundation of your UI design, but there’s no limit to how you can explore the use of color on your site more deeply.

 

Commonly used color matching assistance tools

There are many tools available to help you put color theory into practice. No need to start from scratch by looking at the prefabricated palette.

  • Adobe Color CC — formerly known as Kuler, this is one of the most trusted Color matching tools available.
  • Paletton – If you need a quick start, easy to use tool, Paletton is great for getting started.
  • Flat UI Color Picker — This is a very useful and convenient Color Picker for Flat UI design.

 

No one wants you to be Michelangelo, but a basic understanding of the use of color is a solid prerequisite for web design.

 

As we’ve just explained, color brings a lot of extra effects that are sometimes easy to overlook. Whatever colors you choose, they have a definite impact on the design as a whole — from communicating contrast or similarity, to evoking precise emotions.

 

This article is compiled by Zoran @ Shouting Technology:

Thenextweb.com/dd/2015/04/…