Countless articles and psychological studies explore the subject of colors and their impact on people. The colours used on your website — as well as in your logo and branding — have a tremendous effect on your website visitors. Here’s a quick guide to choosing your new website’s colour scheme.
What Colours?!
Know that what I’m referring to here isn’t the predominant colours of photographs or illustrations that are used on your website, but the other graphical elements. That would include the colours of icons, fonts, and buttons; the backgrounds of things like menu bars and error messages; and boxes, circles, and other geometrical shapes that border and define articles and calls to action. Even the colour that backs the normal text of your website — if it’s not white or black — all need to be decided and be part of an overall and consistent website colour strategy.
Dark or Light?
Initially, you’re going to have to choose whether your website is mainly of the dark or light variety. Is the predominant background of the pages of your site on the dark or light side? Perhaps a couple of illustrations will best show the difference:
The obvious difference is the background. Pictures and text that appear on a white or light background appear as if they’re printed on paper, perhaps existing like the pages of a news magazine. When pictures and text are on a background that’s predominantly dark, they’re a bit more artistic-looking, maybe like an advertisement in a fashion magazine. One overwhelming fact of dark backgrounds is that light text needs to be used to be readable and that’s typically called “reverse printing.” Such text is generally not as easy to read as dark text on a light background. One could make that point, however, that a lot of white space on a typical computer screen throws a lot of light at the eyes of the user, potentially tiring them.
And please know that just because you choose a website that is predominantly one way that some parts of it can’t lean the other. It’s very common these days, for example, on light-themed websites to have a footer that’s dark-themed. If nothing else, this identifies this repeating section as being different.
How Many Colours?
First of all, assume that black (or a dark grey) and white (or an off-white) are going to be part of your website. It’s pretty tough to make something that looks nice and not employ one or both of these standard colours. So what I’m addressing here are those colours that are in addition to those primary two.
If you think of most any modern brand or logo used in the modern marketplace, it’s seldom comprised of more than two colours other than black and white. Two colours are significantly more memorable and align with branding schemes better than three or more colours.
As a general rule, three extra colours for a website should suffice. Two of them will be predominant, being used for the standard graphical elements (boxes, lines, shaded backgrounds, etc.) of your website. The third will be reserved for special, attention-getting uses, such as icons and the background of buttons used in call-to-action and other extraordinary elements. This colour should be, to some degree, complementary to the other two colours. If you know anything about such colours, they are typically from the other side of the colour wheel. That means they’re not derived from the same colour families of your two main colours — they’re the opposite! If you want something on your website to be attention-getting you need to make it stand out and, of course, you can’t use it too much. If it’s seen repeatedly it’ll lose its usefulness.
Your Logo
If your logo has already been designed, whatever colour schemes used within the elements of your website must align with your logo. If your logo is comprised of two or three colours, then you probably won’t have to decide on which colours to use on your website because they’ll have already been decided for you! If your logo has only one colour, then you’re going to have to find two more colours to use with it on your website other than variants of black and white.
Website Colour Schemes
Before considering what other non-logo colours you’re going to use you must first determine the colour(s) currently used in your logo. In the world of printing, these are referred to as PMS (Pantone Matching System) colours. If you’ve had business cards or letterhead printed, you should be able to obtain these numbers from the printing company.
If your logo colours have, to this point, only been digital, then you’re going to have to find out what they are from whoever designed your logo. In the digital world, these can be expressed a few different ways, but the most common is called hexadecimal. They will typically be expressed as a six-character “word,” comprised of numbers ranging from 0-9 and letters from A-G, often preceded with ‘#.’ The hexadecimal code for Coca-Cola red is #FE001A.
If you only know the PMS colour(s) or have been told the digital colour in another scheme (e.g. RBG), then just Google the term “PMS to hex convert” or “RGB to hex convert” and you’ll find numerous online utilities to do the conversion for you. Hexadecimal (“hex”) is the standard scheme for expressing website colours.
If you have to determine one or two added colours to be used, you’ll want to compare them to whatever has been predetermined logo-wise. An excellent tool for doing this — and for finding other suitable colour combinations — is available from coolors.co. Click the ‘Start the generator’ button and then edit (by directly clicking on the current hex numbers) the leftmost coloured panels and enter the hex codes of your already-chosen colours. Once you’ve done that, click the little padlock icon on each panel so that they’re locked-in. Then, just press the space bar on your computer to let the tool go to work, displaying various potential colour schemes for your consideration. If you happen to like one or more of the colours shown, move those panels leftwards and lock them in so you can view them beside your already-chosen colours. Experiment! Know that you can save any of the schemes you think you like with a name so you’ll be able to come back and look at them again. This requires a sign-up to the site and I don’t believe I’ve ever received spam from enrolling.
One other way to choose a colour scheme — especially if you don’t have a logo designed yet or maybe your logo is black and grey — is to just peruse a bunch of “off-the-shelf” colour schemes and choose one of them! A hundred schemes are shown here, all with quick explanations of what feelings they might emote from those who view them.
If you want to go further on this subject, do some searches of “choosing website colours” or similar; you’ll find dozens of online articles written on the subject, bound to get you even more confused and choosing between a dozen different schemes instead of two or three!
Did you like this article? Perhaps you’d like reading one of these others:
