Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Colour Schemes

May 14, 2004

A designer’s ‘style’ is made up of a number of different factors, though colour plays a large role. Everyone has their own method of coming up with a good colour scheme, which will inevitably affect the results.

Technical

A ‘technical’ method of colour-selection involves choosing one or two dominant colours from the colour wheel, to be used with a small set of complementary colours. Basic colour theory concepts like split complementary and triadic colour schemes offer a wide range of variation, particularly when you start throwing in shades, tints, and saturation adjustments.

Technical colour scheme samples

Pro: An easy way to start with good, workable colour. Con: being too technical can lead to dull and uninspired colour choice.

Matching

Matching involves starting with an image or an object (usually a photograph) and picking colours from within to generate a colour scheme. Boxes and Arrows ran a great article a while ago about selecting colours from nature.

Matching colour scheme samples

Pro: Naturalistic, familiar-feeling colour schemes that appeal. Con: it’s easy to select the wrong colours from a photo.

Intuition

Probably my most frequently-used method. I begin with a blank canvas and fill it with whatever colours seem appropriate. Naturally my mind computes the corresponding compliementary and similar colours on the fly, but now and then I’ll ignore solid colour theory just to see where it gets me. Hence this site’s colour scheme, among others.

Pro: Fresh and surprising colour schemes. Con: dangerous without a solid knowledge of colour theory. Dangerous even with.

These are a few of my own methods, and what influences my design sensibility. Others will differ, of course. Tell me about your own methods, comments are open.


Reader Comments

1
Keith says:
May 14, 01h

I rely pretty heavily on “eyeballing” colors and perhaps a combination of the last two options you talk about. The color scheme for Asterisk started as selections from a photo. I think it came out alright.

I don’t like going the technical route. One, because I’m not well versed in color theory and, Two I prefer the creative freedom of doing it based on intuition.

2
May 14, 01h

The method I’m most likely to use is intuition. Every now and then I’ll use something like ColorMatch Remix ( http://color.twysted.net/ ) to find complimentary colors, but I prefer the flexibility that just playing around with a color wheel affords. Even when using something like the afore mentioned tool, I often tweak the resulting colors.

Another method that I use (that you really need to be careful with ;) is looking at other sites. Obviously, you need to be careful not to swipe their entire color scheme, but it’s a good place to find a base.

3
meashman says:
May 14, 01h

I always try and use the “naturalistic” approach, or pulling the colors from a photograph or other graphic element to be used. I usually only do this after loading a safety palette.

My latest site however, http://thebrambles.biz has a color palette that is derived from the house itself…the red being the main color, the yellow the color of the doors, and the blue accent the color of the halls. The brown serves as a neutral to tie everything together (hopefully!).

4
Dina says:
May 14, 01h

I like WebWhirler’s color wheel- it generates a random 3-color selection that is great for jumpstarting color inspiration! http://www.webwhirlers.com/colors/spinwheel.asp

5
Lea says:
May 14, 02h

Oh, wow, awesome. I do tend to go to the “naturalist” photographic route. It just works, you know? I always do that initially–but sometimes I tweak it by working with color wheels and what not afterwards if I’m not satisfied with what I initially got.

6
Al Abut says:
May 14, 02h

I came across a series of tutorials way back that ended up providing my color selection scheme. In it, there were “how to” sections on the various styles that were in at the time - Grungy, Techno, etc - and in the Clean section was a tip on making good monochromatic layouts. Start with one color, gray, blue, doesn’t matter, make the entire layout in various shades of that color, then add one or maybe two highlight colors to differentiate important items. Although it came from a cheesball resources, that technique has proved useful to me on many a project.

7
May 14, 03h

I might not be the best source of advice, given my weak (in comparison to others in this thread, anyway) design skills, but I tend to use the photograph method. The way I try to get around the “wrong color” problem is to expand the selection area. In Photoshop 5.5– yes, I’m that far behind– I go up to the 5x5 sample size; in OS X, I use the DigitalColor Meter and run its aperture up to the max.

With the sample area as wide as possible, I target the area where I like a color, and get the average of the area. It avoids the problems that can come from posterization, although it potentially introduces others, especially if you have an unsteady hand.

Anyway, that’s the method I used to pick the text colors for the mastheads on meyerweb, basing each one on some part of the background image and then lightening or darkening the shade if necessary.

8
May 14, 03h

I like the idea of taking colours from nature. But as you said, it can be dangerous also.

I wrote a small entry on the subject a little while ago:
http://www.wubbleyew.com/blog/showblog.asp?blogID=200

I used the same technique to develop the WinterWubb design on my portfolio site : www.wubbleyew.com

However, the last suggestion, Intuition, is probably the one I use most often. I don’t always have the time to go out and find colour schemes froma bush!

9
Terry says:
May 14, 03h

I think you can’t go wrong with copying nature. It’s kinda like having the hand of G-d selecting the color scheme for you :)

