Sickdesigner

Hey everyone. Today we’re talking about choosing the right colors for your project. This is one of those articles that transcends mediums and focuses more on style and feel. We will be dealing not only with choosing your color palette but also making a predefined palette work even in some of the grimmest situations.

First let me start by saying that this article will NOT go through color theory. There are plenty of very good learning materials all over the web, and you will find some of the better ones, in my opinion, at the end of this post. Yeah, me being one of the good guys, I link to others.

We WILL go through some of the processes I usually go through when I get a new project. And by far, at least for me, and I suspect for some, if not most of you as well, the hardest part of starting a project is choosing a good color palette.

Our scenario is pretty fortunate and unfortunate at the same time. It’s a good thing because you get to have the creative freedom we all adore so much but at the same time you have no clue whether the client will approve of your, however educated, choices. Which is why this seems to me the most challenging scenario when it comes to colors.

I’m going to run with a particular scenario for this article, one in which the client does not provide you with any color choices of his own, nor any company graphics. It’s all up to you to make the right decisions.

Now, whenever I get something like this, and it happens more often than not I like to use a little trick I made for myself which I shall gladly share with you: my little company color card. Yeah, that’s right. It does what it says. And here it is for your enjoyment and perhaps slight learning experience. (It’s a pretty big picture so be patient if it doesn’t load up at lightning speed).

I made this because I stumble upon a lot of the same type of clients, and by type I mean field of work. I must have made about 20 designs for car shops in the last year or so, and that’s just one example. This little chart has come in handy more than once, I have to tell you, and it really speeds things up and kind of takes me out of that “early design phase where you don’t know what to do”. Granted, I don’t respect it strictly and neither should anyone. It’s merely a guide of sorts and hopefully it will help you as much as it did me.

As you can see, I’m a pretty big fan of triad palettes. They seem to be the natural choice for me and this helps me make the most out of my designs. This chart is, of course, just something to give you an idea of what you might use and is not meant to be used literally. The actual hue of the colors in the chart is not important but what IS important is the relationships in the triads. That is what gives the feeling of the design, not the hue. You can have a rainbow design that could very well be used for a metal band poster and it will work only if you use saturation and luminance values between the different colors wisely.

Remember: you can use the values in the charts and just shift the hue values for the triads to get what you want. It’s easy and saves loads of time for those “2 hour design” project.

I don’t know any way I or anyone can explain literally how to not churn out a bad design but there are a few pointers concerning colors I can give you and if you manage to stick to them odds are most of the time your work will be pretty good:

Avoid extreme contrast all over your canvas

Unless specifically stated by the client, avoid single color (gradient) or gray scale designs. It takes a lot of practice and skill to masterfully pull that one off. Not to mention the fact that you have to work twice as much on one of these things. The reason it’s so hard is because you can’t break monotony with a second, third or fourth or fifth color. So you’re left with only shapes and contrast and while they are enough to create something awesome, in web design especially, where time is literally loads of money I don’t think to many of us afford to spend 2, 3 maybe 4 days on a single design.

Avoid extreme contrast all over your canvas. It’s good to use something like a red button on a light green background to draw attention to that area but if you over do it like say slam a long, red menu on a light green background you’re going to seriously annoy someone’s eyes. And usually that someone happens to be the client.

My cardinal law (I mean I hold it dear, not that I made it) when it comes to ANY design is this: make it subtle. Subtle gradients, subtle color changes between designated areas of the canvas, low contrast text color etc. The main idea behind any design is to draw attention. And while this rule is not as pertinent for print design (posters, banners, etc.) where one’s attention needs to be grabbed for a short time, in web design the goal is to keep the user on the site for as long as possible because most of the time we’re feeding them enormous quantities of information compared to most other media. So we have to have high contrast areas to draw the attention but we also must have subtle, calming, relaxing areas (more so than high contrast ones I like to think) in order to keep the user there and ultimately make him browse the site.

Think about what the colors mean. If it’s a tough muscle car custom shop don’t use pastel pink. Unless it’s a tough muscle car custom shop for fairies. That would be appropriate. Definitely.

Colors bleed into each other in real life.

If the client is an idiot and does want colors that have nothing to do with what he is about then think about nuances. Blue can range from greenish to sky to deep sea to near violet. And in conjunction with other colors you can achieve the right atmosphere and satisfy your client’s weirdo demands. It’s a question of attitude on your part. Do you just draw boxes like a drone or do you stop and analyze the matter at hand? I apologize to any and all drones reading this. I mean no disrespect to your kind. Some of my best friends are drones and they’re ok… I should move on.

Colors bleed into each other in real life. Do the same. A design doesn’t have to be a scientific illustration. It can and should be a piece of commercial art. Think of colors as people. Ok, I’m gonna stop right here because I am diving into that interracial pond and I do not have my apologetic cap on right now. Just…let them colors bleed.

Well, that’s it from me. I hope you learned a thing or two, I am off. Be sure to come back around and see what design nonsense I have dumped lately on the ever so unexpecting internet.

And, as promised, here are some resources, both for learning and speeding up your color work:

Colors In Corporate Branding And Design

Color Tools, Resources and Tutorials for Photoshopers

50 Totally Free Lessons in Graphic Design Theory

Using Adobe Kuler to Enhance Your Photoshop Color Workflow

by Radu Chelariu