LearnFive Really Simple Colour Tips

Treehouse
writes on August 6, 2009

Colour is a powerful tool when it comes to design. It’s fun to work with and when you get it right it can really make a design.

I’m no colour expert so I’m not going to bore you with any theory but having worked with colour for a long time I there are a few really simple tips I’ve picked up along the way.

Editor’s note: We’ll be covering topics like Typography, CSS3, HTML5, Microformats and how to work with clients at The Future of Web Design Tour. Tickets are only £59.

1. Choosing a Colour Palette

Keep it simple, or go crazy. In between is no good.

I find using two or three colours plus some neutral tones works well for general use. Try picking two main colours – say a red and a blue then use tones of those two colours plus your neutral colour. If you start adding more colours without thinking, it can make your design less distinctive.

I’ve always been drawn to multi-coloured artwork. Sometimes this really works. Using all the colours of the rainbow (for want of a more technical phrase) can look stunning.

2. Steal all the Colour Charts

If you like being hands on it’s fun to mix and match colours using the Dulux colour charts you get in hardware stores. With minimal effort you can quickly get some colour schemes going. This is really good for when you’re meeting in a group and don’t want to huddle round your computer.

3. Use Colour to Communicate

Colour speaks to a viewer just as much as the copy.

Firstly it creates the mood of your design. So think about what your design is trying to communicate and pick a colour palette that you think expresses that mood.

Secondly, there are colour conventions. For example if you have a sale in a shop window it might be an idea to use a red and white graphic to communicate this, or at least use one flat bright colour with white. This just make sense because without even reading it we know what it’s saying. So if you want to break a colour convention like this you should have a good reason for doing so. I experienced a real life example of a broken colour convention very recently and it wasn’t pretty.

The other day I picked up a packet of crisps with out looking at what flavour they were. I thought they were Salt ‘n’ Vinegar flavour because the text on the packet was a medium-light blue. It turned out they were just salted! Needless to say I was very disappointed. Everyone knows that medium-light blue is Salt ‘n’ Vinegar flavour (at least in the UK), so they shouldn’t mess with that convention. This is just one example of how colour speaks to us and it’s something I think is important to keep in mind when designing.

4. Experiment and Have Fun with Colour

One thing that never fails me when colour backs me into a corner, is just going going a bit mad and experimenting with colour schemes you’d never normally try. It’s sometimes surprising what happens. I know this isn’t very scientific but it’s lots of fun.

5. Online Resources

Failing all of the above there a bunch of online resources that can help you choose a colour palette for you design. Here are a couple of the better ones.

Conclusion

Colour is fun and doesn’t have to be complicated. There are a ton of more complex articles on the web about colour theory but personally I find these articles boring and uninspiring. You don’t have to be an expert on colour to use it well.

If you have some time to spend thinking about colour just look online, in books, on posters at what other people do. You’ll feel way more inspired and informed about what colour palette to use on your next design than if you start reading lengthy articles on colour theory… unless you’re a painter or printer in which case the colour theory might come in handy 🙂

Above all have fun with colour.

Here are a bunch of designs I think use colour well.

Editor’s note: We’ll be covering topics like Typography, CSS3, HTML5, Microformats and how to work with clients at The Future of Web Design Tour. Tickets are only £59.