One sure way of capturing the colors in a photo for sampling is to generate a color table with photoshop.
Open up a nature pic you want to sample. Goto Image > Mode > Indexed Color. A dialog box appears and you can choose many options but the end result when you hit OK is that a previously grayed out option appears under the Mode menu. Goto Image > Mode > Color Table…

You now have captured all the colors in that image based upon what options you chose when indexing the colors. To prove to yourself that all the colors in the pic are there just click on the eyedropper in the color table and sample a part of the pic you indexed, you’ll see which color it corresponds to in the color table if the preview mode is checked. You can save the color table as a .ACT anywhere and load it later in your swatches palette to use anytime you want.

I just thought I’d mention this as its a more thorough way to capture all the colors in an image than the method mentioned before about pixelating/posterizing it.

10
Sage says:
May 14, 04h

I do it pretty much by intuition.

First, I decide whether I want a warm/bright site, or a colder/darker site (depends on target audience and what’s being presented, of course).

Then I choose colors that I feel fit into the category I’ve chosen. I make one color that will be used extensively, especially for backgrounds, one color for “brand identity” (especially in the logo), and one color associated with links.

From there, I work with shades and textures and that junk.

11
Terrence says:
May 14, 04h

My color selection M.O. is a hybrid of techniques. But I always begin with a word or phrase like: “Regal” or “Ancient Heroics” – used in my Zen Garden Submission: http://www.csszengarden.com/?cssfile=/103/103.css&page=0 – or “Feminine Macabre.” I try to force myself to accomplish this step because it sets the “rules” for which I will play by as I progress.

Then I try to conjure images that have given me the feeling that the word/phrases represent…or, if I have no visual memory (which is rather seldom) then I hunt for the images.

Then once I have the image(s) chosen I take the most vocal and expressive colors in each, form a palette and whittle down and tweak those colors until I reach a solution.

12
Haunani says:
May 14, 10h

Lately, I’ve been picking color schemes from what inspires me, which can be the colors of someone’s shirt, or as of late, from food. Yes, I’ve been picking colors from favorite foods such as, chocolate covered raspberries with caramel, or mangos and soy sauce (a Hawaiian favorite), sushi…

I figure that we visually know if food is appealing to us, and I’ve extrapolated that paradigm to picking colors.

Once the color scheme is picked out, I go to visibone’s color lab (http://www.visibone.com/colorlab/) and play around until I get the right combination that matches technically.

Don’t laugh..it works! :)

13
May 14, 11h

I tend to work with color “shades” often.

I will select one or two colors that fit well together. Then i select one to be the “dominant” color. This is usually the lighter or softer of the two colors. I use the bolder/brighter of the two as accents. Links, headers, and borders seem to show up nicely this way.

I then take my dominant color and will grab a shade darker and a shade lighter, so i end up with about 4 colors, but really its only two colors with “screens” of one.

For example on my own site, http://www.jeremyflint.com, I have gone with a sort of “retro red and blue” scheme. I use the blue and various shades of it for the majority of the color and I use the red for accesnts.

I’m not sure how I got started on this type of color theory, but it seems to work well, atleast for me.

14
May 14, 12h

One thing you can do with the photograph approach, which is always a great approach I think, is to posterize or pixelate the photo heavily. This can make finding the base shades a bit easier. No gaurantee, but it can help.

15
May 14, 12h

I usually pick one color, and then let ColorMatch (or for those of us who enjoy standards-based browsers .. ColorMatch Remix) do the work.

ColorMatch: http://www.colormatch.dk/
ColorMatch Remix: http://www.neddevinesboston.com/neddevines/

16
Josh S says:
May 14, 12h

Thanks for this… I’m always interested in seeing other people’s ideas about color theory. One of my big weakpoints in design is color selection–something I wish to change!

17
May 14, 12h

For personal sites I usually just start off with basic white junk witth black content on top and then when I’m finished with form, I try to get the function thing happening. I get the color theme in there near the end through assuming something might look good with something else. I am usually right, and I should be because I’m a graphic designer, but sometimes I make ugly things without realizing it. I hope I don’t assume things while raising children and create monsters.

my URL is a bad example, because although I did choose the font colors, there is a big apple logo with apple blue desktop stuff. It’s my background, so I snipped it up and threw it in there for filler. That’s why it says it’s just a demo =) oh, and I know the spanish is terrible. hehe

Interesting topic to discuss, I never really thought about this.

18
Dave S. says:
May 14, 12h

“posterize or pixelate the photo heavily”

Not a bad idea. The only flaw is that you’re limited to the dominant colours; sometimes the colours pulled out of a photo come from just a few pixels of accent that would probably blur into something else. Still, that could work as a nice starting point.

19
karsh says:
May 14, 12h

One thing I’ve done for grabbing colors from photographs is to do a pixel stretch on an area of the photo which has some dominant colors. Then I just magnify the pixel stretched portion in photoshop, grab the colors, and I’m good to go.

20
MJH says:
May 14, 12h

Is there a redesign in progress thats made you think about some color theory, Dave? Following Digital Web’s footsteps, maybe?

I know nothing about color theory (as proven by my blog’s design), but I’ve always felt that the colors of this sight was a bit flat for my taste. Almost “heavy”, if thats possible. What do I know though, I’m a programmer-type.

Good post though, I’ll look into this “color theory” thing.

21
Bas Burger says:
May 15, 01h

Funny that you mention that you used no color scheme for this site. I see a predominantly harmonious scheme with some split complements. You are right when you say that intuition is important. It is important not to be scared with experimentation as that is your icing on the cake when designing anything. Still single most important factor of a designers work is “Does the work you make communicate the right thing for what it is made for”. Design, like music can communicate in very special ways and reach feelings unheard of with speech or written words.

22
elivy says:
May 15, 03h

www.colorwhore.com is a great website for finding a cool coloy scheme.

23
Malarkey says:
May 15, 04h

I often find it tricky to design a colour scheme when I have to work around a client logo or company colours. I often groan when I see their favourite pillar-box red (looks cool on a truck, but aggressive on a monitor).

I have posted one of my favourite techniques for Creating colour palettes on http://www.stuffandnonsense.co.uk/archives/000021.html and I find it really works in a lot of tricky cases and helps to ‘tone down’ some aggressive colours too.

24
Tazz says:
May 15, 04h

I started out using color theory, complementary colors etc. but now its only thru intution, emotions and nature. Like you showed how colors were derived from the photos of nature, I do something similar, picking colors off photos of animals, birds, dense forrests, flowers and so. Who else is the greatest artist of all but The Almighty.

25
Ondrej Valek says:
May 15, 04h

Here’s another fine color selector

http://pixy.cz/apps/barvy/

You can even test there how people with different color-blind-type deseases would actually see those colors. It may be usefull if you want to print your page on a greyscale printer.

26
May 15, 10h

I took a look at Color Match Remix, and it was cool, but I couldn’t figure out (okay, I didn’t try very hard) what algorithm it was using to choose the colors. So I made my own color scheme generator that uses a number of standard color wheel based methods (monochrome, triadic, analogous, complementary and split complementary). You can find it at http://css.geckotribe.com/colorwheel/ .

27
panta says:
May 15, 11h

I usually start in a white/grey canvas and just play around for half an hour, with some color theory in mind, but no problem when comes to change/rearrange concepts based on intuition.

I just never imagined the idea of taking references from a photo (well maybe i did it unconsciously based on my good photografic memory, but don’t think it’s the same :)). However I think it’s a great idea and I will share it, but of course potentially dangerous, maybe not for the result itself but for you, for your creative inspiration that if you never apply with some color intuition may fade in that direction.

However i think I will use it sometimes and use a 5x5 color picker and pixelate image, but before pixelate, blur it (low radius, 10 or similiar) to avoid that pixelisation can enphatize dark or noisy pixels.

Cya

28
Damion says:
May 16, 07h

Although I am no where near a graphic designer or even a real web developer, whenever I need to come up with colors, I start with Fluxbox (a window manager for X) themes:

http://www.fluxmod.dk

Many of the styles there have interesting color schemes that spark ideas.

29
Root says:
May 16, 08h

Thanks for publishing this and to the commenters; thanks for all the useful links. For many of us newish web builders, once we are beginning to get on top of the css, we have mental energy to turn towards a more detailed understanding of color and indeed typography. All this kind of stuff really helps us. The real beauty of the blogging mentality is that even homesite builders can see and read how the experts are doing it. It is very hard to think of any other field of endeavour where that is true. Thanks.

30
Javan says:
May 16, 10h

When starting a new site I always ask the client for any existing design elements that they have and like. I try to use those as starting points to create new color schemes. If I’m starting from complete scratch, I like using a photo to sample colors from. I generally choose colors using my intuition, and sometimes use online or software based color schemers to aid me.

I had never noticed that the sample size of the eyedropper can be changed in photoshop. Thank you to Eric Meyer for pointing that out.

31
sunup says:
May 16, 11h

>I usually pick one color, and then let ColorMatch … do the work.

it’s a great pity that ColorMatch doesn’t work in my browser of choice (Mozilla1.6).
every time i want to use it, i have to fire up IE, then wait for the nausea to die away before i can play with it :P

32
May 17, 01h

Why not move out of the realm of nature and into the realm of art? Pick up some pictures of paintings and let the artists training and intuition work for you. You still have to pick the right colors from the works, but sometimes picking the wrong colors can lead to (I can’t believe I’m going to quote Bob Ross) “happy accidents.”

33
Tommi says:
May 17, 03h

I blogged about color pickers a while ago, so I have some neat links over there. I also added some of the new ones here there.

http://www.bloggidity.com/web/2004/03/01/color_harmony_picker_for_223.htm

34
Miriam says:
May 17, 07h

Haunani mentioned Visibone - sometimes if I’m stuck I’ll click on eight random colors, then start by removing the one the clashes the most. Keep removing the clashers and you end up with 3-4 colors that work together that you might not have thought about.

Generally, though, I end up back at the naturalistic approach.

35
Rob says:
May 17, 09h

I use the Intuition Method. I’ll usually start with one color that I’d like to use, then build from there with 2 or 3 accent colors. My brain just figures them out on its own without any intervention from me. ;)

When I redesigned my company’s site at http://www.amronintl.com I actually ended up with 6 different sites! I put together seperate mini-sites for each industry and came up with different color palettes for each. However, common elements between the sites (like the Account Info bar at the top right) stay the same color throughout the sites.

Colors just kind of flowed from throughts about the industry: diving is blue, medical is green (similar to OR scrubs), tactical is green/brown, military is desert tan. I even got to design seperate logos for each mini-site, again along the theme of that industry.

I kept the homepage grey since it’s the landing point and the source for all of the other sites. The juicy Flash movie gives you a quick overview of each section with a big, colorful photo and a little motion to catch the eye. The photos also complement the colors in each section.

36
JB says:
May 17, 10h

Haven’t seen it mentioned so far, so here’s another resource:

