Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
Not sure if this questions is on-topic for a UI site. What does everyone else think? –  Rahul Sep 5 '10 at 11:19
    
I would have preferred a web design site but none exists... So I looked through the Stack Exchange list and this looked like the closest. –  Ricket Sep 6 '10 at 3:07
    
Doctype.com is a stack about web design. –  Rahul Sep 6 '10 at 23:08
    
seems UI related to me:) –  Quamis Sep 9 '10 at 12:00
    
I'd say a good user experience is a combination of usability and aesthetically pleasing design. –  djlumley Jun 7 '11 at 3:46

7 Answers 7

up vote 5 down vote accepted

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer
    
+1 for lightness/saturation. You can go a long way just using tints and shades of one color. –  Pam G Jun 9 '11 at 17:50

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

share|improve this answer

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?

share|improve this answer
    
Umm... Awe? Impressed? It's for my personal website with my portfolio on it (as a computer science student looking for a game development job). I feel like blue is the standard professional color but I don't like it all too much. Especially if I want to stand out, I should maybe even avoid it, right? –  Ricket Sep 5 '10 at 20:41
1  
Black can work as well as a "professional" color. –  John Jun 8 '11 at 14:04

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.