Colors

January 20, 2004 | View Comments (15) | Category: Design

Summary: Colors and how we choose them.

Some people like the dark background of the CSSVault, others don't. It simply reminded me of how important a role color plays in any type of design we do. I will admit to being no color guru although I could repeat back definitions of all the color terms such as hue, contrast, cold colors, warm colors, complements,etc. However, I have yet to acquire the ability to find the perfect mix of colors. How do you go about choosing your colors? What are some good color schemes that tickle your fancy?

Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/114

Comments

#1

First off, I like the "color" of the new CSS Vault!

I'm not a color expert either, but I know the basics, and in general I tend to choose colors by eyeballing them.

To get started I usually look at magazines layouts, posters, artwork and books -- just to give me an idea of where to start. Lately I've also tried to take color from nature. I'll take a photograph of a sunset for example and sample colors from that -- I did this for my new redesign. What I end up with is usually something different, but it's a place to start.

On some rare occasions I pull out this little color scheme book thing I have, but I find I much prefer to get in there, mix it up, and see what comes out.

That seems to work for me pretty well, but I'll admit, it's probably not the best way to go with every project.

Keith (http://www.7nights.com/asterisk/)

#2

A good place to find colour palettes is in nature. Go out and absorb the elements. If you have a digital camera, that is even better.

Colours inspired by nature are those that tickle my fancy. ^_^

Zelnox

#3

Color (colour) theory can be quite mathmatical with rules and guidelines that produce reliable results.

Grab a color wheel, decide on a base color which suits the project (eg this page's dark red), then draw a line straight across the wheel to find it's complimentary. Draw geometric shapes like squares, triangles (of varying widths) and octogons from that reference point to find harmonious color schemes. From there, you can play with brightness, etc etc.

This browser based magic application is an awesome reference for both quick schemes, and for learning more about it all:
http://www.pixy.cz/apps/barvy/index-en.html

Otherwise, open your eyes... most decent color schemes have been done to death, so a walk down the supermarket isle, through the park, across the web, or down the street should inspire a starting point.

As always, I'd put the needs of the client and project above my own preferences :)

Justin French

#4

Well, there are some tried and true combinations. It depends on what I'm going for. Sometimes I want a lot of contrast. Sometimes I want something more smooth. Sometimes I want a desaturated, vintage look. It all depends.

When I'm uninspired, I just pick a color and try to make it work with other colors. There are some methods to picking these colors (I'm sure we know these from color theory), but sometimes I just try to stumble on something without really thinking too much about it.

The end result just kind of depends on my taste. I either like it or I don't. I tend towards two-tone imagery, so it's usually hard to find something that won't work. When I go beyond that is when real judgment takes place.

Dris (http://dris.webhop.org/)

#5

Dark Earthy tones. I love 'em. Use 'em all the time. Perhaps some day I will use lighter colors... not today.

Battlewax

#6

Getting the right color combination is the only reason why my site will never come online :) I can only work in shades of grey and white with some dark red or blue thrown in..anything else is beyond me.

There are different color schemes which have been found to work with different user groups, e.g red is an auspicious color in China while it spells financial doom in the US..

Google 'color theory' for some interesting articles.

This is another good color mixer -
http://kohaistyle.com/scripts/quickcolor/

And I think this link was posted here earlier but just in case -
http://www.adampolselli.com/getthelook/

jinesh (http://jinesh.org/)

#7

When designing a site for a client, I will usually pull colors from their collateral. The type company they are will also influence color choices. Some colors say "top notch corporation", others say "fun, light-hearted dating service".

Usually if a client has a set color palette, your color decisions are made for you, aside from how to use them in the composition.

I also seem to do a lot of monochromatic color schemes, selecting one medium tone color and using the lighter and darker values of that color for accents, then throw in a second color that compliments the scheme. http://www.hinman.org is an example of that, I think.

Personally, I like to stay to 2 base colors, and then use different hues of those colors. 3 colors is pushing it, anything beyond that and I think the composition starts to get too muddled.

When I redesigned my site (http://www.jeremyflint.com), I used the colors represented in the Red Hot sign, and that gave it sort of a retro feel I guess.

Jeremy Flint (http://www.jeremyflint.com)

#8

As for color palettes, I always keep the Visibone palette as my default palette in Photoshop.

They also have a pretty nice online color tool: http://www.visibone.com

Jeremy Flint (http://www.jeremyflint.com)

#9

I kinda like the bgcolor on CSSVault on a mac, but definitely not on a PC. It's just too close to black, it tricks the eye into thinking... "is that black or grey" and distracts from the content. A shade or three lighter and it'd be fine.

On the other hand, you could always use a brushed metal background tile... it is the css "vault" after all. :-)


And Justin! that's great! Thank you for posting it. I'm sending it out to all my coworkers with orders to bookmark it. heh.

JC (http://thelionsweb.com/weblog)

#10

Yeah, the background on the Vault does look like black on my PC.

I would maybe go with #666 instead of #333.

On my backgrounds, I usually prefer there to be just enough of a difference so that the content area seems to be floating above the background.

I think the darker background makes the content area seem smaller than it is, but that is just me.

Jeremy Flint (http://www.jeremyflint.com)

#11

I find dark colours very hard to work with. I'm normally one for minimilist design and clean colours, which normally rules out black and dark greys (but not always - one of my favourite designs was a black, ultra-minimilist piece).

But, the more I look at the new CSSvault design, the more I like it...

David House

#12

dddd

dd (http://ddd)

#13

Wow, first spam I've seen here so far. (post above)

Anyhow, about finding colors.... I'm not very good either, but I like playing around with the three-number hex color shorthand (assuming you already have some idea about what the site will look like). If I need a more precise shade, then I'll go into Photoshop and choose one.

Tom

#14

I would highly recommend colorimpact - http://www.tigercolor.com/ it gives you an eyedropper to select the base colour and then a myriad of alternative colour schemes to match it. You can then export the chosen colour scheme as a photoshop swatch file.

Scott Hutchinson (http://unidentified-frequency.net)

#15

Great online color tool:

http://www.defencemechanism.com/color/color_toy_fr.htm


Brian (http://savedbyzero.org)

Keep track of comments to all entries with the Comments Feed