: How to correctly implement a color scheme 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

@Vandalay110

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

Vote Up Vote Down

@Sent7350415

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!

Vote Up Vote Down