Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Color Theory for Designers: How To Create Your Own Color Schemes

In the previous two parts of this series on color theory, we talked mostly about the meanings behind colors1 and color terminology2. While this information is important, I’m sure a lot of people were wondering when we were going to get into the nitty-gritty of actually creating some color schemes. [Content Update: August 2017]

That’s where Part 3 comes in. Here I’ll be talking about methods for creating your own color schemes, from scratch. I’ll cover the traditional color scheme patterns (monochrome, analogous, complementary, etc.) as well as how to create custom schemes that aren’t based strictly on any one pattern. By the end of this article, you’ll have the tools and skills to start creating beautiful color palettes for your own design projects. The best way to improve your skills is to practice, so why not set yourself a goal of creating a new color scheme every day?

Further Reading on SmashingMag:

A Quick Review Link

Let’s start with a quick review of what was covered in parts 1 and 2. In part 1, we talked about how all colors have inherent meanings, which can vary depending on the country or culture. These meanings have a direct impact on the way your visitors perceive your site, sometimes consciously and sometimes subconsciously. The colors you choose can work for or against the brand identity you’re trying to create.

Spices

In part 26, we covered color terminology: hue (what color something is, like blue or red); chroma (how pure a color is, the lack of white, black or gray added to it); saturation (the strength or weakness of a color); value (how light or dark a color is); tone (created by adding gray to a pure hue); shade (created by adding black to a pure hue); and tint (created by adding white to a hue). These are important terms to know as we move forward and create our own color schemes.

Traditional Color Scheme Types Link

There are a number of predefined color scheme standards that make creating new schemes easier, especially for beginners. Below are the traditional schemes, with a few examples for each.

Color Wheel
The basic, twelve-spoke color wheel is an important tool in creating color schemes.

Monochromatic Link

Monochromatic color schemes are made up of different tones, shades and tints within a specific hue. These are the simplest color schemes to create, as they’re all taken from the same hue, making it harder to create a jarring or ugly scheme (though both are still possible).

Monochromatic schemes are easy to create, but can also be boring when done poorly. Adding in a strong neutral like white or black can help keep things interesting.

Examples:

