Bridging the gap between color palettes and CSS

Question

I'm familiar with sites such as kuler, I'm well-versed in HTML/CSS/JavaScript (as a programmer), and I know what sort of content I want in my website. I can figure out how to lay out my content decently well. But the hardest part for me is figuring out what color each thing (e.g. links, text, background, other elements) should be. I'm terrible at colors!

For example, when you put kuler in Triad mode and pick a color, it shows the color and two pairs of complementary colors, so that the colors are each bold but still work together. But I go to try and put them in a page, one color for background, one color for links and one color for text, it doesn't work at all. I'm obviously doing it all wrong!

What is the best way to figure out what colors to make a website? I'm absolutely terrible at colors, and I thought kuler would help but it's not that easy! Please help me "bridge the gap" between kuler and CSS so that I can quickly and easily pick a color palette and apply it to my website.

Answer 1

It sounds like you are trying to put color on color (e.g. red text on a green background). This is very hard on the eyes!

Strive for a mix of colors and grays (white and black are 'grays' here)--e.g., if you must have colored text, put it on a white or black background. If you want a colored background, make it only lightly colored and then use white or black text over it.

With color, less is more. If you go garish, you end up with MySpace and crippling headaches. Use color for an accent, not as the content. Start with a black and white design, and try adding one color element. See how that looks. Then add another. Too much? Take it back out again. Try a different element.

Look at how websites you like use color. For example, this page is mostly black and white, with some blue (links, tags, header bar), and some yellow (opposes blue, used very sparingly as an accent color). That's a common approach today.

Answer 2

Figure out which emotion you want the user to experience. Making a site for a place serving coffee? Try setting the mood with colors. You need to know about which colors assosiate which emotions.

So, which emotion are you trying to give the visitor?

Answer 3

I've found this site to be a very helpful introduction to color theory: TigerColor - Color Theory Introduction

Remember that there is much more to choosing colors than just the hues. You'll also want to consider taking lightness and saturation into account.

Answer 4

Grab some crayons, colored pencils, etc... and experiment. Going straight from triad in Kuler (or any of the popular color generators) to CSS might be hit/miss depending on the colors.

Stick with a few, 2 - 3 colors at first. Color theory is similar to typography in that there's a lot of options available, but the best designs typically use very few, well-picked colors.

Also, consider neutrals (or neutral tones) for big expanses, like the background, and more striking colors for things like links, logos, etc.

Also, check out ColourLovers for some great ideas (or, better yet, join the community!).

Answer 5

Let's just say that triad colours aren't exactly supposed to "work well together" - more often they are the three colours that are equally drawing viewers' attention. Colour palettes based on triad work well if the colours from the palette are just spots on the plain field of neutrals or if one colour dominates and other two are used as accents.

Answer 6

When you learn programming, you (probably) didn't jump in and write a three-tier architecture from scratch as your first program. You probably wrote small programs that just help to teach you about one small aspect of programming.

The same thing applies with design. To jump in and create a stunning and complex design straight away will not work.

As a non designer to start off you need to keep it simple as possible. It takes real skill to design a good looking site that doesn't have a white (or slightly off white) background. Have a plain white background with black text and then use the three colours for the minor details - links, heading and bold text and perhaps the header.

When you have the simple design looking crisp, then focus on the content. When that is all good then you will have a good basis to experiment with the design. Then bring in more designer flair, slowly and one bit at a time so you can learn the effects of subtle changes. Think of it as education.

Answer 7

I always work by example. The post Beginners Guide to Using the Power of Color in Web Design combines the Colour Theory that @Daniel X More talks about with websites that apply the colour theory in question.

Then you can match one of the sites to the content you have and reverse engineer the colour harmony from there as a starting point.