Did you know that colour and visual elements activate the right brain (emotions), while the printed words activate the left brain (logic)? Colour and Typography remain to be the two most important elements in design. When you harmoniously combine them all you attract a quicker attentionx to the subject, reinforce impact and recognition, help in establishing powerful identities and brand, set a mood.
Today we’ll examine the DOs and DON’Ts in designing with colour, and next time we’ll investigate the topic of Typography.

Babies are colour-dominant: they are more attracted by colour than form. And even though we generally become more form-dominant as we mature, colour still plays an important role on how we perceive the message. For instance, why does red always call to attention? Whether you want to tweak the colours of your site, or design an ad or a poster to attract people to your products or services, or even paint the walls in your house, these colour essentials should help you in becoming more colour-wise.

DO take time to learn the colour wheel. All colours are
the colour wheel made up of three primaries: red, blue and yellow. When you combine the primaries, you get the three secondary colours: orange, purple and green. When you combine each secondary colour with its neighboring primary, you get six tertiary colours: yellow-orange, yellow-green, blue-green, blue-purple, red-purple, red-orange. That’s how you get the familiar 12-colour wheel.

Every colour has a temperature: from the red/yellow side of the spectrum it’s warm, and from the blue/purple side it’s cool. It has an intensity that’s described as saturation or chroma. Saturation is determined by how much or how little grey a colour contains. High intensity colours are pure, bright and vivid. Less saturated colours are muted, soft and subdued. Every colour has a value, determined by its lightness or darkness. When planning a colour combination, value and saturation are as important as the hue (synonymous with colour).

DON’T miss on understanding the basic colour wheel rules:

  • Most colours look great when combined with the shades in various values or intensities. These colour schemes are called Monochromatic, which consist of colours drawn from the same hue.
  • Colours also love to hang out with their next door neighbors. Any three neighboing colours on a 12 part colour wheel make up an Analogous colour scheme. They are always harmonious as they share the same undertones: yellow-green, yellow and yellow-orange. To add a bit more impact to the analogous group, you can expand it with another neighboring color, e.g. orange.
  • Opposites attracts, even with colours, and that’s how you get Complementary colours: they are the opposite hues on the colour wheel, that “complete” each other when used as a pair. Warm colours have cool complements and vice versa.

I found this handy Flash application that visually explains the colour wheel in an easy to follow style. There’s also a helpful HP colour wheel that showcases different colour schemes.

DO analyze the colour undertones.
spices If you like blue but want a subtle effect, choose a white or grey with a blue undertone. A red-orange terracotta pot has a yellow tone to it, hence those colours will blend harmoniously with each other. On the other hand, don’t emphasize an undesired undertone by pairing it with its complement: if the shade of brown has a pink undertone to it, combining it with green (the complement of red) will only intensify the problem.

Learn to identify colour tone, its warmth or coolness. A warm blue contains some red that makes it to look more purple, while a cool blue contains some green, which makes it more aqua or teal.
Do keep in mind that neutrals also have undertones. Often people will mistake grey for blue if there’s a blue undertone, or plum if the undertone is violet.

DON’T neglect the fact that colours ‘change’ according to their surrounding:
colour change case 1 A large rectangle and a narrow line (or type) of the same colour will seem to have different values when placed against a white background: the colour in the line will look darker than it does in the rectangle, because it’s surrounded by much brighter white space.

colour change case 2 When two shades of the same colour, one dark and one light, are paired with each other, the darker shade will look darker and the lighter shade will appear to be lighter: a pink rose will seem to be paler against a purple background.

colour change case 3 Larger colour spaces will affect the smaller ones: if a small square of medium yellow is surrounded by a larger area of black, the yellow square will seem to be brighter than when surrounded by white. Any colour will appear lighter against a darker colour and vice versa.

colour change case 4Outlining a colour in a darker shade will enhance the enclosed colour, helping to keep a colour from “spreading” into surrounding areas. On the other hand, a lighter outline will cause a colour to spread to adjacent colours, and reduce the strength of the enclosed colour.

