Given a color scheme, how do I apply it to a website design?

Question

Just so there is something concrete to discuss, say I have this color scheme:

Source

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 to use for the header, which color to use for links, background or text? Even if I decide that I want a light on dark or dark on light scheme, putting the 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?

Answer 1

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 :) !

Answer 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

Answer 3

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.

Answer 4

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.