How to use the right website color schemes on your site?
Published by Incomedia in Web design · Wednesday 05 Dec 2018
Do you ever pay attention to colors when creating a website?
You should. Using the right colors on your site is essential to attract the right audience, keep readers interested and encourage them to come back. Here's why: colors affect feelings and have a unique persuasive strength.
So how to choose the right colors?
If you're looking for a fast way to use on your website project today, then you'll find very helpful tips in this practical guide to making the best website layout with the color scheme that's right for your target audience. And using the Force of Colors infographic you're gonna be a Jedi web designer too!
No Color Theory here, but tips on how to put it into practice based on what we learned in creating WebSite X5 templates.
In this post you'll find how to choose a color palette which fits your project and learn to apply a cohesive color scheme on any kind of website. You'll learn how to increase conversions up to 24% more by choosing the right color. Whether you want to start your own blog or an online store, publish a site about yourself or your company, colors will no longer have secrets.
Here are a few questions we're going to answer:
Force of Color facts and why to choose the right colors
Colors affect a bunch of elements on a website: background, menu, buttons, titles, text, links and images. Colors make a web page readable, push sales and can have an impact on brand recognition at the very first scroll. For this reason, color is a powerful web design tool. Though, how powerful?
Getting to know the Force of Color is essential to Jedi web designers. So when you're designing your website, take into account the impact colors can have on users. Keep an eye on our Force of Colors infographic: when you're making your site, it will be a lot easier to focus on what matters for an effective layout.
What is a color scheme and how to use it on your site
A simple and effective way to create a color scheme is to choose 2 main colors with just the right amount of contrast and 1 or 2 text colors. Like this:
- 1 Base Color
- 1 Accent Color
- 1 Text Color in white, black or grey
The color you need to use the most on your site is the Base Color. The Accent, instead, is a vivid tone that gives personality to your blog or website. For this reason, it's essential to use it less and on very small parts of your site, like buttons and icons.
And sure enough, if you think about Amazon, the orange "Add to Cart " button instantly comes to your mind. The same happens with the YouTube red Play button. Ever noticed?
4 galactic steps to generate the best palette for your site.
1. Choose the Base Color from the web galaxy (listen to the Force of Color)
To drive users to your site, ask yourself: "Do I know what they like or dislike?". When it comes to selecting the right Base Color, empathize with your potential target audience, learn their habits and foreseeable reactions. An old wise Jedi would say: "Connect to the Force".
First, find inspiration on the internet. Understanding the users' web galaxy means you need to surf it. You can use these 3 coordinates to find the way:
- your website category: be inspired by the most visited sites for your niche. The color palette for an insurance company website is unlikely to be the same as the one for a kids' site, don't you think?
- Your logo (if you already have one): use the established color as your Base, because a cohesive corporate identity helps users to remember your business or products. So look for those sites that use your graphic colors to get hints.
- Your personality: imagine your site were a real person and search for the color that embodies what you stand for. Use stereotypes like the meaning of colors or the warm and cold colors differences.
The coordinates above seem a little conventional, but they can be useful for 3 reasons: they underline which colors users are most attracted to, which colors they are most accustomed to and how to be different.
Here's a tip: use these two free color-picking tools to choose the right color for your site. To identify web colors they both use the HEX code, a six-digit alphanumeric number preceded by #:
- ColorZilla: this is an amazing Chrome and Firefox extension that lets you grab colors right from your browser; you can extract a single color or even an entire website color palette.
- BrandColors: it has a full list of HEX colors that popular brands have on their site. From Amazon to Apple and Coca Cola.
So now that you've got plenty of ideas, let's take the next galactic step: choose the Base Color. Honestly, it's really simple and you don't have to use Photoshop or any other image editing software.
All you need to do is to open the Google search bar and type the word "Color Picker" or the HEX code, that you got using BrandColors or ColorZilla. You'll see the color information for your pick right there on your screen.
Use your mouse to control the target and experiment until you find the most effective color value for your website. Google provides information about any colors. For example you'll find the RGB values, used by some website builder (including WebSite X5) to specify colors.
2. Combine the Accent color with your Base in less than 5 minutes
Here's how to find the Accent color in less than 5 minutes with an easy-to-use and complete color palette generator. Not sure it's possible? From Jedi to Jedi: "That is why you fail ".
- Go to Paletton and type your base color HEX code in the box A ;
- Select "Add Complementary" B to get the opposite value to the dominant. You don't like it for your palette, uh? Then move on.
- Click the icon "Adjacent " C to get a similar color to the Base.
- Or, click the "Triad" D icon for a more contrasted value.
- Then, choose "Alternative with Text" from the "Preview" menu E and you"ll get the white, black and grey tones for your text according to the Base and Accent colors.
You know what? The color scheme for your site is ready! In less than 5 minutes.
Scheme color sample generated by the Triad.
From the "Example " Foption you can test the look of your palette on a sample web page. Click to start the option and see a standard website layout in the color scheme generated right on your screen. There is no doubt that Paletton is a color scheme generator with lots of useful features for web designer newbies.
For a quicker way to get a pleasing color combination for your site, try the tools on the following list.
If you're looking for ready-to-use color palettes, keep an eye on these websites:
Want to make a color scheme out of an image?
You can try:
In Julie Gibbons' article on how to choose a color palette for your blog you'll find a beautiful gallery of color palettes inspired by images in different moods. Follow her tips to learn how to use these tools at their very best.
If you have a personal website or blog about a hobby, this tool is for you:
because it generates palettes inspired by places, seasons or a specific topic.
For example, you can color up your travel blog with the colors that remind you of the places you love. Winter sports fan can instantly make color scheme inspired by snow-clad landscape. WOW!
Are you getting into the whole color palette thing? Then it's time for a new galaxy. Discover the art of color pairing in this Looka guide.
3. Apply a color scheme to your site<
"Do. Or do not. There's no try. " Get inspired by the most famous Jedi quote and let's go on a mission. Suppose you have to create a music website for a friend or a client. What colors will you choose?
To find the right color palette, go out on the web for inspiration and then choose:
- What feeling you want to convey to your audience
- What you want to say about the subject
Look at the 2 sample sites from the 3sounds template:
a website of a classic summer music festival set in warm colors whose harmony relies on the use of similar Base and Accent colors (the contrast is based on the "Adjacent "); colors recall a sunny summer day and the wooden classical instruments which are the main subject of this website.
a website of a DJ
set in bright and vivid colors that perfectly contrast with the white Base Color (contrast from the "Triad "); energy and rhythm coming from the striking contrast reminds of the electronic music played by the DJ.
Did you notice that the color design of the page is virtually identical on both sites? That's because it follows the color scheme hierarchy. We applied the Base Color to the whole background, while the Accent (well, we used more than one Accent Color) was limited to buttons and the text we wanted to stand out.
Yet, the 2 projects are different. Why? Because each color palette stands for a different mood: one is classic and the other is contemporary.
The "right" color palette talks about you talks to your audience.
The right color combination is a matter of balance. The meaning of colors guides and the psychology behind them are helpful tools to guide you when building your website personality. But, in practice, the best way is to find concrete connections between colors and your website subject (seasons, sun, materials).
Just as Gregory Ciotti wrote in a compelling article about colors " The key is to look for practical ways to make decisions about color. "
The don'ts of choosing buttons and text colors
When it comes to color and web design, it's easy to make wrong decisions.
The most common mistakes on a web page are to:
- use too many colors
- use complementary colors for text and background
- use too many warm or cold colors
We recently made a big mistake too. But to turn you into a Jedi web designer, we'll share with you what we learned.
You can see that getting users to try our product is essential to our website strategy. When we launched the version 13 ofWebSite X5, we decided to apply the Base Color (blue) on the "Download Free " button too.
So we decided to test using green and red button options.
The results? The red color increased the click rate by 24%. It was (by far) the best outcome.
websitex5.com Analytics, January 2017
Yes, red works fine, and this is confirmed by online research, but the point is that both colors (red and green) highly increased the conversion rate.
How come?
"The less a color is used, the more likely it is to stand out ".
Red and green have a "stark contrast " to the blue Base Color. It's hard not to notice. And you know full well that it's pretty easy to get lost in the web galaxy!
Conclusions
So, you've seen how easy it is to use many color palette generators and how they make creating a website color scheme incredibly simple. In fact, when it comes to color design the hardest thing is to find the right balance that fits best for the site.
Follow our Jedi guide to color web design for your next project and it will be easy to use colors
in the right way
at the right time
with the right audience
for the right purpose.
(May the Force of Colors be with you)