This valuable tip comes from David Airey: There’s also the illusion how dark colours surrounding light ones will make the lighter area appear smaller than it is if it were the opposite (dark surrounded by light). It’s why you should always bump up the text size if you insist on using white text against a black background.

DO explore the colour psychology
While perceptions of color are rather subjective, and have different meanings in various cultures, some colours affect us in a similar way. The human eye sees warm colours before cool hues. Cool colours appear to recede, while warm colours appear to advance, however the degree of saturation can make a difference.

  • RED: With its aggressive, stimulating and sexy nature, assertive attention and provoking action, the red is impossible to ignore.
  • PINK: Depending on its saturation or value, pink evokes varied mood swings. Magenta and fuchsia are perceived as sensual and theatrical. But water-down the red in lighter pinks and the raw sensuality of red is replaced with gentle romanticism.
  • ORANGE: Inheriting some of the drama of red, orange is tempered by the friendly humour of yellow. It’s the colour that stimulates the appetite and radiates with warmth and vitality.
  • YELLOW: Yellow and black is the most unignorable colour combination in nature – tigers, stinging bees – it’s the colour that says: you’d better pay attention to me.
  • BROWN: Rustic, durable, wholesome and deliciously rich are just some of the traits of the colour that’s often associated with earth and home, substance and stability.
  • BLUE: Ever noticed how many corporations and financial institutions use blue in their brands? That’s because blue is seen as dependable and committed. It is also the colour we often associate with calm and serenity. Darken the blue and you’ll add an instant authority, credibility and power to it.
  • GREEN: Because of its association with nature and foliage, green in design can be used almost like a neutral colour: greens never clash with red or pink roses, yellow sunflowers, lilacs or bluebells.
  • PURPLE: It’s perhaps the most enigmatic and complex colour, with the range of meanings – from royal to elegant to spiritual to mysterious. Purple is often favoured by very creative and eccentric people who are not afraid of appearing daring.
  • WHITE: Not surprisingly white communicates purity, sense of clarity and simplicity. White is also perceived by the human eye as a bright colour, that’s why it works so well in contrast with all other colours.
  • BLACK: People see black as the most dramatic, heavy, powerful, classic colour with an up-scale look. Because of its extreme contrast to white, black and white is the quintessential combination of depth and clarity, power and innocence.

DON’T be afraid to experiment with colour combinations. Sometimes even the forbidden combinations work. Check out various online colour tools and applications that will help you to chose the right colour combination for your projects. Mac users can install numerous handy colour widget for the Dashboard: Adobe Kuler, Color Theory, ColorSchemer, ColorBurn.
UPDATE: I just found a great list of colour resources: Complete Color Matching Guide – it’s definitely worth to be bookmarked.

DO examine other sites and designs to determine which colour schemes are more appealing than others. In one of the upcoming weeks, I’ll be featuring sites that were designed with the excellent knowledge and sense of colour. Meanwhile, browse numerous CSS galleries, bookmark the sites with attractive colour schemes, thumb through the pages of various design magazines, books, not just the ones for graphic designers, but also architectural and interiour design publications, where you will be inspired by the innovative and fabulous colour combinations.

DON’T forget about the readability when combining
type and colour colour with type. It’s true that we mainly deal with the black type on white paper/page background, and that a black text on a light background is the easiest to read. However, it doesn’t mean that colour and type don’t mix. When used well, colour can add an emphasis to your message. Pay attention to the relative values and saturation of colours when a background colour interacts with coloured type. The contrast between type and background diminishes when their values move closer to each other, and the type becomes less legible. The contrast between the type colour and the background colour must be considerable to ensure that the type remains visible.

John from iLT also gives this valuable advice: “when using reversed out text (e.g. light on dark), it’s often advisable to make the text a little heavier, as the dark background tends to optically reduce the weight of the text.”

Hope you found this post as helpful as it was long. What other informative colour tips do you have to share with us?
I’m also submitting this as a Colour Tutorial to DBT’s group writing project. IF I win another $100 from Daniel, I will add them to the prize bank for participating bloggers who host social media group projects on their sites all through February 22, as part of the bigger Social Media Mega Project that started on January 21.

Recent Bits
Related Bits
What is Your Colour?
8 bits of Colour Inspirations
Signature Colours
Blog Redesign: First Steps – Inspiration And Ideas
Visual Design Essentials
If I Had 48 Hours In A Day
8 Things That Intimidate Me About Graphic Design
DOs And DON’Ts – Blog Feng Shui
Comment Bits

63 Insightful Bits in response to “DOs and DON’Ts – Colour”

  1. Cool article.

    The color psychology bit was pretty interesting. That is something I want to explore a bit more.

    One interesting site you didn’t mention is Colourlovers which I’ve been reading a fair amount lately.


  2. Thanks, Chris. I did though mention ColourLovers by linking to their “forbidden colour schemes” article, and also I linked to my 8 Bits of Colour inspiration post that talks about ColourLovers and other sites to draw the colour inspiration from ;-)

  3. I liked that flash application showing the different colour combos on the same publication. Nice colour meanings you have there.
    I would have liked to see some pictures with this post especially in the colour change section. Good luck on the writing project, I submitted too :)

  4. :-) Jacob, I was going to add the pictures, but was running out of time, wanted to submit to DBT before the deadline.
    I’ve just added some pictures to illustrate the colour changing cases. Let me know what you think.

  5. Much better :)

  6. Hi
    I come to know about your post through DBT project. You got a good post. :D

  7. Superb article, Vivien. You put a good lot of effort into this, and it’s a thorough round-up of what to remember.

    There’s also the illusion how dark colours surrounding light ones will make the lighter area appear smaller than it is if it were the opposite (dark surrounded by light). It’s why you should always bump up the text size if you insist on using white text against a black background.

  8. Good article..

    Reminds me of the colour and texture classes I had at uni :)
    Good refreshing for me :D

  9. Great guide I plan to bookmark this. Color has always intrigued me and if I ever design clothing I will definitely use this guide.

  10. Jacob, thanks for encouraging me to add more pictures to this colour guide ;-)

    Welcome to Inspiration Bit, Ashfame. Glad you liked this post, hope you’ll find more interesting articles here.

    David, you’re absolutely right about the light text on the dark background. I’ve just added your tip to my post, and credited it to you (linked to your new blog to pump its authority ;-)). Hope you don’t mind, if you do – let me know…

    Thanks, Jermayn. I like the layout of your blog – very interesting, haven’t seen one like that before. I guess green is your favourite colour, is it? ;-)

    Thanks, Selene. Is this what you want to do after “surviving” the high school – design clothing? All the best to you!

  11. oh, almost forgot to mention – I found a great online Colour resource with lots of links – all colour related, I’ve added it to this post in the “DON’T be afraid to experiment with colour combinations” section.

  12. @Vivien – Actually no green is not my favourite colour. I had actually never designed using green before and decided to use it and experiment with it. As you should never stick with your favourite golden old colours….

    New unexperienced colours helps bring out something :)

    Thanks for the look on my blog btw

  13. I agree, Jermayn, it’s more interesting to challenge ourselves than constantly sticking to our comfort zone.

  14. That’s very kind of you to update your post with me included. Of course I don’t mind. ;)

  15. Some very sound advice. Also when using reversed out text (e.g. light on dark), it’s often advisable to make the text a little heavier, as the dark background tends to optically reduce the weight of the text.

  16. Another awesome article, Vivien! You’re on fire!! :D

    You make a very good point about how colors change depending on their surroundings, something I forget about as a point when teaching others. I just know it intuitively.

    There is a really cool color psychology lens on Squidoo.

  17. This is fabulous. I love reading about color theory anyway, for my knitting projects, but it seems like every time I read one, I learn something new. Great tutorial!

  18. So much to learn and study. I’ll be back.

    This is a fine reference piece.

  19. David, glad you didn’t mind the link ;-) You know, I’m always eager to spread some link love to my fellow bloggers.

    John, thanks for your advice. I’ve included it to the last portion of DONT’s on Type and Colour, and linked to iLT. Hope you don’t mind it either ;-)

    Lauren, yes, I saw the Squido lens of the colourexpert – she certainly knows a lot about colour. You’re right about the intuition. When I was putting this post together, I was going through my design books on colour and web sites, and was often finding myself thinking – that’s exactly how I usually see it, but it didn’t occur to me that it’s how everyone will see these things.

    Thank you, Deb. I’m pleased you’ve learned something new from my little colour tutorial. You’ve got some very nice knitting projects going on your site. Good job! Last time I knitted something it was three years ago, while on maternity leave (when I had lots of free time that I don’t have anymore) – a few small things for my soon to be born daughter. She’s already outgrown the clothes, but at least I can still cover her with the blanket I made for her.

  20. @Leanderthal, Lighthouse Keeper
    thank you for checking out this post. Please, do come back to Inspiration Bit. You’ve got an interesting title for your blog – A Voice Crying in the Wilderness. I’ll be checking out what your voice is calling for.

  21. wow great article on colours. thanks for the advice!

  22. You’re welcome, Dito. Glad you found it helpful.

  23. Awesome tips, I really learned alot from this!

  24. Glad you found them useful, Michael. Btw, you’ve certainly got a very interesting profession – a voice-over artist?! I listened to the demo on your site – gosh, you sound so different with every voice-over session!

  25. Faye

    While your article was useful and informative, I cracked up with your use of the font comic sans in your “DON’Ts” picture. Haha.

  26. Thanks, Faye. I was wondering if anyone would notice my use of Comic Sans for the DON’T part, you’ve got a good eye ;-)

  27. Interesting article!

  28. Thanks, Fubiz ;-)

  29. Great article, great points on Colour psychology – thanks.

  30. tania

    hi, being a self taught designer, i think both my weakness and my strength is the use of colors.
    sometimes, its bold, and sometimes its drab,but thanks a lot for the basics.I shall keep them in mind, henceforth.

  31. You’re welcome, Tania. Good luck with your colour selections :)

  32. Nice article, I really like the Flash app that you have link to. Great stuff

  33. Thanks, Colin. The Flash app with the colours is very helpful indeed.

  34. lryd2l

    very good post

  35. Well this is a great post on colors. Really interesting and well explained.

  36. When I’m talking to one of my readers about harmonous color photography I try to teach them the basics of complimentary colors and what to look for in color dynamics.

    You explained it much more eloquently than I do.

    Damien Franco

  37. MO

    “BLUE: Ever noticed how many corporations and financial institutions use blue in their brands? That’s because blue is seen as dependable and committed… … …”

    OK, but, you should know that the human eye can distinguish more sades and tones of bleu than any other colour, and if you deal with different printers and different displays you may not have the best result with blue, if you know what I mean. :D

  38. @Mo: Thanks for your comment. Most colours have different shades and tones, but that still doesn’t change the fact that many corporations and financial institutions use blue in their brands :)

  39. Thanks Vivian, I was having difficulty in getting orange and wine colour for my icing sugar. your article has really helped me. I wont forget the colour wheel. please could you name the six territary colours.

  40. Bruna

    I love this article! Do you think it’d be ok if I translated it to Portuguese and posted on my website? Crediting you for the original, of course!
    Please, let me know!

    Thanks in advace!


  41. Hi Bruna. You can certainly translate it to Portuguese. Thanks and good luck.

  42. Thanks for the great post! I am an art teacher and this would be a great resource for my classroom. I would like to use this as a handout to give to my students– would you happen to have a PDF of the article that includes your graphics? I’d love to use it in my class!


    Heidi in CO

  43. Hi Heidi, you’re most welcome to use this post in your handout, as long as you credit the source, of course. No, I do not have the PDF version of this article, but you’re welcome to create it yourself and use the graphics in the post. Thanks.

  1. 3 Tutorials for you to read

    [...] How to use colour on your blog [...]

  2. Blog Writing Project: 5 Best Tutorials

    [...] DOs and DON’Ts – Colour by Vivien [...]

  3. progressive dinner is served!

    [...] dos and don’ts: colour i have noticed that what cats most appreciate in a human being is not the ability to produce food, [...]

  4. 4 tips to increase your Feed Readers (written by DailyBlogTips Writing Projects Participants) | JackBook.Com

    [...] DOs and DON’Ts – Colour by Vivien [...]

  5. Cool Blog Posts From My Fellow Contest Entrants - CoachLevi.com

    [...] DOs and DON’Ts – Colour by Vivien [...]

  6.   Blog Writing Project — Tutorials — Wayfarer Wings

    [...] DOs and DON’Ts – Colour by Vivien [...]

  7. My 3 Favorite Tutorials From Daily Blog Tips

    [...] DOs and DON’Ts – Colour by Vivien [...]

  8. What’s the Right Color for Your Logo? | Logo Design Works

    [...] For more information about this topic, I suggest you pay a visit to Inspiration Bit for it offers a comprehensive discussion of the dos and don’ts of colors. [...]

  9. My Picks for DBT's Jan Group Writing Project

    [...] DOs and DON’Ts – Colour by Vivien [...]

  10. My top 5 picks from Daily Blog Tips Writing Project

    [...] DOs and DON’Ts – Colour by Vivien [...]

  11. Tutorial Project, Part 2 | Ed Tech Hacks

    [...] DOs and DON’Ts – Colour by Vivien [...]

  12. If I Had 48 Hours In A Day » Inspiration Bit

    [...] 48 would’ve been even better. Then I could’ve easily read all 70 (no need to read mine again) tutorials that were submitted to DailyBlogTips project. The diversity of the tutorial topics [...]

  13. How to Write a Memoir to Remember Nominated for Best Tutorial

    [...] DOs and DON’Ts – Colour by Vivien [...]

  14. 8 Things That Intimidate Me About Graphic Design » Inspiration Bit

    [...] Vivien wrote the Do’s and Don’t of Colour, she might as well have said, “Don’t be like this guy” with a finger pointing at [...]

  15. Signature Colours » Inspiration Bit

    [...] your or your company’s birth year, like Tiffany & Co. did? First of all, study the colour psychology and decide which hue has a closer connection with what your business is all about by listing all [...]

  16. Erratic Souls » Colours

    [...] Do’s and Dont’s A good article about choosing your colours using a colour wheel [...]

  17. Colour tools, palettes, schemes and theory | David Airey :: Graphic and Logo Designer

    [...] DOs and DON’Ts – Colour [...]

  18. links for 2008-06-11

    [...] DOs and DON’Ts – Colour » Inspiration Bit (tags: colour reference webdev) [...]

  19. Deciding on Color » Internet Marketing Group Blog | Cedar Rapids | Iowa

    [...] are a few resources concerning color and theory from around the web: Adobe Kuler Inspiration Bit David Airey [...]

  20. Me, and Color. « Freelanced

    [...] http://www.inspirationbit.com/.....ts-colour/ [...]

Selected Bits





Hi, I'm Vivien. Thanks for visiting my Inspiration Bit. I often find myself scouring the internet looking for either answers to many questions I have or websites that inspire me, sites that I can learn from. On what topics you might ask — any topics that interest me, anything from web design to typography and art, from blogging to entrepreneurship, from programming to open source.
read more…
When I'm not blogging, I design web sites, teach, play with my daughter and try to balance family, work, friends and a somewhat active social life on