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
1  
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

4 Answers 4

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

I'm reminded of a time when my first wife and I got a big canvas panel and several tubes of acrylic paint. We lay the canvas on the floor and aimlessly squirted random colors all over it. We let it dry and then hung it over our fireplace. Over time, several guests commented how wonderful it looked and thought it was an expensive piece of art...that is, until we told them how it was painted. It's all in the eye of the beholder.

Having related that story, I have to say that I agree there are incompatible color combos, ugly to the majority of viewers. However, there aren't a whole lot of 'em. I don't think you should stress too much about getting it right. What's contained within the website can make up for a whole lot of poor color choices. Content will always trump design.

share|improve this answer

I see a lot of people commenting things like "there's no right answer" which I (sort of) disagree with... There's certainly at least one right answer, maybe a few and I'm sure there's a bunch of wrong answers too, good design is about reaching the best possible solution based on the resources and time available to you And surely such a solution is going to outweigh several alternatives. You've given us a colour palette for the purposes of discussion so, I'm going to do just that and answer your question based on the supplied colour palette. (Given I haven't seen the layout you're working with this is still gonna be pretty broad but it'll have some process for you to follow.)

So, the first colours I like to pick when creating a colour scheme in a web project are the background for the body and the main text colour. It's normally a good idea to pick the two most contrasting colours to fill these roles and your example palette is no exception so in this case the colours are #DEE1DD and #28363D. Now we have to decide which to use for the text and which to use for the background and in most cases I try to use the lighter colour for the background and the darker for the text. There's been considerable research to show we read a dark colour on a light colour more easily than a light colour on dark so that's what I generally default to unless there's a reason for a darker look (like you're doing a website for a heavy metal band or something... I'm gonna assume that's not the case here). So, the background to our body will be #DEE1DD and the text colour will be #28363D.

Next I like to move on to what I think is the next most important item, which is hyperlinks. You want a colour that contrasts enough from the background as to not be difficult to read but also contrasts enough from the text in order to be noticeable. In this example most of the lighter greens will be illegible on the light background so the most obvious answer is #2F575D.

Next you alluded to a header that needed to be coloured, and again we need it to contrast from the background. In the interest of minimalism I try and reuse the colours I've already used in the body, and in this case the text colour is probably too dark to be filling large amounts of space so I'd be inclined to aelect #2F575D and for all of the above reasons I'd use the background body colour #DEE1DD To fill in any text or links in the header.

Finally I cover non essential design elements like hover states last and we've got a few different greens left to pick from. Again this probably needs to contrast from the background enough as the links don't disappear when rolling over them so if be inclined to go with #658B6F ...

And ... Voila! You now have a (basic) 4 colour scheme. I hope this process helps you as much as it helps me :) !

share|improve this answer

Your Answer

 
discard

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.