You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Feb 13

Colors make half of your design, here is some advice

2004 at 01.40 am posted by Veerle Pieters

When designing a website from scratch, one of the first things that keeps you busy is defining the colors you will use. Sometimes finding the right colors can take some time. First you think about the purpose of the product or company to define the shades. For instance if it has something to do with nature you think about green shades. Then there is the factor that one might like the combination of colors but others don’t, you have to try to figure out what the client would like. Or if it’s your personal blog then it should be your favorites shades of color.

It often starts with the creation of a logo. Then the color(s) of the logo is the starting point to define a total style, or house style. This is the 2nd step. You define a set of colors that fits with the logo. This color set should be very limited this way you get a stronger brand or identity. Besides colors you also have to think about typefaces etc. and much more, but I'm not going to get in detail now about this. Once you got your style you can start designing.

Here are some of the shades that I used for projects:

color shades

When you choose your shades you should keep one thing in mind that there should be enough contrast between them. For instance if you have a set of 3 colors, then 1 color should be in contrast with the 2 others. By contrast I don't mean opposite colors (like green - red, or yellow - blue). I mean 2 light colors and one darker color. Or you can have a light color, medium light color and dark color.

If you are really stuck on colors and you can't find the right combination try out one of the color sliders below. It might trigger some ideas.

Jeff Croft did an excellent article about the use of blue in lots of big brands and companies (like IBM, AT&T etc.). It seems that blue is a generic, calming color that is well-liked by both genders. If anybody wants to share their amazing color combinations, personal thoughts, tips or tricks or whatever, just leave your comment. I might integrate the coolest color combination in this post. Thanks!


22served

gravatar

1

permalink this comment Sintra Fri Feb 13, 2004 at 02.28 am

You just made my day with this post!!! :)
This utility will save me lots of time.


gravatar

2

permalink this comment Roger Fri Feb 13, 2004 at 03.29 am

Great tool Veerle, I think I would go for the middle ( red version ) . I always like the site which could adapt to your moods by clicking on the side to change colours and backgrounds ( can’t find them right now) and those were added in a cookie, so next time you visted, it was your site feeling again. Great and addaptive. Try it on your site too !
BTW, the Blue(s) are wide spread over the internet, so red and grey is a very solid alternative. Perhaps I should change my You2us in red too ? ( I have to admit I’m a little colourblind , so some combinations are not too bright for me ;-) so feel free to advice a colourblind )


gravatar

3

permalink this comment Travis Cripps Fri Feb 13, 2004 at 05.24 am

Thanks for the great tips!  I agree that it’s extremely helpful to start with a good color palette.  Unfortunately, It’s also something that’s often hard for me to pin down.  I think these tools will help make it easier! :)


gravatar

4

permalink this comment Travis Cripps Fri Feb 13, 2004 at 05.40 am

Sorry to comment twice, but I just ran across Color Scheme and I thought it worth mentioning here.  It offers the ability to see colors in different “bands,” which would address the comment about color-blindness. Enjoy.


gravatar

5

permalink this comment Veerle Fri Feb 13, 2004 at 06.08 am

Travis: don’t mind posting twice, post as much as you want if all tips are that helpful ;-) I’m glad people find my post helpful and believe me you aren’t the only one getting stuck on color schemes. Me too, sometimes I choose something and then the next day I change my mind. In my experience it’s often when you got a superb feeling about it that you’re on right track.


gravatar

6

permalink this comment Roger Fri Feb 13, 2004 at 06.17 am

Ah, just what I was looking for, the Color(-blinds ) Scheme!  ;-)
I see I’m going to have to change some minor colors. Thanks anyway !


gravatar

7

permalink this comment brian w Fri Feb 13, 2004 at 08.16 am

I quite ike a little OS X utility called Painter’s Picker that helps you pick complementary colors right in the color picker in whatever program you’re using.


gravatar

8

permalink this comment Mike G Fri Feb 13, 2004 at 08.39 am

I’ve always liked this website as well.  Comes in handy a lot.


gravatar

9

permalink this comment Sharif Fri Feb 13, 2004 at 10.06 am

Adam Polselli’s “Get The Look” page is also incredibly useful. He’s got some great color schemes and examples…


gravatar

10

permalink this comment GaBuBu Sat Feb 14, 2004 at 05.05 am

Veerle, i took the chance to translate your post in .es language ( btw, u living in Spain then ... or your Ibiza talking is just in holidays? ) in my webpage. I was just about to post Adam’s “Get The Look” thing that i read like some days ago… but i just c he already did.

Take care!


gravatar

11

permalink this comment Veerle Sat Feb 14, 2004 at 05.27 am

Hi GaBuBu (your name sounds a bit African to me LOL), I live in Belgium and yes it’s from holidays that I spent there and hope to spend again this Summer or in the years that come. It’s also because I like that island a lot (good memories, nice atmosphere, music, cool clubs, gorgeous sunsets etc.). Are you from Spain then?


gravatar

12

permalink this comment GaBuBu Sat Feb 14, 2004 at 06.56 am

Nop, I am from Spain! nick name since small kid! :D Yap, i am from Madrid, but i spend most of my holidays in the island! I use to work in Pacha or Amnesia! Take care in .be then!


gravatar

13

permalink this comment shad Mon Feb 16, 2004 at 02.34 pm

I know this is a bit late, but I just found this today…

ColorMatch Remix

Nice cross-browser support :)


gravatar

14

permalink this comment Veerle Tue Feb 17, 2004 at 03.16 am

Shad: It’s never late to post, especially if it is as usable as this ;-) Most people check the comments often, so this is definitely helpful. Thanks


gravatar

15

permalink this comment Dave Child Thu Jul 1, 2004 at 09.13 am

Wow. Just wow. That tool is astounding. I have a hunch I might be using that on a very very regular basis from this moment on!


gravatar

16

permalink this comment Alexis Bellido Fri Jul 16, 2004 at 01.11 pm

Hi, I really like getting color schemes from photographs, Adam’s examples are great inspirers to do it right.

Currently I am working in a blog designer for my 3 years old daughter, Beatriz, and I am getting color samples from her pics, let’s see what I get.

Regards!


gravatar

17

permalink this comment dongqi Thu Jul 22, 2004 at 01.10 pm

I really like your little icons. If you can give me some ideas on how to creat them that would be great! Did you use Photoshop to creat them?

I appreciate it!

Thanks,
Dongqi


gravatar

18

permalink this comment Jeff Croftr Sun Aug 1, 2004 at 07.16 pm

Veerle-

Great article! Thanks for the link. Glad the article about blue was of assistance!


gravatar

19

permalink this comment yin yee Wed Aug 4, 2004 at 04.15 am

Just want to say Thanx Veerle!! and also to the rest of the contributors, loads of useful links for a beginner like me. Thanx!


gravatar

20

permalink this comment soo Sun Nov 14, 2004 at 11.03 pm

Thanks to everybody I am still awaken at 5 in the morning ... You don’t give me a chance to close the browser… T.T;
I wish I could add some useful stuff someday.
Cheers!


gravatar

21

permalink this comment Ivan Mon Oct 31, 2005 at 04.43 am

The first link (“Colors in flash”) doesn’t work ...


gravatar

22

permalink this comment Veerle Mon Oct 31, 2005 at 06.01 am

Thanks for letting me know Ivan, I’ve removed the URL in my article. Too bad it’s not online anymore :-(



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist