Web Design & Colors: How to Choose the Right Tones

Colors and web design have a lot in common. In fact, color psychology is often the driving factor behind designing the world’s most successful products. A lot of us browse websites and use mobile apps, without ever thinking why a certain site or an app is using a specific color scheme.

As it happens, colors can invoke certain feelings, emotions, and even encourage users to form a certain opinion about your brand, based on color alone.

Using an aesthetically pleasing color palette can invoke feel-good emotions, and reinforce a positive behavior pattern.

Whereas a poorly chosen color scheme can make visitors feel disconnected. If the feeling isn’t there, some users will choose to take their business to another brand. It’s a harsh truth, but a fact nonetheless.

So, there’s really no other way around it other than to work on understanding the importance of color in web design.

What’s the research on color psychology?

Color has had a marketing effect since the beginning of capitalism. But when it comes to web design or any other design venture in the digital realm, it looks like we are only now learning the ins and outs of applying color as a means to cultivate specific feelings and actions.

The best way to test this theory out for yourself is to go and change the colors of any random business page or even a project of your own.

It’s eye-opening to watch how impactful color is in providing a good user experience. Time and time again, studies have shown that even the slightest change in color can have a significant psychological effect. And whether that effect is good or bad comes down to a thorough understanding of the concept.

The effects that color has on the human brain

Research tells us that color has a direct impact on brain-response chemistry. Essentially, colors can affect feelings, emotions, and specific senses. This happens in the real world more often than we pay attention to. Being out on a field of green grass and blue skies have a distinct calming and peaceful effect. The same cannot be said for dark rooms without sunlight.

Color and the emotional response

Research on why color affects emotion isn’t as widely available. Looking at it broadly, we can see how certain colors could have personal associations for each individual. Everyone grows up with their ‘favorite’ color, whether it’s blue or yellow. And often, that color follows us wherever we go or whatever we do.

The important thing to know about emotions is that they affect our decisions. The way we feel about ourselves, our surroundings and the events that happen in our life determine what actions we take, what we buy, what we throw away and much more.

As a result, it’s not unlikely that we would find certain colors more appealing than others. The same goes for negative experiences, and how certain colors can be off-putting. For this reason alone, it makes sense that research is sparse.

Nevertheless, it’s possible to target a large audience subset because color is so universal. Grass is green, and green instills a sense of peace and serenity. So, if you’re working on something environmentally-friendly or otherwise, green is a natural choice. Blue, on the other hand, feels calming and reassuring. It’s a strong color yet without an aggressive precinct.

How does color influence consumer behavior?

As we have learned so far, color affects many things. Among them, user behavior. There are good reasons why certain brands follow a specific color scheme. Could you imagine using Facebook or Twitter if their default color scheme was red rather than blue? What if companies started using yellow instead of black? It would create chaos!

Fortunately, there’s some research on the matter, and numerous companies have taken it upon themselves to experiment with color variations. E.g. HubSpot ran a test to test two different button colors. The test was done over a few days period, and in this period there were roughly 2,000 unique visitors. In conclusion of the study, the red button saw 21% more clicks than the green one.

Needless to say, colors come in multiple variations, tones, and schemes. Understanding how different color variations affect design structure is pivotal, this in-depth post from Instapage is an excellent place to start.

The easiest way to test is through A/B testing

Unless you’re running a black and white minimalist blog, there’s a lot of iteration that you can do. A/B testing is the quickest way to streamline your traffic for multiple design variations. If for example, you’re currently using a more dark design scheme, you could use A/B tests to try out a more soothing, creamier scheme. And who knows, you might find that certain changes are providing far better results than you had expected. That’s the beauty of testing two different designs simultaneously.

Here is a list of website elements commonly tested using A/B software:

• Headlines, for hero sections in particular.
• Sub-headlines, mostly for feature lists.
• Paragraphs and overall body text.
• Customer reviews, testimonials. Especially for colors and placement.
• Call to Action buttons and texts, or other CTA elements.
• Link placement, internal and external.
• Photos, visuals, illustrations, and animations. Each one can have a different effect. Worth the test!
• Social media badges, widgets, etc.
• Collaboration and brand partnerships. These help to build user trust.
• And lastly, any reassuring elements like trust seals, badges, etc.

And don’t forget that most of these can be modified using custom colors as well.

What’s the best A/B testing tool on the market?

Optimizely is the leading pioneer in developing experimentation software. In layman terms, experimentation software helps you personalize and optimize the user experience. With Optimizely, you can not only understand user needs but also implement the necessary changes to achieve a better result. Furthermore, this platform is optimized for performance, ensuring that you’re getting great results. And getting those results fast!

Optimizely X Web Experimentation is an advanced software for running sophisticated A/B tests on both modern frameworks and traditional solutions. Learning to run tests and experiments is the quickest way to understanding how different website elements shape your digital success.

That being said, Optimizely can easily help you with A/B testing our list of elements mentioned earlier. Whether you’re a WordPress user or build apps using React.js — the Optimizely software can deal with it all. There’s a reason these guys have won awards and gotten world-class recognition.

What kind of emotions are associated with each color?

Now that we got all the research and testing stuff out of the way, we can focus on understanding each color individually. Afterward, we’ll discuss the usage of color in web design.

Blue: Peaceful and Universal

The color blue is arguably the most common color used in web design. And it’s everywhere outside of the web, too. The sky is blue, water turns blue when it has sunshine reflected on it. Blue is most often associated with a positive, energetic, and calm energy. LinkedIn, WordPress, Samsung — these and countless other successful businesses have chosen the color blue as the representative color of their brand.

Green: Reaffirming and Environmental

The first thing that comes to mind when contemplating the color green is nature. So, that’s where you’ll see this color being used the most. Across brands and businesses that specialize in natural and environment-based products. Also, green is easy on the eyes. It helps to even out different web elements, providing a smooth user experience.

Purple: Elegance and Femininity

The color purple has a distinct feeling to it, it’s as strong of a color as it is eloquent and soft. Popular across feminine-type websites, you’ll also recognize the purple sparkle on many software websites. There’s something intricate about the combination of purple background and white color-tones. Less intense purple tones have been associated with romantic vibes in the past, which are ideal for boutique-style businesses.

Orange: Change and Impact

Orange is not the most common color to see in design, but there’s enough of it for it to be noticed. It goes extremely well with white backgrounds and is an excellent choice to make bold statements with. Similarly to red, orange is also often used to display notices or other warning-type elements. It’s an active color, invoking positive feelings with a zestful tone to it.

White: Purity and Innocence

White tones are truly universal and impossible to escape in any kind of design. If you go for dark backdrops, then white is going to be there to even things out on the front. And vice-versa. The most white-toned minimalist site still has to rely on dark typography to even things out. All in all, the white color is great for wedding sites, apps, magazines, blogs, etc.

————————

There’s a lot that goes into different colors. Here’s a chart showcasing other color types and their respective-associated emotions/feelings.

Getting to know colors more intimately is a great way to learn the required organizational skills when it comes to color-based designs. In addition, it makes it easier to understand why some sites are built the way they are.

Colors are also dominating the web design trends for the last several years. With the latest trends focusing on colorful mix-matching, color-infused illustrations, and dynamic CSS animations.

How to use color in web design?

Is it hard to use color psychology in web design? Not at all. And there’s a good chance you’re already doing it. In most cases, we tend to build designs using colors that we personally find appealing, or have found having a strong impact on us elsewhere.

Even though genuine creativity is a real thing, a lot of what we see in modern designs is simply a borrowed concept. In this sense, it’s about prioritizing user experience over the user interface. But both have to find common ground, nonetheless.

Use Bold Backgrounds

It’s quite fascinating to see the fluctuation between minimalist and bold backgrounds. In the early 2010s — most websites were using bold backgrounds with a strong color scheme. These days, designers are leaning towards a mix of strong and soothing.

The above example is taken from Ponislab’s homepage. What you have here is a clean orange-gradient color scheme with a CSS-transformed curve. The white color choice for the font is a bold choice indeed but executes flawlessly with the combination of a product preview.

Present an Impactful Statement

Design can be a risk and reward thing. But very few companies are taking a risk these days. Going with the norm is a safer choice, safer in a sense that it doesn’t stun the visitor. But, perhaps sometimes, making users stop and focus for a moment is exactly what’s needed.

Rawww (pictured) could have done any number of things with their hero section. And instead of following the norm, they chose to go with the less traveled route of presenting an impactful statement. You can’t help but scroll down to learn more. Other factors come into play as well, such as how the user found the site, and what kind of a service the user is looking for.

Who said that white backgrounds couldn’t work?

Use Color to Tell a Story

Of course, other aspects like CSS3 and HTML5 come into play, but color can be used to emphasize a story. Take Not Pot’s homepage, for example, their entire design is based on colorful transitions, with the addition of illustrations, animations, and high-quality imagery. Every time you scroll down you feel like you’re part of a story. A story that explains the product, its values, and other interesting things customers might want to know.

And it’s really not the case of having to have a specific product in order to tell a story. Stories revolve around passion and a broader vision. If you truly believe your product is going to change lives, the creating a story for it shouldn’t a problem.

Experiment with Colorful Design Flows

There’s no reason to get stuck with one color alone. Design is meant to be fun, and exciting. A great design can present the opportunity to feel a sense of awe and serenity. And one of the best ways to experiment with a design is through colorful design flows. Zetoolbox is doing this through illustration and modern design principles.

The intro (hero section) has a strong presence, but it’s not necessarily being carried over to other sections. Instead, the color scheme flows throughout the design where most appropriate. As a result, users aren’t losing sight of the first impression they got upon visiting the site. Color design flows can help strengthen the brand image that you’re accomplishing strictly through web design.

JotForm is another outstanding example of design flows. The green and blue tones here are invoking calm and serene feeling. And not to mention, how many brands are being as creative as to split the hero section into two different screens?

In this case, JotForm has actually infused the intro part with an animation. The animation simply showcases how JotForm works in the real world, but it certainly adds an element of surprise. And if you visit other pages, the same blue/green color scheme prevails most of the design.

Wrapping it up

We have discussed a lot of interesting areas of color psychology and web design in this post. Just to recap, here’s the full list of points we discussed: