Color is such a vast and variable element that it can be difficult to cover it fully in any one post. It can also be a little overwhelming when trying to implement it into your designs. Below are some sample color palettes, taken from classic color theory based combinations.
The color wheel is one of the first places I turn for color inspiration and guidance when choosing a color scheme. Color charts and pre-made palettes are nice, but the color wheel is simple and easy to understand and use.
Complementary Combinations
Complementary colors are easy to pick out; they are hues that are directly across from each other on the color wheel.
Red and Green
Red and green is one of the more difficult combinations to work with because it tends to remind everyone of Christmas. This is also a combination that is difficult for those with certain types of color blindness. To get away from the connotations with Christmas, try a darker shade of one color and a lighter tint of the other. Or use tints of both. This can have a very fresh, new feeling.
Yellow and Purple
For a richer twist, try making the yellow more of a gold.
Blue and Orange
Blue and orange are a very bold combination.
Although I’ve only listed the primary color combinations, any color that is directly across from another on the color wheel is a complementary color. Notice how each cool color—blue, purple, green—has a corresponding, complementary warm color—yellow, red, orange.
Triad Combinations
Triad means three, and these are also easy to figure out—just pick a color from the color wheel and go to the other two colors that are exactly a third of the way around the wheel.
Red, Yellow and Blue – The Primary Triad
These are the primary colors and generally coincide with children’s items (take a look at kids’ games, cartoons and toys).
Green, Purple and Orange – The Secondary Triad
These are secondary colors, created from the primary colors. The other colors along the wheel (tertiary colors) are blendings of the primary and secondary colors. The tertiary colors can also be combined into triad palettes.
Split Complimentary
These are different than triads, although they, too, have three colors. For a split complimentary, you take the two colors on either side of the color wheel from the direct complimentary.
Green, Red-Orange and Red-Purple
The direct complimentary of green is red, but on either side of red we have red-orange and red-purple. A split complimentary is half way between a full complimentary and a triad.
Orange, Blue-Purple and Blue-Green
You don’t always have to have a primary color in your palette!
Double Complimentary
Be careful with choosing a double complimentary color palette because too many colors can overwhelm the eye. Used strategically, though, this can be very effective.
Red, Green, Yellow and Purple
Isn’t it interesting to observe that you can’t have a double complimentary with all of the primary colors? The complimentary of a primary is a secondary color.
Yellow-Orange, Blue-Purple, Blue-Green and Red-Orange
Notice how this is similar in its base colors to the double complimentary above, but has a different mood.
More color palette explorations on Creative Curio
- Nature’s Color Palette
- Picking the Perfect Color Palette
- Need Color Inspiration?
- Finding Color Inspiration Around the Web
Things to Remember or Expert Advice
For more complex color combinations that are still harmonious, create shades (adding black), tints (adding white) and tones (adding grey) to the classic combination hues listed above.
Most colors can have multiple meanings. What blue says to the viewer, for example, whether sad or peaceful, is influenced by the other elements of design and the message of the piece.
The neutral colors like grey, brown and even white can enhance the unity of the rest of the colors if you give them a slight hue. Instead of pure grey, for example, add a touch of blue for a cool appearance, or as a less stark option for white, mix in some yellow or orange.
The warm colors—yellow, orange and red—are good attention grabbing colors and can be effectively used to highlight important information. This would be a good way to use a double complimentary palette; make these brighter colors less prominent. It’s probably not a good idea to make the actual text yellow, though, but rather have some other sort of highlight—an arrow or background box—signal the need for attention.
Other Color Resources
- Follow the Rainbow: 101 Color Resources for Web Designers
- Designer’s Guide to Color Combinations is a book that provides classic color combinations and real world examples
- Color Expert has some great Squidoo lenses on color meaning, symbolism and psychology
This has been the seventh and final installment in Real World Examples of the elements of design. Previously covered have been line, shape, space, scale, texture, value and color (part 1).
Have you subscribed to Creative Curio? (What is RSS?) Email subscriptions are available, too, and as always, both subscription options are absolutely free!
I love the way that you used the color wheel throughout the post to showoff the color combinations. Smart idea!
This reminds me of my 6th grade art teacher making us study the color wheel for at least a month in order to learn all of the terms and combinations. At the time I was mad because I had to do WORK in art class, but I’m glad that she pressed the issue.
To me color combinations are something that you have to both understand on an elemental level and then combine that information with an instinct that you gain from experience and past knowledge. Starting off with the basics is, of course, a smart move.
Jacob,
What can I say? I’m a visual person! I totally agree, there’s the theory and then there’s intuition. You need the foundation, but you also need the experience. Great observation!
I love http://www.colourlovers.com for finding great colour combos, you can then change the hues in photoshop to come up with other ones that work in the ways you mentioned.
I see your getting close to your 1000 readers mark.
Jacob Cass,
The thing I don’t like about sites like Colour Lovers (as cool as they are) is that the palettes often look good as palettes, but don’t work in a real design. And it can waste a lot of time skimming through the thousands of combinations. I do really like their blog, though. They often have some interesting facts on color!
Yup, it’s been hovering between 850 and 950 for the past couple of weeks. Care to let me in on your secret to 2500+ in 6 months? ;)
It depends how you are using the colours on CL, if you use the search tool to your full advantage it comes in very handy. I wrote another post on the best colour tools on JCD as well.
Secrets of 2500+? I did have a few very popular posts that brought many bursts of subscribers, other than that I guess it is just because I give an original perspective on learning design - that from the perspective of a Uni student studying design? And lots of hard work, reading and being part of the community. I try to do to others as I would like done to me and it works full circle I believe. Kind of hard to sum up 7 months work into a few paragraphs.
Jacob,
It’s a great time of life.
I so wish I had started blogging back in college (around 2003). I’m sure there are many things I’ve forgotten—stuff I struggled with, questions I had and tidbits professors taught—that would be great to share with people who are learning and I wish I could go back and refresh my memory! Not to mention the time I would have to build up a community and be more active… ha, I thought once I was done with homework and so many projects that I would have all the time in the world. Life gets so much more busy when school and a part time job isn’t your only responsibility anymore! Enjoy it while you can
Oh I am :)
Nice post. Hope you try out my online color utility colorspire to see if it helps or not. Thanks a lot!
LaurenMarie - I’m embarrassed to say I haven’t been to your site since the redesign (normally just read via RSS) - It looks great.
ColourLovers and ColorSchemer are two of my favorite color inspiration sites.
Kevin,
Tried out ColorSpire and if I could have a wish list for features, I would like it give me color suggestions. Like if I pick out a blue for my main color, I’d like it to suggest using orange as a complimentary or red and yellow for a triad, etc. I’m sure that some amazing programming would have to go into a resource like that though!
Char,
No worries! I have yet to really learn how to use ColourLovers, though I do read the blog from time to time. Some very interesting stuff on color from them.
Awesome reminder on color theory and usage! Another site that you could try out is kuler.adobe.com - it’s an awesome resource for color picking and throwing up color ideas.
Alfred,
Pleased you found it useful!
LaurenMarie,
Thanks for your suggestion and I’ll think about it in the future version of colorspire.
Kevin,
You’re welcome and good luck!
Nice blog. Got here through StumbleUpon.
Although I’m sure complimentary colors are very nice and polite, shouldn’t it be spelled complementary?
Nada,
Eek, you’re so right. Thanks for letting me know (and the laugh!)
Cool.
Hummm I forget what I would say, cause the labels about the options to post the comment are over the text boxes :P.
BRIO,
Too bad you forgot what you were going to say. If you think of it, do come back!
Colour my world
Nice colour wheels!
I use http://www.colourlovers.com/ and http://kuler.adobe.com/ to get my colour themes. Although at the end of the day its what works best on the eye and sometimes these pre-done schemes just don’t work visually.
Greg,
Yup, it takes a good designer to know what will work and what won’t and while there are a lot of pretty color schemes on those sites, some of them just aren’t practical. Good insight.
4 Trackbacks
[…] The Color Wheel and Color Theory […]
[…] The Colour Wheel and Color Theory […]
[…] The Color Wheel and Color Theory […]
[…] colors, LaurenMarie at Creative Curio reminds us that picking good color combinations is as easy as looking at your trusty color wheel. I felt pretty foolish when the article reminded me that you can find complimentary colors simply […]