Here are three examples of monochrome color schemes. For the most part with these schemes, the first color (if we look at this from left to right) would likely be used for headlines. The second color would be used for body text or possibly the background. The third color would likely be used for the background (or body text if color #2 was used as the background). And the last two colors would be used as accents or within graphics.

Monochrome color scheme blue
Monochrome color scheme pink
Monochrome color scheme yellow

Analogous Link

Analogous color schemes are the next easiest to create. Analogous schemes are created by using three colors that are next to each other on the 12-spoke color wheel. Traditionally, analogous color schemes all have the same chroma level, but by using tones, shades, and tints we can add interest to these schemes and adapt them to our needs for designing websites.

Examples:

analogous-traditional
This is a traditional analogous color scheme, and while it’s visually appealing, there isn’t enough contrast between the colors for an effective website design.
analogous-modified
Here’s a color scheme with the same hues as the one above, but with the chroma adjusted to give more variety. It’s now much more suitable for use in a website.
analogous-tradpink
Another example of a traditional analogous scheme.
analogous-modpink
And the above theme modified for use in a website design.

Complementary Link

Complementary schemes are created by combining colors from opposite sides of the color wheel. In their most basic form, these schemes consist of only two colors, but can easily be expanded using tones, tints, and shades.

A word of warning, though: using colors that are exact opposites with the same chroma and/or value right next to each other can be visually jarring (they’ll appear to actually vibrate along their border in the most severe uses). This is best avoided (either by leaving negative space or by adding another, transitional color between them).

Examples:

comp-purplegreen
A wide range of tints, shades, and tones makes this a very versatile color scheme.
comp-redgreen
Another complementary color scheme with a wide range of chromas. Notice how placing the brighter red and green colors next to each other, a sort of “vibrating” quality is achieved on their edges. Be aware of this in your designs and make sure it’s done intentionally, if it all.
comp-orangeblue
Don’t forget that beige and brown are just tints and shades of orange.

Split Complementary Link

Split complementary schemes add more complexity than regular complementary schemes. In this scheme, instead of using colors that are opposites, you use colors on either side of the hue opposite your base hue.

Examples:

split-yellowgreen
A scheme where yellow-green is the base hue. It’s important to have enough difference in chroma and value between the colors you select for this type of scheme.
split-red
Another palette with a wide range of chromas.

Triadic Link

Triadic schemes are made up of hues equally spaced around the 12-spoke color wheel. This is one of the more diverse color schemes. They can be difficult to do well, but add a lot of visual interest to a design when they are.

Examples:

triad-berry
Using a very pale or dark version of one color in the triad, along with two shades/tones/tints of the other two colors makes the single color almost work as a neutral within the scheme.
triad-red
Alternately, using one very bright hue with paired muted hues makes the single bright hue stand out more.

Double-Complementary (Tetradic) Link

Tetradic color schemes are probably the most difficult schemes to pull off effectively.

Examples:

tetradic-red
A rather unimpressive tetradic color scheme. The best way to use a scheme like this is to use one color as the primary color in a design and the others just as accents.
tetradic-pastel
Tetradic color schemes can work well for creating color schemes with similar chromas and values. Just add a neutral (such as dark gray or black) for text and accents.
tetradic-dark
It works just as well for darker color schemes.

Custom Link

Custom color schemes are the hardest to create. Instead of following the predefined color schemes discussed above, a custom scheme isn’t based on any formal rules. Keep in mind things like chroma, value, and saturation when creating these kinds of color schemes.

Examples:

industrygiant7
The colors here all have similar chroma and saturation levels.
palisadespark8
Again, using colors with similar chroma and saturation is effective and creates a sense of cohesion across a color scheme.
50schristmas9
Using one color with a high chroma among other colors with lower chromas is another effective method (the higher chroma color wouldcan act as an accent).

Creating A Color Scheme Link

Creating your own color schemes can be a bit intimidating. But it’s not as complicated as many people think. And there are quite a few tricks you can employ to create great color palettes right from the start.

danceofcolors10

We’ve been over the different types of color schemes above. Now, let’s try creating a few of our own. There are plenty of tools online that will help you create a color scheme, but let’s forget about those for now and just use Photoshop.

Let’s try breaking away from the color scheme types already mentioned, and create some custom palettes (which is what a set of colors that don’t follow one of the predefined traditional patterns are technically called). While it’s important to know the ways that different colors interact and how traditional schemes are created, for most design projects you’ll likely create palettes that don’t strictly adhere to any predefined patterns.

So, for the purposes of our project here, we’ll create three color palettes each for two different websites. Our hypothetical clients are a fitness app and a high-end women’s subscription box service.

We’ll start with a basic monochromatic scheme, just to get a feel for each. While I mentioned that traditional color scheme patterns aren’t used as often in design, monochromatic color schemes are the exception to that rule. You’ll likely find yourself using monochromatic schemes on a fairly regular basis.

Monochromatic scheme, with light gray added in as a neutral

For our subscription box site, here’s a traditional monochromatic scheme, with light gray added in as a neutral.

Color scheme made up of shades and tints of gray

For our fitness app, we’ve gone with a color scheme made up of shades and tints of gray.

Almost a split-complementary color scheme but with yellow and a muted red along with gray

This is almost a split-complementary color scheme, but we’ve used yellow (which is complementary to purple) and a muted red along with gray.

Adding a couple shades of red to the gray color scheme adds a lot of visual interest and the potential for creating extra emphasis on certain parts within your designs.

Adding a couple shades of red to the gray color scheme adds a lot of visual interest and the potential for creating extra emphasis on certain parts within your designs.

We’ve gotten rid of the purple and yellow, and instead kept the muted red and added in some blues.

Sometimes your color palettes will grow and evolve as you add more colors. Here, we’ve gotten rid of the purple and yellow, and instead kept the muted red and added in some blues. It’s a cleaner, more modern palette that better fits the brand.

While this color scheme at first glance looks like another standard gray and red palette, if you look more closely you’ll see that the grays are actually tones of blue.

While this color scheme at first glance looks like another standard gray and red palette, if you look more closely you’ll see that the grays are actually tones of blue. Blue and red make up two thirds of a tetradic color scheme, but work just fine together without yellow, especially when the red is kept pure but the blue is toned down to the point of almost being gray.

Why Shades, Tones, and Tints Are Important Link

As you can see from the color schemes above, using tints, tones, and shades in your color schemes is vital. Pure hues all have similar values and saturation levels. This leads to a color scheme that is both overwhelming and boring at the same time.

colorblotchedpaper11

When you mix in tones, shades, and tints, you expand the basic 12-spoke color wheel into an infinite number of colors for use in your designs. One of the simplest ways to create a professional looking color scheme is to take a few tones, tints, and shades of a given color (avoiding the pure hue), and then add in another pure hue (or close to pure) that’s at least three spaces away on the color wheel (part of a tetradic, triatic, or split-complementary color scheme) as an accent color. This adds visual interest to your color scheme while still retaining a sense of balance.

Adding in Some Neutrals Link

Neutrals are another important part of creating a color scheme. Gray, black, white, brown, tan, and off-white are generally considered neutral colors. Browns, tans, and off-whites tend to make color schemes feel warmer (as they’re really all just tones, shades, and tints of orange and yellow). Gray will take on a warm or cool impression depending on surrounding colors. Black and white can also look either warm or cool depending on the surrounding colors.

neutralcolors12

Black and white are the easiest neutrals to add into just about any color scheme. To add a bit more visual interest, though, considering using a very light or very dark shade of gray in place of white or black.

Adding browns, tans, and off-white hues are a bit trickier, but with some practice you’ll find adding them gets easier. For browns, consider using a very dark, chocolate brown in place of black. A pale off-white can be used in place of white or light gray in many cases. And tan can be used in place of gray, as well (create a tone by adding some gray to make it even easier).

Using Photos for Color Schemes Link

One of my personal favorite ways to create a color scheme is to use a photograph. There are automated tools online that can do this automatically for you (the Adobe Capture CC mobile app is one of them, and my personal favorite), or you can do it in Photoshop yourself.

Using Adobe Capture, you can upload an image or use your camera. This is great for times when you might be inspired by a physical object. You can also grab an image from your Creative Cloud account, the market, or Adobe Stock. If you’re stumped for what colors you want to use in a website design, try searching for related words on Adobe Stock. Sometimes this can result in finding color schemes that you might not have thought of on your own.

The great thing about Adobe Capture is that you can easily import your color palettes to Illustrator or Photoshop (or just view the hex codes to find the correct colors for any other program you’re using). Find a photo you like on Adobe Stock (or take one yourself), one that you think evokes the feeling of the design you want to create. I took this one:

Photo of an illuminated building.

Here’s the original color scheme that Capture gives us when using this image:

The original color scheme that Capture gives us.

One of the coolest features Capture has for creating color schemes from images is their “Select a Mood” option (this is a carry-over from the old Adobe Kuler app). Included here are Colorful, Bright, Muted, Deep, and Dark. These are the schemes we get when using each of those moods with the same photo:

The schemes we get when using each of those moods with the same photo.
Colorful Mode
Colorful
Bright Mode
Bright
Muted Mode
Muted
Deep Mode
Deep
Dark Mode
Dark

Let’s try another one, something more colorful this time. Here’s the original image we’ll work with:

Flower

And here are the five color schemes that Capture gives us from this image:

Colorful mode
Colorful
Bright mode
Bright
Muted mode
Muted
Deep mode
Deep
Dark mode
Dark

There are some great palette generator apps out there if Capture isn’t your thing, including the Canva Color Palette Generator13, Coolors14 (which also has an Adobe add-on and an iOS app), and Paletton15.

The Easiest Color Schemes Link

We’ve touched on this a bit before, but adding a bright accent color into an otherwise-neutral palette is one of the easiest color schemes to create. It’s also one of the most striking, visually. If you’re unsure of your skills in regard to creating custom schemes, try starting out with these types of palettes.

Here are a few examples to give you an idea of what I’m talking about:

easiest-red
easiest-chartreuse
easiest-pink
easiest-lightblue
easiest-blue
You can see here how using browns instead of grays makes the entire scheme look warmer, even with the blue accent color.

You can use tones of any color instead of gray or brown in this type of scheme, just keep it very close to the gray end of the spectrum for the most fool-proof results. As a general rule, cool grays and pure grays are best for more modern designs. For traditional designs, warmer grays and browns often work better.

How Many Colors? Link

You’ll notice that throughout this post we’ve used color schemes with five separate colors. Five is a good number that gives plenty of options for illustrating the concepts here, and it’s a workable number in a design. But feel free to have more or fewer colors in your own schemes.

coloredpencils16

A lot of websites might only use three colors in their designs. Others use only two. And some might use eight or ten (which is a lot trickier than using fewer colors). Experiment and use as many or as few colors as you need to for your design. But you may want to start with a palette of five colors, and then add or subtract as you see fit and as you progress through the design process.

The easiest way to add a color is to start with one of the predefined, traditional color schemes and then work out from there. That at least gives you a bit of direction as far as which other colors to consider.

10 Sites With Great Color Schemes Link

To give you more inspiration, here are ten websites that have excellent color schemes. Some of the schemes below might look a bit odd at first glance but seeing how they’re actually used shows the wide range of possibilities color schemes can present.

Big Top17 Link

Big Top18

Scheme:

Color scheme Big Top

Secret Key19 Link

Secret Key20

Scheme:

Color scheme Secretkey

TCM Summer Under The Stars21 Link

TCM Summer Under The Stars22

Scheme:

Color scheme TCM Summer Under The Stars

Like There Is No Tomorrow23 Link

Like There Is No Tomorrow24

Scheme:

Color scheme Like There Is No Tomorrow

Lorenzo Verzini25 Link

Lorenzo Verzini26

Scheme:

Color scheme Lorenzo Verzini

Quotery27 Link

Quotery28

Scheme:

Color scheme Quotery

Nearly Impossible29 Link

Nearly Impossible30

Scheme:

Color scheme Nearly Impossible

Alchemy Digital31 Link

Alchemy Digital32

Scheme:

Color scheme Alchemy Digital

Mailchimp33 Link

Mailchimp34

Scheme:

Color scheme Mailchimp

Fight For UX35 Link

Fight For UX36

Scheme:

Color scheme Fight For UX

Conclusion Link

We’ve really only just touched on color theory in this series. There are color consultants who have literally spent years refining their ability to choose colors that are appropriate to any situation and that can complement any brand.

The best way to learn to create beautiful color schemes is to practice. Create a scheme on a daily basis. You can use automated tools to do this at first (like Capture’s tool for creating schemes from images), or just open up Photoshop or Sketch and start.

If you see a particularly beautiful or striking color in your daily life, try creating a scheme around it. And take advantage of all the sites out there that let you upload your color schemes and organize them for later reference. This makes all those color schemes more practical and easier to use in the future.

Further Resources Link

Here are some additional resources that should help you in creating your own color schemes, as well as some links with more information about traditional color schemes.

The Whole Series Link

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/
  2. 2 https://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/
  3. 3 https://www.smashingmagazine.com/2012/10/the-code-side-of-color/
  4. 4 https://www.smashingmagazine.com/2016/04/web-developer-guide-color/
  5. 5 https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/
  6. 6 https://www.smashingmagazine.com/2010/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/
  7. 7 http://kuler.adobe.com/#themeID/722376
  8. 8 http://kuler.adobe.com/#themeID/706775
  9. 9 http://kuler.adobe.com/#themeID/711794
  10. 10 http://www.flickr.com/photos/josefstuefer/5681426/
  11. 11 http://www.flickr.com/photos/8078381@N03/2710142168/
  12. 12 http://www.flickr.com/photos/kellyhogaboom/3737547073/
  13. 13 https://www.canva.com/color-palette/
  14. 14 https://coolors.co/
  15. 15 http://paletton.com/
  16. 16 http://www.flickr.com/photos/nikonvscanon/3267138841/
  17. 17 http://bigtop.it/
  18. 18 http://bigtop.it/
  19. 19 https://www.secretkey.it/
  20. 20 https://www.secretkey.it/
  21. 21 http://summer.tcm.com/
  22. 22 http://summer.tcm.com/
  23. 23 http://www.like-there-is-no-tomorrow.com/
  24. 24 http://www.like-there-is-no-tomorrow.com/
  25. 25 http://lorenzoverzini.com/
  26. 26 http://lorenzoverzini.com/
  27. 27 http://www.quotery.com/
  28. 28 http://www.quotery.com/
  29. 29 http://nearlyimpossible.org/
  30. 30 http://nearlyimpossible.org/
  31. 31 https://alchemy.digital/
  32. 32 https://alchemy.digital/
  33. 33 https://mailchimp.com/
  34. 34 https://mailchimp.com/
  35. 35 https://fightforux.com/
  36. 36 https://fightforux.com/
  37. 37 https://www.smashingmagazine.com/2016/04/web-developer-guide-color/
  38. 38 https://www.smashingmagazine.com/2012/10/the-code-side-of-color/
  39. 39 http://www.creativebloq.com/colour/tools-colour-schemes-12121430
  40. 40 http://www.color-wheel-pro.com/color-schemes.html
  41. 41 http://www.colormunki.com/pantone?class=palette_page_nav_link#
  42. 42 https://coolors.co/
  43. 43 http://www.colourlovers.com/
  44. 44 https://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/
  45. 45 https://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/

↑ Back to top Tweet itShare on Facebook

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of The Smashing Idea Book: From Inspiration to Application.

  1. 1

    Very useful series of article.
    Thanks Cameron :) SM Rocks :)
    Keep up :)

    3
  2. 2

    great article, helped me a lot to better understand color philosophy :) thanks

    3
  3. 3

    Kuler is a great tools for designers to come with great sets of color combinations.
    http://www.appsheriff.com/web-apps/design/kuler-explore-create-and-share-color-themes/

    -6
  4. 4

    Great article!

    -7
  5. 5

    hi guys
    well Adobe has a very nice webpage to handle colors you can check it below
    http://kuler.adobe.com/#themes/rating?time=30

    -5
  6. 6

    just say…………….”wow”

    -5
  7. 7

    Kartlos Tchavelachvili

    February 8, 2010 4:52 am

    Kuler is Cool :)

    -7
  8. 8

    shrikumar hegde

    February 8, 2010 4:56 am

    Color Theory for Designer series are one of the best tut bundle in smashingmagazine.
    every designer should read it.
    Thanks Cameron Chapman

    -4
  9. 9

    A big article…Need a lot of time to study this 1.. phew
    but, neverthless it will be very helpful as your other articles.. :)

    -7
  10. 10

    Thanks for this good article I really like the 10 examples.

    -6
  11. 11

    Don’t forget ColorImpact in the Further Resources. It’s more feature packed then Colorschemer. I takes quiet some exploring to root out all the features. I prefer it to any other out there.

    tigercolor.com/

    5
  12. 12

    When I first started designing, I was a little intimidated by color-usage. It’s one of the most difficult things to grasp when designing. But especially your simple color-schemes mad of grays with only one accent-color work very well for beginners.

    When you get more comfortable in working with this stuff, you can add and experiment, and eventually you’ll notice you have a preference for a specific amount of color. (I noticed that my ideal amount is exactly 6 colors.)

    Awesome round-up! Well written, and highly practical for designers. Thanks!

    -6
  13. 13

    Mikael Halén

    February 8, 2010 6:10 am

    Thanks for yet a great article. I reallt needed some information on this to be able to step past the analogous schemes.

    -6
  14. 14

    Martin Bentley Krebs

    February 8, 2010 6:37 am

    Thank you so much for putting this series together, Cameron. It’s great to refresh our knowledge with articles such as these, and it’s extremely helpful to have it presented so thoroughly. It’s evident that you put a lot of time and effort into preparing this — well done!

    -8
  15. 15

    Absolutely brilliant. Great resource. Thanks very much.

    -7
  16. 16

    Colour is by no means my strength so thanks for sharing your thoughts!

    A lot to take away and use in future designs.

    Cheers,

    Lee.

    -6
  17. 17

    Great Article, i like the combination of colors and i will use these combination of colors in my next design :) Thanks for sharing.

    -6
  18. 18

    Great series of articles, especially for a novice like me. Can’t wait to play around with Kuler.

    -6
  19. 19

    I’ve found that colorhunter.com produces some pretty good color palettes.

    -6
  20. 20

    For those of you looking for an easy way to generate tints and shades based on a color scheme, I wrote a simple tool at http://www.highintegritydesign.com/tools/tinter-shader/

    It only does one thing– you give it a bunch of hex color codes (from your palette) and it generates ten tints and ten shades for each color in your scheme. I use it for text colors, panel colors, form backgrounds etc that I want to fit into my schemes. Hope you find it useful!

    2
  21. 21

    Great 3 part article. Funny as that despite never really `learning’ colour theory (was more trial and error over the past 18-19 years) it would seem I have been following these principals regardless. Well done SM. You’ve taught an old dog some more tricks. More of the same please.

    -6
  22. 22

    thanks for the 3rd part, part1&2 where just great

    -6
  23. 23

    Thanks so much! My site is listed as one of those 10 examples of great color schemes and I’m very proud of it! :) And It’s very much appreciated because I’m a fan of smashingmagazine.

    Regards and thanks!

    -12
  24. 24

    Thx for featuring joyproject.it :)

    -9
  25. 25

    Thanks Cameron for listing my site. I’m very happy to see it here.

    -10
  26. 26

    wow, I love these colors

    -11
  27. 27

    Edison A. Leon

    February 8, 2010 8:15 pm

    Ahhh, Thank you!

    -11
  28. 28

    littlelabster

    February 8, 2010 8:19 pm

    nice color, very interesting color. I want this to my site.

    -10
  29. 29

    Wooo…!!! thankx again Cameron…!!

    -14
  30. 30

    Great article! I’ve read lots of articles and books on this subject and have always come away perplexed. At last, I think I’m starting to understand how to use colors. The website examples at the end are terrific! I’ll have to come back and study this again.

    A great follow-up article might be to show the process of choosing which colors from a scheme to use for which purposes on a website. E.g., how do you choose a font color vs. a background color vs. an accent color, etc.

    -6
  31. 31

    great article

    -4
  32. 32

    That’s a great tutorial (and series of) thank you Cameron.

    The only thing that I find challenging as a fellow web designer is how much to use of each colour.

    Colour schemes are easy enough to find and create (thanks to your great tutorial) but I find the real trick is balancing the colours in the scheme based on their percentage against the other colours. For example, if you have white, light grey and red, how much red can you use before it over powers the grey and white, and is the overpowering a good thing or not.

    I guess that comes into the realm of tints, shades etc that you exaplined in the tutorials, however, it may also be difficult, if not, impossible to educate people on the balance of colour presence. It always takes me a while to shift colour power balance in order to make the page ‘feel’ balanced enough that I can say “Yep, that’s pretty good, I’m happy with that…ship it”

    I would hate to have the job of trying to explain what makes me finally ‘feel’ that the colours are balanced and I guess that is why most colour theory tutorials have to skip this concern, as it is just too difficult to help someone understand what makes a website colour theme balanced as I assume it depends on the elements that make up the website as well as the photo/graphic elements.

    Anyway, just thought I’d add that. I guess website colour balance comes down to experience and lots and lots of practice.

    -5
  33. 33

    Free check your website worth:
    WebsiteReckon.com outstanding web analytic tools on the internet today. You can use it for FREE. More than website value calculation, are target specific Traffic, pageviews. Fantastic!

    -11
  34. 34

    What a great article. Colour is so important and it’s so hard to achieve a sense for it. Thank you for this post!

    -7
  35. 35

    Hmm, kuler doesn’t seem to be working well with Flickr at the moment. Invalid API key and an inability to search by tag. Shame, really.

    -4
  36. 36

    This is very informative! We enjoy following color trends and found some interesting information on the color blue: http://bit.ly/aQmgP9

    Thanks for sharing!

    -6
  37. 37

    Aravind Jose T

    February 9, 2010 10:49 am

    WoW1
    Brilliant series.

    And thanks to the readers who dropped in some awesome links in their comments.

    -7
  38. 38

    This has been a very nice series. Thank you for all the time and effort on this.
    I do think that some of the descriptions on the website’s could’ve been better in the last 2 articles but still, great job.
    This will definitely help me in the future and I think I’m ready to use Kuler more and more these days. Well done!

    -7
  39. 39

    lo quiero in spanish…

    -8
  40. 40

    Tommy Callaghan

    February 9, 2010 7:33 pm

    Wow! Two of my sites listed as examples. Thank you very much!!!

    -8
  41. 41

    Pankaj Tiwari

    February 9, 2010 8:05 pm

    Thanxxx a lotttt ……. its really gr8…. Keep it up

    -7
  42. 42

    WoW !!!!!!!!!!!!
    Brilliant series.

    -7
  43. 43

    I wish to wknow which combination of 3/4/5 different colors I can use so that their printing in balck/white mode is acceptable.

    -8
  44. 44

    u luk lovely….

    -8
  45. 45

    Bravo! This is a fantastic series of articles.

    -7
  46. 46

    Great article!

    I am new to the subject. I feel enlightened and inspired!

    -9
  47. 47

    Great Article! But you’ll never be 100% sure, if there had been created a color palette before designing/developing the website itself.
    Maybe some people just have hit the bull’s eye with their color combination, without knowing anything about color theory?! :-)

    -8
  48. 48

    It’s a great article!!!

    -9
  49. 49

    Wow! Good Stuff!

    -6
  50. 50

    This has been an excellent series. I’ve read a lot of colour scheme tutorials, but they just go into all the Traditional Schemes, which as you say aren’t actually used that often. Hence I’ve tried messing with Kuler and ColourLovers only to end up with horrible schemes.

    It’s nice to have an article that actually shows how to go about creating REAL colour schemes for use in real life. It seems like I need to be doing a lot more messing around with Tints and Tones, and less with pure colours.

    -7
  51. 51

    Thanks !!! to Cameron, Smashing… what a wonderful world ! :)

    4
  52. 52

    Danny Halarewich

    February 24, 2010 6:27 pm

    Thank you for showcasing two websites that I designed! Wentings.com and LemonStandapp.com

    I did not create a defined color palette prior to designing the website. However, I do know something about color theory and I use this knowledge when designing the site. I sort of organically define the exact palette as I go, and consciously make sure all of the colors work together and give off the vibe I’m going for. I also try to make sure the colors I’m using are consistent.

    That being said, with both of the sites featured here we created the brand identity first. This included much of the color palette, which I then kept using throughout the websites while adding a complimentary color or two.

    -12
  53. 53

    Thanks a lot, Cameron, this comprehensive collection will help a lot in finding the colours I need for projects. Really great job.

    The only thing that puzzled me is the different suggestions you give concerning chroma and saturation. In both cases you warned in part 2 against using colours of similar chroma next to each other and recommended either using the same chroma or an entirely different one to avoid jarring effects. Contrasting that, in this article you suggest using colours of similar chroma in some situations. Am I correct in assuming that this issue is just concerning colours right next to each other, and colours with similar chroma should accordingly not be used adjacent to each other?

    What is odd is that you also say that similar chroma creates harmony, shouldn’t it be the same chroma/saturation?

    -4
  54. 54

    Jude Stewart

    March 11, 2010 1:10 pm

    Super-fantabulously good, Cameron. I just published a post on PRINT outlining the 50 best color sites for designers, which is a good companion piece to this series:
    http://www.printmag.com/Article/50-Best-Color-Sites-for-Designers

    I blog twice monthly about color, too. Check that goodness out here:
    http://www.printmag.com/Author/Jude%20Stewart

    Keep these excellent articles coming!

    -7
  55. 55

    Good article & very informative.

    I have to say though, that I found a few of the sites you gave as examples rather ugly. I guess different color schemes mean different things to different people.

    Thanks for the article in any case! : )

    -6
  56. 56

    A nice way to sample colors from a photograph in Photoshop is to use the Mosaic filter (filter > pixelate > mosaic). It will split the image into a grid of colors that you can easily see. Not as cool as Kuler, but effective.

    -10
  57. 57

    sandeep chandoli

    April 23, 2010 5:38 am

    wow what beautiful

    -8
  58. 58

    Injected Valley

    April 26, 2010 3:51 pm

    Perfect.

    -4
  59. 59

    Awesome article on color theory, this really helped me make my sites pop and is a great reference. Thanks again!!!

    -5
  60. 60

    thanks , great tutorial

    -2
  61. 61

    Brett Widmann

    November 6, 2010 7:08 pm

    This is very helpful. I see some palettes and I wonder how they even exist because they dont match at all! Thanks for sharing the way to do it.

    -2
  62. 63

    Thank you for this … it’s really helpful. I’m not always that keen on color schemes but I’m becoming more intuitive thanks to these helpful blogs and tutorials.

    -7
  63. 64

    I always get confused about the coulours but After reading this info helped me to understand that how colours works. It really usefule and i’ll recommend this to others. I loved it and i’ll visit this site againg.Thank you

    -6
  64. 65

    extremely useful article ………. jus loved it ……….. helped a lot

    -7
  65. 66

    You are a great Designer, thank you so much for your knowledge sharing !!!!!

    -6
  66. 67

    Arati jadhav

    March 28, 2011 2:33 am

    excellent……….

    -6
  67. 68

    Might I simply say what a alleviation to discover somebody who essentially realizes just what they’re talking about on the internet. You definitely can bring a major issue to light and enable it to be valuable. Even more people need to read it all and understand this aspect of the story. I can’t believe you are not more popular because you really have the gift.

    -8
  68. 69

    sureshayyampilly

    May 4, 2011 6:25 am

    excellent

    -6
  69. 70

    The only thing that puzzles me is that lack of web safe colors are you suggesting that designers need not worry about the colors they decide on be web safe?

    -7
  70. 71

    Good article, thanks
    Now I have a ‘guide’ on choosing the right color combination for web design.
    Keep writing! :)

    -5
  71. 72

    Excellent.

    -8
  72. 73

    It’s laborious to search out educated folks on this subject, nevertheless you sound like you already know what you’re talking about! Thanks

    -8
  73. 74

    Great and very informative, continue posting these kind of helpful articles.

    with thanks

    -4
  74. 75

    I must say tis has been a very useful article.. I have never come across any tutorial which talks about the importance and usage of different colors and the right meaning of the terminologies.. Even part 3 which talks about the color palettes was very informative.. Thanks a lot Cameron…Waiting for more such articles..

    Cheers,
    Gowri

    -7
  75. 76

    Know I’m coming late to this discussion, but I found myself revisiting these three posts at work today, and wanted to thank you for the – dare I say it? – smashing info.

    I also thought I’d share my long-time favorite color quote, from Marc Chagall: “All colors are the friends of their neighbors and the lovers of their opposites.”

    -7
  76. 77

    I’m late to comment too, but I was looking on tips/tools for making the speccing part of palette creation easier… I mean, I make my palettes in Illustrator, and when I’m happy with the selection, then starts the pain: finding & typing out the hex, rgb and cmyk values for each swatch. Might there be a plugin or other tools to automate this or at least make it a bit less painful?

    -10
  77. 78

    Great tips! I had the concepts and basic schemes down, but this was a great reminder to use tints, shades and tones to let just one pure hue stand out. A lot of my schemes had competing purer hues that fought for attention. Just tweaking this helped tremendously.

    -6
  78. 79

    Excellent simple information. My students will love it

    -8
  79. 80

    Love the quote “All colors are the friends of their neighbors and the lovers of their opposites.”
    I will use it in class. Thanks

    -3
  80. 81

    Best practical guide to color theory on the web. Thanks for posting!

    -4

↑ Back to top