How to correctly implement a color scheme

Question

Let me begin this question by saying outright that I don't consider myself a designer! I'm a developer and my strengths do not lie in design but I am in a situation at the moment where I need to design a site and I have a number of different possible color schemes that I'd like to try out.

I've tried this before but ran into a number of problems - namely which color to put where!

So for example I've picked out this scheme as one of my possible color schemes but how do I know which color should go where? For someone who is seasoned in doing so it may be obvious but is there a formula or method that can be followed in implementing a color scheme?

EDIT: Also, once I've chosen my color scheme which usually seems to consist of 5 colors - can I, or am I expected to, implement different shades of those colors if required? Or does this decrease the integrity of the scheme?

It's issues like this that leave me confused about color scheme implementation.

Answer 1

Make sure you keep your colours in some sort of order, keeping colours in pairs, or just using certain colours for similar elements will make it look more uniform. This way, having certain colours in association with each other will keep things consistent and looking professional.

For example you may group a contrasting colour with another, and then two similar colours together. Just make sure you don't clash pairs.

Note colour relationships on the right here:

^{Source: paper-leaf.com. Click image for full size}

When it comes to shades, a lighter shade or darker shade can be used without damaging its overall scheme, just make sure it is a tint or shade (light or dark added to the colour), avoiding changing the saturation or tone (greyness). When it comes to including these different tints, always keep a dominant, ie 'bigger' part of what you're colouring, unless using a gradient.

I love the colour scheme you picked by the way

Answer 2

this has been discussed in a similar case here and falls almost on the level of a brainstorming question but to reiterate on the color scheme depends on so many factors such as:

• responsive
• look
• feel
• dynamics
• age demographic
• handicap needed

Usually a good web designer will know how to balance the colors out from experience and usually the study of color theory. Furthermore, depending on the amount of content being displayed I may take the colors you posted and do something totally different than another designer. That is why this question will be hard to answer. I do like your color palette you have chosen and it gives me ideas, but I have found myself usually using anywhere from 8-10 colors in a web design. Typically that size amount accounts for shadowing, hover effects, selection choices, etc. etc.

To try and answer your question I may consider:

• FFFFFF - background color

• FF9800 - footer or header background color

• 000000 - color of the body text

• 7E8AA2 - Background navigation color in the header or footer

• 263248 - Hover color for the navigation

Just an example. In the end you can only experiment. Do some searches, find some examples on many inspiration sites (search for critiques sites) and observe, figure out what you like and try to execute. Good Luck!