When designing a website profesionally colors cannot be left to an approximate decision. As said in my post about design consistency, colors have to remain the same through all the page to give the user some info.
So, if you choose red as the brand color it will not be a great idea to have 7 different reds around the page giving confusion to the user and showing the non good idea that your company departments do not coordinate properly or maybe your designer doesn’t take his/her job seriously.
Schemes are designed just for that purpose, there should be only a few colors and you should be able to play with them so that the website looks good and the usability is improved using them. As I read once, a good design is the one that helps the user.
To make a web scheme we need normally just 3 colors:
- The brand color: which is usually in the header background or used in the logotype.
- The accent color: used to get the user attention (it can be a lighter version of the brand one or the opposite to make it more visual).
- The shadow color: Or the one to make just the opposite effect, avoid user attention.
Once that’s done we normally use black and white for the text and its background, but obviously, you may think on doing something more artistic, which means that you may end using 2 more colors (anyway, black and white are colors too). There is also the possibility of using black and white for general text, and some other combination for special boxes like a quotation.
Finally, depending on your project needs, you may use more colors for other purposes, for example, a “Save” button that you want to be unique in all the site that has its own color letting the user notice where the button is very easily. Or going more far and web standarized, think on the RSS feed button which is orange in most blogs not because its following the website scheme but because its using the web standard.
Let’s see some examples:
Monochrome schemes
Those are the simpliest schemes. Having chosed a brand color as the main one you just need to move around it changing the tone, the shade or the bright. So, the objective will be to have a brand color, its light and dark version to get or avoid user attention and also a text color and its background (the darkest and lighter colors in the scheme).
Yellow monochrome scheme
Purple monochrome scheme
Brown monochrome scheme
Analogous schemes
Analogous schemes are done combining colors that are next in the color wheel. We get one as the brand one, then a very dark and very light from this for text color and background, and finally the neighbour color and a lighter/darker version of this for accentuations and shadows.
Blue-green analogous scheme
Pink-purple analogous scheme
Complementary schemes
One of the most popular ways to make an scheme is using opposite colors. Despite it may seem a very bad idea, instead, the opposite colors end complementing them giving harmony to the design. Here, you chose a brand color and its opposite, then a light and dark color of the brand and the same for the opposite, so you may end having between 5-6 colors which are only 2 and its light/dark versions.
Orange-blue complementary scheme
One of my favourites.
Green-Red complementary scheme
Green-Purple complementary scheme
Green is opposite to red, if you move closer to the yellow in the wheel then its opposite ends being purple.
Other scheme models
There are other type of combinations to make an scheme, if you want to learn more I recommend you to read the book “Professional Web Design” from Smashing Magazine. I may wrtie a bit more about web schemes in the future too 🙂
