Whenever you decide to create a website there are many things to consider and color choice is surely one of them.
The color is an essential part of user experience and can lead to both – success or failure. How do you choose colors for a website? What does the color say about your business, products, and services?
In this article, we will learn about:
- Background and content colors;
- Various color palettes and color theory;
- Color associations and how to use them;
- Landing page colors and platform colors.
As a bonus, you will find a tools that will help you to make the right decisions.
Background vs Text color
The first decision you will need to make for your website is a background color. This choice will affect your styling, including text color.
There is one simple rule: create a strong contrast between the background and text color. If you stick to a light background, use a dark color for your text and vice versa. The text must be readable to your website visitors (including people with disabilities.)
The background image is another thing to take into account. Make sure your content is visible on the image of your choice. Avoid speckled image as it will be hard to choose a primary text color for text.
Useful tips: Once it comes to images, learn from the best and do not be afraid to copy good practices.
Color palettes and color theory
How many colors should I use on my website? It depends.
On the mood, style, brand, and preferences of your target audience.
Good practices recommended sticking from 3 to 5 colors. This is completely enough to stress out important parts and avoid ‘rainbow effect’ that can distract visitors.
How to select the right colors? Use color theory as it offers several methods that will help you to choose colors easily.
Let’s look at the most popular color theories.
Analogous – a simple method stating that you should choose colors which are close to one another (pink, red, burgundy.) This will help to keep the same mood all over your website.
Monochromatic – choose one color and use the lighten/darken effect to build your color palette. Same as the Analogous method, it will help you to deliver the right mood and is easy to apply.
Triad – focus on 3 colors located on the 3 opposite parts of the color circle. Triad is a good method to choose if you want to have a colorful website or want to create a landing page.
It will also help you avoid the ‘rainbow effect’ we mentioned previously.
Complementary – based on Monochromatic, Complementary use 2 opposite colors from the color palette. Manipulate with the lighten/darken to build up a consistent color palette.
A good method to consider for online tools, e-commerce websites, and platforms.
Although these methods look different, they do share a common secret.
All of them are based/inspired by nature. A powerful source of inspiration on how to combine different colors and patterns. Make sure to remember it while choosing your colors – make them look natural.
We tend to associate colors with different feelings. The moments from our life experience, surroundings (do you still remember nature?)
What color comes to your mind that relates to passion? Most likely, red.
What about your customers? They will probably choose red as well.
So, if you want to associate with passion – go with red – it’s that simple.
A different example. How do you feel about SPA procedures? Most likely white and blue will fit way better than black and yellow, right?
We can go for an unlimited number of examples, but let’s list the basic associations:
- Red: energy, passion, excitement, power; also implies aggression, danger;
- Blue: coolness, spirituality, freedom, patience, loyalty, peace, trustworthiness; can also imply sadness, depression;
- Yellow: light, optimism, happiness, brightness, joy;
- Green: life, naturalness, restfulness, health, wealth, prosperity; in certain contexts, can imply decay, toxicity;
- Orange: friendliness, warmth, approachability, energy, playfulness, courage;
- Violet: wisdom, sophistication, celebration;
- White: purity, cleanliness, youth, freshness, peace;
- Black: power, elegance, secrecy, mystery;
- Gray: security, maturity, reliability;
- Pink: romance a feminine color;
- Brown: comfort, strength, stability, credibility.
Landing pages vs Platforms
With the colors on the table, it is time to decide whether you want to use low or high saturation. If you do not know what is saturation – it is colorfulness or intensity of specific color.
High saturation colors will drag attention and push towards action. Buttons, ‘Call to Action’, Banners and other action-driven elements use highly saturated colors.
The downside of high saturation is the distraction it can cause. It is important to double-check the number of elements with high saturation. If you feel there are too many of them – reduce the amount or lower the saturation.
Usually, we try to use from one to two highly saturated elements in the same viewport (visible part of the screen.) These elements have only one purpose – lead visitor towards your goal.High saturation colors are good for action-driven elements on your website. Low saturation colors dominate the overall user interface. Click To Tweet
There are cases when you need to avoid highly saturated colors.
Online tools and SaaS is something you want your customers to use a lot. Make sure they are comfortable and not distracted by unnecessary saturation. Choose low saturation for your user interface.
That does not mean that you should skip high saturation colors, but use them only to stress out the most important features.
Even if you are good with colors, there are few tools that could make your life easier.
It is one of the most popular color palette websites to set up and discover ready-to-use color schemes. It offers a huge database of user created and rated color palettes you can choose from.
The tags and content structure allows you to find really good color schemes for various purposes.
A small, yet very inspirational resource which will allow you to find a color with a simple drag.
Move your mouse cursor around your browser window and to discover colors. In addition, you will see color code for a quick reference.
An interesting approach for finding not only website colors but also the mood.
Associate your colors with the graphics and see how they fit together. Design Inspiration will offer you up to 6 colors based on your choice of images.
Apart from resources, mentioned above, make sure to visit Behance, Dribbble, Awwwards, and other mainstream showcase resources frequently. These websites are a great way to find inspiration and learn from the best.
Color theory is hard to learn and apply. Still, it really worth your efforts and pays off later on.
Choosing the right colors for your website will help you attract more customers, raise awareness and push them towards conversions.
What are your methods and steps to select colors for your website? What tools do you use? Share your experience in the comments below.