So how do I choose which blue for the header? Should it even be blue? What goes with blue?

October 28, 2009 5:02 AM

Give me a crash course in colour! I need to start making some flat template designs for a website but don't know where to start.

I've come to web design through information architecture and writing web content. I'm a word-oriented person with essentially no visual interests; I don't own a single painting, have never been moved by an image in a gallery. All my walls are magnolia.

We've got a house style in terms of shapes for the site, and my manager has asked me to come up with a few different colour schemes to discuss. There have to be millions of colours available in #nnnnnn.

I know there's a thing called a colour wheel that shows colours that go well together. That's as much as I know about colour.

Are there any resources on the web for learning about this? Tips about how to pick colours? Is there a process by which you can come up with colours that are useful across a site?

Any help very much appreciated.

posted by Cantdosleepy to media & arts (12 comments total)

Google Munsell palette
posted by hexatron at 5:23 AM on October 28

Well, if you want to see some examples, Adobe Kuler offers a lot of color combinations. (But they're user generated, and some are better than others...)
posted by pemberkins at 5:27 AM on October 28 [1 favorite has favorites]

Color Scheme Designer isn't a bad place to start.
posted by zamboni at 5:45 AM on October 28

The Create app on the Kuler site pemberkins linked looks like a nice, interactive way to play with a colour wheel.

Sometimes if I'm stuck for a palette, I'll find a photograph that I thinkfeels right for the application and pick colours out of that.
posted by lucidium at 5:46 AM on October 28

21 Stimulating Color Palette Tools For Designers

25 Color Palette Generating Resources for Web Designing!

Color me crazy - 10 best online color tools

Colour Lovers

Flickr Colour Inspiration Portfolio
posted by Hartster at 6:02 AM on October 28

Also, a search on Delicious for something like color + webdesign is always a good start for things like this.
posted by Hartster at 6:04 AM on October 28

Two approaches:

1) Find a painting or work of art that works well for your company, and use the colors from that, in the same proportion;

2) Use these that I just picked out for you from ColourLovers.com, and contact me if you want some advice on how to talk about them intelligently (you can probably figure that out yourself at least as well as I can, though): one; two; three; four; five.

3) Get the ColorImpact software which I really enjoy, and which has a nice interface for seeing color palettes with different proportions of each color - however, it can still be difficult to envision how the color schemes will look if you're not used to using your imagination in this way.
posted by amtho at 6:25 AM on October 28

Another scheme gallery:

Color Schemer Theme Gallery

The Online Color Scheme Generator is nice too
posted by backwards guitar at 6:26 AM on October 28

Seconding the Online Color Scheme Generator, as well as the Visibone Color Lab (although it's quite simplistic -- I doubt web-safe colors are as much of a concern now as they were in ye oldern days).

I also recommend checking any color combinations that you decide on at CheckMyColours.
posted by transporter accident amy at 7:45 AM on October 28

As a painter who teaches color theory and two dimensional design, I recommend that you look at some authors on information design such as Edward R Tufte, "Envisioning Information". Designing for readability is very different that painting.
posted by effluvia at 8:54 AM on October 28

Check this out:

blog.wearpalettes.com

It shows color palettes taken from outfits of young hipsters. Some of the color combinations might work for the web.
posted by mai at 9:23 AM on October 28

Just googling "Color theory" gives you some great introductions. This one covers all the basics.

Since you don't know the color wheel too well, you should start by checking out some color harmonies. Any sort of color scheme generator you find will work by modifying these harmonies.

Basically, you just need to play with the colors to come up with something that you like that supports your design. The more you examine the colors, the more you will see how that interact with one another. Ask yourself some basic design questions such as:

Which color creates the most emphasis?
Is this what you want emphasized?
How easy is the text color to read against the background?
Does the link color stand out too much from the text?
Does it blend in too much?

One general tip I have is that most colors should be much less saturated than you think you will need. Work with tints, shades, and tones, not just pure hues (The site above will explain what that means if you don't yet know).
posted by AtomicBee at 11:49 AM on October 28