0 Responses to “Five Really Simple Colour Tips”

  1. Mlessing13 on April 22, 2011 at 2:25 pm said:

    I have tried Adobe Kuler, and it has been a good resource for creating color schemes. Recently, I have found Color Scheme Generator: http://colorschemetools.net/colorschemegenerator, which I’ve been using quite often, and it has been very helpful for polygraphic design layout.

  2. Best article on color that I’ve read yet! Thanks!

  3. thank you for the tips you gave. it really helps a lot because i am having a hard time when it comes to colors.

  4. Thanks for the tips. Color seems to be one of my greatest challenges when it comes to design.

  5. Stealing the color charts, what a great idea! Guess where I’ll be headed on my next visit to the home depot paint department?

  6. Nice color tips. Thank you.

  7. Nice article, nice tips for using the colors.

  8. I like the idea of using dulux colour charts to show clients. Thanks for that.

  9. Thanks loads for all your comments guys 🙂

  10. Hi Mike,

    Another fantastic article about graphic design (not ‘web design’). I am really pleased that Carsonified (particularly yourself and Ryan) have chosen to explore traditional graphic design as the subject matter for upcoming posts and conference talks etc and in doing so adding to the overall education of the web community with a solid set of skills and tools. This approach helps to make the web a more enjoyable experience for us all and also helps increase those ‘happy moments’ of the web designer/developer when things just come together.

    Thanks again, Michael Troy

  11. Hi Mike,

    Another fantastic article about graphic design (not ‘web design’). I am really pleased that Carsonified (particularly yourself and Ryan) have chosen to explore traditional graphic design as the subject matter for upcoming posts and conference talks etc and in doing so adding to the overall education of the web community with a solid set of skills and tools. This approach helps to make the web a more enjoyable experience for us all and also helps increase those ‘happy moments’ of the web designer/developer when things just come together.

    Thanks again, Michael Troy

  12. I feel ya on the crisp packet colors. I’m American but lived in the UK for a few years and that totally confused me. I kept thinking it was one flavor but it was really another flavor. It’s crazy that color association with something as simple as crisps can be so subconscious.

    Great article and resources though! Another great resource I love for picking color palettes is colourlovers.com but I love your idea of just picking up the paint color palette slips from a home improvement store.

  13. I feel ya on the crisp packet colors. I’m American but lived in the UK for a few years and that totally confused me. I kept thinking it was one flavor but it was really another flavor. It’s crazy that color association with something as simple as crisps can be so subconscious.

    Great article and resources though! Another great resource I love for picking color palettes is colourlovers.com but I love your idea of just picking up the paint color palette slips from a home improvement store.

  14. Great stuff! Color is one of those things that can make or break a website. In my recent makeover I chose to go super simple with just 1 main color on a neutral. Works for me…

  15. Great stuff! Color is one of those things that can make or break a website. In my recent makeover I chose to go super simple with just 1 main color on a neutral. Works for me…

  16. Great article Mike, really loving some of the newer articles since the new design was released 🙂

    Keep it up and i’ll keep reading and i’m sure other people will!

  17. Great article Mike, really loving some of the newer articles since the new design was released 🙂

    Keep it up and i’ll keep reading and i’m sure other people will!

  18. Some excellent points here! Its always very satisfying to watch a piece of work really come to life when you compliment it with the right colours.

  19. Some excellent points here! Its always very satisfying to watch a piece of work really come to life when you compliment it with the right colours.

  20. nice! i love art, i love colors, 🙂 gonna try kuler.adobe.com

    thanx

  21. nice! i love art, i love colors, 🙂 gonna try kuler.adobe.com

    thanx

  22. Along with the fantastically concise, useful information in this post, Mike does bring up a very troubling issue – crisp packet colouring ANARCHY. Walkers Salt and Vinegar are the IE6 of the crisp-munching community, but they’re only the most well known.

    I was in France recently, and did the same thing, picked up a blue crisp packet… but the flavour was definitely bacony. Meat-flavoured crisps in blue packaging? This is the kind of stuff Revelations warned about.

  23. Along with the fantastically concise, useful information in this post, Mike does bring up a very troubling issue – crisp packet colouring ANARCHY. Walkers Salt and Vinegar are the IE6 of the crisp-munching community, but they’re only the most well known.

    I was in France recently, and did the same thing, picked up a blue crisp packet… but the flavour was definitely bacony. Meat-flavoured crisps in blue packaging? This is the kind of stuff Revelations warned about.

  24. Owain Llewellyn on August 6, 2009 at 3:08 pm said:

    Thanks, some really good points there..

    I tend to use kuler for my web projects. I open up Photoshop and go wild…

    On a side note another good colour site is: http://www.colourlovers.com/

  25. Owain Llewellyn on August 6, 2009 at 3:08 pm said:

    Thanks, some really good points there..

    I tend to use kuler for my web projects. I open up Photoshop and go wild…

    On a side note another good colour site is: http://www.colourlovers.com/

  26. Try telling that to Walkers, for whom Salt & Vinegar is green, and Cheese & Onion is blue.

    Mind you, I suppose worcester sauce does taste kind of purple.

  27. Try telling that to Walkers, for whom Salt & Vinegar is green, and Cheese & Onion is blue.

    Mind you, I suppose worcester sauce does taste kind of purple.

  28. Has anyone tried to print color palettes with a usual inkjet? I’m still thinking if that is helpful or if one should invest some bucks in “real” palettes..

    What i would add is ColorSchemer Studio, a very advanced and professional Tool für creating color schemes. I think it’s one of the best tools for colors out there:

    http://www.colorschemer.com/

  29. Has anyone tried to print color palettes with a usual inkjet? I’m still thinking if that is helpful or if one should invest some bucks in “real” palettes..

    What i would add is ColorSchemer Studio, a very advanced and professional Tool für creating color schemes. I think it’s one of the best tools for colors out there:

    http://www.colorschemer.com/

Leave a Reply

You must be logged in to post a comment.

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more