Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Just so there is something concrete to discuss, say I have this color scheme: http://www.lavishbootstrap.com/?image_url=http://design-seeds.com/palettes/12/SpringTones505.jpg

There are many articles about how to pick a coherent color scheme based on complementary colors, monochromatic colors, etc. however, once I have a set of colors, how do I decide which color is the header, which color is link, which is background and text. Even if I decide that I want a light on dark or dark on light scheme, putting rest of the colors on screen can still make the site look ugly.

Are there rules of thumb or general guidelines that help one decide which colors go where?

share|improve this question
The answer is that you pick them based on what looks nice, and achieves the design objectives. Alas, there's no formula for this. –  DA01 Feb 18 '13 at 7:45
Well @DA01 has already said it, plus, you can't apply a given color scheme to any website. Rather you decide the color scheme according to the website. –  ikartik90 Mar 12 '13 at 18:04

2 Answers 2

The website you linked to is showing you how to use those colors:

#28363D for the active state 
#2F575D as the navigation background 
#DEE1DD as background 
#C4CDC1 as banner ...

I normally splash my own color in the design - even if I know they are slightly wrong - at least I have roughly two solid colors or at least one. Then when I have have laid out my idea, I take my primary color (the one I have used the most) and add it to a color wheel. That way I replace my other colors. Or I try to find some images that have most of my original colors.

I have read articles that say, take an image and design your work based on those color, I can not do that. I create my own design, with at least one color in mind and then use the techniques of color theory

hope it helps

share|improve this answer
>The website you linked to is showing you how to use those colors: Right, that's my question, what's the 'algorithm' for figuring this out myself? –  Shahbaz Feb 17 '13 at 14:38
I dont think there is one. For example, if I had to add those color to that website, I would not have arranged them in that way. For example the way they used the colors here lavishbootstrap.com/?image_url=http://design-seeds.com/palettes/… is horrible in my opinion, though the color are very nice but - in my opinion - badly arranged. So you jus have to play with colors. I dont think there is a mechanic way - if there is I would recommend you play with your designs and dont use it! –  aurel Feb 17 '13 at 16:20

There is no formula on what to take, which should be background and so forth, that is why design is an art.

Normally I'll do a lot of tryouts with the set of colours I have, for example which font color looks better at which background.

There is though a rule of thumb, which is to contrast the colours used, most people will say this is common sense, such as light colour font with a dark colour background. Then it may arise, how do you determine the colour for sub-components, such as alert boxes, navigation and so on.

As I see it, you should have your bare structure for website ready, then after that you will need to determine which are your main content, how you want to present it. Maybe a softer colour on subcomponents, which does not need immediate attention.

How do you know whether it's good or not? Easy, as soon as you say "This is nice", that is when it's good. It always help to get second oppinion from other people.

All in all, keep trying with the colour combination, don't stick to only one, and you might be surprised of the composition you might achieved at the end.

@Color Combination: The combination provided by the website is good enough to start with.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.