Color Theory in Games

INTRO

Got a few requests from people to write about how to effectively use colors in games, so here we go... I'll go through some basic concepts of color theory and tell you how to apply them to your games.

I took a class in college, which was helpful, but it's not necessary for anyone.  The information about how to use colors is out everywhere on the internet so paying a ton of money to do a few exercises and take lectures isn't worth it.  I got better with colors just by following the basic things about color theory.

(This is not a full tutorial.  I will teach a few things here and other stuff I will leave out for future tutorials).

THE BASICS

The first thing you see in a color theory class is the color wheel.  Most artists have probably seen this before and it's straight forward: a rainbow wheel of all the colors you can imagine.

fun fact - the mantis shrimp can see a ton of colors that humans can't.

This is what children respond to, may kids toys have these colors - red, orange, yellow, green, blue and purple.  If you're just beginning, you might be tempted to work with millions of other colors of your choice, but I highly suggest you limit yourself to these 6 fundamental ones first and then spread out.

LEARN THE RULES BEFORE YOU BREAK THEM

Here we have some complimentary colors, but what does that mean?

Look at the color wheel and pick one color.  Now pick a color on the other side.  These colors are complimentary and that's very useful to you as a game artist.  

They compliment each other, meaning that they make each other stand out a lot more than any other colors.  Use this to your benefit because in games, it's important to have stuff stand out and make it easy to register for the player.

One way that complimentary colors can be used effectively is to make objects contrast.  In the high contrast section, you see a red and green circle, which obviously stands out a bunch.  White and black outline stands out decently too, but you most likely want your games more colorful than that.  The Blue circle is using the same color spectrum, but one is darker than the other so it makes them contrast each other more.  

High contrast doesn't mean low contrast is a bad thing.  Sometimes you might want some stuff to be subtle without making it 1 solid color.  The blue circle in the low contrast group is the same blues that slightly vary in darkness (how much black you add to it).  The orange and blue circle is a strange case where complimentary colors kind of blend in with each other.  This is because you add a certain amount of black that it makes them seem like they're more similar than they should be.  

EXAMPLES

That should be enough now for us to start on some actual game examples.  Since it's December, let's do some Christmas themes. (Very quick sketches, don't judge too harshly) 

Mistletoe - We have green leaves and red berries, pretty straight forward from what we know about complimentary colors, right?  It's sometimes hard to shade red colors (for me anyway).  There's something about adding lighter versions of red that just makes it seem off.  Pay close attention to how highly contrasted the white is.  There is less colors separating the white from the red, so it makes it look shiny.

Present - Same concept in a box form.  The yellow ribbon really makes it emphasize that it's a gift.  If it was purple or pink, it might not have the same effect.  An example of when this might be handy is if this object is very small in your game.  Making it the same color will just blend it too much and that's no good. The player won't know instantly what it is. 

Candy Cane - Here we have colors that aren't complimentary per se....but it still makes it stand out because the red contrasts the white a lot.  If this candy cane was an object you can collect in game, it'll be easy to spot because the stripes make it unique from the surroundings, unless you have red/white stripes in the background for some reason...

How about some backgrounds.  Here we have 3 objects that are important to collect in a game - 

The circle stands out pretty well, the square is alright, but the triangle almost blends into the backgrounds...that's not good.  When you're designing your game, this is very important to consider because what if your player misses a blue gun because it blends in with the sky too much?  (I mean...maybe that could be your intention for whatever reason). 

That's  better.  Only thing changed here was the color of a few background layers.  Now the background is low contrast (blending into itself) making the foreground elements stand out better.  

End of the tutorial.  What do you  guys think?  Any questions?  Leave feedback for me about stuff I should change and/or adjust.  If there's stuff you'd like me to cover in more detail in future tutorials, let me know about that too.  No point in me making these if no one's interested...

Tweet