Adobe Magazine had an interesting (if scientific) article on color perception and choice from November 1996.
http://www.adobe.com/products/adobemag/archive/pdfs/9611febf.pdf

Triplecode has a Flash “Munsell Palette” app based on this article and work at MIT Media Lab that helps illustrate its mention in the article above. It’s my personal favorite color tool.
http://www.triplecode.com/munsell/

37
Susanna says:
May 18, 01h

Even after coming up with a carfully crafted palette, I sometimes find that I’m lacking certain shades when I actually start styling the site. I use the Color Blender (http://www.meyerweb.com/eric/tools/color-blend/ ) to find, for example, a shade that’s between the blue I’m using for links and the gray I’m using for the header.

38
May 18, 11h

Color Selection Is a Tough Job, One can be inspired by anything and too many things can confuse too, Happens all the time with me , then i rely on softwares to do the intial judgement and use my mind to do a fine selection.

40
May 19, 05h

Hmm… wow. Good post.

I love color, and flipping through Pantone swatch books is a favorite pastime of mine. All that said though, personal preference plays a big role… in a couple of ways.

There are certain colors that I am naturally drawn towards (yellow and orange for instance – I’m sure you’re shocked). I tend to use these colors a lot in my personal work. However, given the nature of a project, I will intentionally choose colors I am not as personally fond of, simply to stretch my awareness of color.

I do look for color a lot in nature and in cultural heritage as well. I enjoy finding Asian, South American, and European art and architecture a great source for color inspiration.

Beyond that, and this is truth, I ask my wife.

I may be looking for a 4-color palette and have three of the 4 colors picked. I’ll ask her to pick a 4th, and invariably she’ll come up with the most amazing color that I would’ve never chosen on my own accord.

Know what colors you like, then learn to branch out… drastically at times.

41
Terry says:
May 21, 09h

Just came across a wonderful resource!!
http://www.hypermedic.com/color/index.php

Thought I’d share.

42
walter says:
May 26, 07h

Hi Dave,

I really enjoyed the article. Although I know CSS pretty well, I’m a programmer - not a designer so, by my own admission I have no taste. I’ve taken your idea of natural colors to heart (site uses colors from banner image at top), combined it with Dan Cederholm’s mountaintop-corners and made a pig’s ear of the whole thing at http://www.xanadb.com. In it’s defense, the markup is clean and minimal but it still looks like it’s been designed by a programmer.
Just goes to show…

p.s. Not sure I like the new proton scheme, but then again - who am I to judge ?

43
holly says:
May 30, 10h

One of my favorite websites easyRGB ( http://easyrgb.com/ ) helps one pick colors for web, walls, etc … it also has a neat math section and more.

Not too long ago, I stumbled across this SVG color tool. Very interesting color combos can be derived. You will need an SVG plugin to try the tool, Color Swatch Generator ( http://www.grorg.org/2002/06/color.svgz ), by Dean Jackson (SVG, w3c.org) and based on Kevin Lindsey’s colour picker ( GUI, http://www.kevlindev.com/gui/ ) .

Working in art so many years – color choices are part intuition and part formal training – it is often hard to separate the two. And sometimes, picking something just outside the predictable range produces some excellent results.

On a flip side, I also apply color theory when I am planting my gardens. Purples against Greens, Oranges against blues or purples, etc. So, though color can come from nature, color theory can be applied to natural areas or settings to produce some lively effects.

Look at art for examples, too. Sometimes, I will ask a particular client what types of art they find compelling, to get a feel for the way their tastes run. Check master works like van Gogh (whose work with opposites produced many lively and memorable pieces), Gauguin (some exciting combinations). Pissaro, Renoir, Manet, Monet for subtle impressionistic tones, and too many others to list, each fitting into some sort of *color climate*.

I once read a tip about color choice for others that had to do with looking at what they buy, wear, or how they decorate their surroundings. Find those special client colors and work up a few variations built on theories or schemes.

44
Daniel says:
July 20, 12h

Here is a terrific link: http://www.defencemechanism.com/color/