Entry tags:

resources: general

Quick and Dirty Color Tutorial
Everyone likes to have a nice, swanky ad and kickass layout for their games. But not everyone is Tim Gunn and knows how to make it work. For those of you who need some help navigating the color wheel, this tutorial is for you.

Before we begin, here's a smattering of useful tools/links you might want to check out. If you don't have/can't afford Photoshop, GIMP is your friend. GetColor! is a pretty handy color picking tool. There's also this very basic guide to HTML colors and, for the more adventurous, Coloria, which covers damn near every color in the rainbow and provides the HEX codes for them.

Here's some basic color theory for you, while you're at it. Learn it. Know it. Love it. It's just the tip of the iceberg, honestly, if you doubt your ability to make colors play nice with each other, I suggest googling "color theory" and boning up. Tutorials can't help you if you don't want to do at least a little bit of work. But this will hopefully serve as a bouncing off point.

Now that [hopefully] you've at least taken a glance at the links above, let's get to the nitty gritty.

What Looks Good on White

Greys on White

Various shades of grey can look quite nice on white, but only so long as they're not too pale. The example below shows clearly that #CCCCCC is too light a color for text on a white background. However, grey can work as a very nice, and even elegant accent on white.



For an example of what NOT to do:



If you could read that, congratulations. You're secretly a hawk. Go have yourself a mouse or something to celebrate.

For those of us that are human, take a look at this example of how to do it right. The greys they chose to use are excellent for a white background.

Colors on White

You can use almost any color on white so long as you know what you're doing and heed the following. Avoid pale and eye-popping colors. Colors that are too light and pale will simply disappear into the background, making your text illegible. Like grey, pale, pastel colors can be used as accents or backgrounds, but you to not want to use them for text on white backgrounds.

You might be thinking "Okay, I won't use pale colors. Brighter is better!" No. Stop. I beg you in the name of all that is good and pure. While some bright, screaming colors can be legible on white backgrounds, they make the eye strain something fierce to read. You don't want people going blind, do you? Not to mention it's ugly as sin. Just take a look:



Just...just. No. These are irredeemable colors. Don't even use them as accents. Instead take a look at what works on white. Namely, darker colors and muted "bright" colors. They're easy to read and can work as catchy accents.



Look here to see how someone used color effectively on a white background. And here you can see a good use of grey and a single accent color on white.

What Looks Good on Grey

Colors on Grey

We're jumping right into color on a grey background because I thought a 'grey on grey" tutorial would be a little redundant. And boring. Basically don't make your grey text too light or too dark to read on your grey background. Black text will work on most any shade of grey - again, so long as it isn't too dark - but white will not.

As a reverse of the example above, we see here that stark white [#FFFFFF] makes a poor color choice for text on a light grey [#CCCCCC] background. This is because grey has the magical ability to make colors seem brighter than they actually are. Bright pastels and eye-popping colors can become alternately blinding or fade into the background entirely, making text difficult to process.



Another good monochromatic example can be found here, but with everything on a grey background this time.


However, note that white and pale pastels can work as accents on a grey background if used sparingly. You'd be safer, however, working with colors that are either darker or a bit on the duller side. Like so:



Here's an example of how to work with grey and color properly: muted pastel and grey.

What Looks Good on Black

Greys on Black

As with white, various shades of grey can look smashing on a black background as text or as an accent. However, with black you have to take care that the grey you're using isn't so dark that it blends in with the background. And you'll want to use stark white text on a black background sparingly as it strains the eye. This means no huge chunks of text in plain white.




Colors on Black

Remember what I said before about those hideous, irredeemable colors that don't work on white? Yeah, same applies here. Don't use them. Ever. You can do better. Hell, a blind terrier could do better. Just look at this travesty.



Really, see how bad this looks?



Are your eyes bleeding? Good. Let that be a lesson to you.

How about we look at what colors actually do work on a black background. Those would be your pastels and dull colors again. Bright enough to be be read, but not blinding. For example:



Here we see an example of someone taking the advice above. A good use of a light, but not blinding color. And also here, bright color that doesn't make the eyes bleed.

Examples of Colors That Work

When working with an image, it's always best to try to use colors from the image itself for your color scheme. So long as you do it right. Here I've slapped together just a few visual examples of what to do and what not to do when putting together color schemes. Hopefully someone will find them helpful.







See an example of someone using the correct color scheme here.





That last example actually has two good color schemes, just one on a dark background and one on a light background.

This is a beautiful example of how to use colors that work with your image and as a whole.


One last tip: when in doubt, or even if you think your colors are great, make sure to run it past someone else who's never seen it before. You might be able to read what your text says simply because you wrote it. It never hurts to get a second or third opinion. If you have no one to show your stuff to, try heading over to critiqued for some pointers.

Well, that's all I have to share right now. Remember, when trying to figure out a color scheme, don't be afraid to experiment! Just keep these tips in mind, and use your eyedropper tool. And if you are afraid of experimenting, you can always cheat and use ColorHunter. It will generate a color scheme for you from an image you upload. But in the long run, you'll benefit from learning at least a little something about arranging colors yourself.