Written by Phil Chow
How your website looks matters.
If your website looks great (i.e. professional), visitors to it will more likely stay, visit its pages, and take the next step of contacting you. On the other hand, if it doesn’t look great, they may quickly leave it for your competitors’ websites. Rightly or wrongly, people assume that if your website does not look professional, you’re not as well.
So what makes a great looking website? A lot of factors go into it like layout, navigation, graphics, and quality of content that is easy to read and understand. But a big factor in determining your website’s visual appeal is its color scheme.
Your website’s colors greatly influence its looks. Pick colors that go well together enhances your website’s visual appeal. Conversely, pick colors that clash undermines your website’s visual appeal. Check out WebPagesThatSuck.com (opens in a new window) for examples of what I mean.
So how do you choose the “right” colors for your website?
You can choose the “right” colors for your website by doing any of the following:
- choose colors from a color wheel or
- look at other websites’ color schemes for ideas on possible colors for your website or
- use a web color tool to select your website colors.
A color wheel shows relationships between colors. By picking colors that are opposite to each other on the color wheel, or picking colors that are besides each other, you can pick the right colors for your website. The link to color wheel (opens in a new window) explains how to do this in more detail.
Get website color ideas from other websites
Another way to choosing the right colors for you website is by looking at the colors that make up websites that you like and then choosing a color scheme that you like best from these websites as your website colors.
Use a web color tool
This is probably the easiest way of finding the right colors for your website. A web color tool shows several color combinations that you can choose from for your website colors.
Most recently, this web color tool was brought to my attention: Canva.com/colors (opens in a new window).
It’s easy to use. You simply enter a color into the tool and it then shows you color combinations that go well with your entered color. This makes finding the right colors for your website easy. It will be my go to web color tool to choose color combinations for future websites and even for web graphics and printed visuals.
Choosing your website colors guidelines
Regardless of which of the above methods you use to come up with your website colors, you can come with a great color scheme for your website by following these guidelines:
- choose no more than three to four colors, along with white for your scheme. More than that makes your website look busy;
- designate two of these colors as your main colors. These colors will color your website’s header and background regions. In general, pick the lighter main color as your background color;
- as your text color is usually black, set the content area of your website to white. Black text on white background makes your text easy to read. If you want other colors for your text and text background, make sure they contrast; otherwise, your text will be difficult to read. For example, don’t have purple text on a blue background!
If you have a logo
Keeping the above guidelines in mind, if you have a logo, use your logo colors as the basis of your website colors. Next, use a color wheel, find another website with a similar color scheme as your logo, or use a web color tool in order to find complementary colors that would go well with your logo colors.
If you don’t have a logo
Again, keeping the above guidelines in mind, if you don’t have a logo, just pick a color that you’d like as one of your website colors. Next, use a color wheel, find another website with a color scheme that you like, or use a web color tool to find complementary colors that would go well with your selected color.
How I chose my website colors example
I repeated the red and blue from the logo as trim and section colors, along with grey and white as neutral and background colors for some of the other sections. A black-grey was used as a neutral background colour in the footer section of my website to ‘signal’ you’re at the end of the website.
All these elements tie in together to give NoticedWebsites a uniform web color scheme that mirrors NoticedWebsites’ logo, giving my website a professional look.
So there you have it! With the information above, you now know how to select the right colors for your websites and make it look great!
What are your thoughts on this post? If you have any comments or questions, please reply below. We welcome and appreciate your feedback!