In my opinion, Art is the most important aspect of any game. It is the first thing the player connects with about your game and, likely, the leading factor into a potential customer opening up their wallet. Art can be familiar, bridging the gap between a new product and warm feelings from games they already enjoy. Art can differentiate your product from competitors or alienate an entire customer base.
Of all the emotion and mood-setting properties of your game’s Art, the color palette is perhaps the most important. Unfortunately Color Theory (link) and other wonderful things you would learn during some MFA graduate program take years of practice and thousands of dollars to learn. Fortunately technology has bridged the gap enough for art challenged developers to have a somewhat competent color palette.
The tools we’ll need to accomplish this feat:
Step 1: Find a muse
Search through film, television, other games and, of course, traditional art for a picture that captures the mood, setting, theme and all around ambiance of your game. My favorite sources to scour are movie posters as they are meant to deliver that all encompassing mood and emotion of an entire film in a single poster.
For this example, I’m going to use the poster of the film substitute for ambien, Blade Runner.
Open the Canva.com link above and upload the poster. The website will output the following:
Step 2: Set up your base
Open a new browser tab to the Coolors.co link above and enter the HTML color codes generated from the movie poster (the 6-digit code after the #). This is our base of operation to get the final color palette.
Look at the color palette. Does this represent your game? If not, try again with a new image. Use your intuition here; don’t over think and go with your instant reaction rather than your contemplation. For me, something isn’t quite there with this palette. The last color doesn’t add anything new and feels slightly out of place. I really wanted to capture the light blurs from the buildings but they didn’t appear in the palette.
Here you can open your favorite image editor (mine is GIMP because it’s free) and use the color selector tool to pull specific colors from the image. This isn’t rocket science, more trial and error and again, use your intuition. Here is our palette after I replaced the last color with the light blur.
Step 3: Expand your domain
Now we have our base palette, but surely we can’t use 5 simple colors for an entire game. This is where color wheels, complementary colors and other color theory comes into play. Luckily we still don’t need to necessarily understand any of that thanks to our 3rd website link above, Paletton’s color wheel.
Suppose you want to use the “Chinese Red” as a base for a scene in your game. The other colors on your palette can definitely be utilized but this isn’t the NES where you are limited to 25 colors on screen. Grab the HTML color code for the red and enter it in the “Base RGB” text field on Paletton.
On Paletton, there are 4 settings at the top that dictate the colors generated: Monochromatic, Adjacent colors, Triad (3-colors) and Tetrad (4-colors). I’m not a fan of Monochromatic or Adjacent colors so that leaves Triad and Tetrad. The general idea is that Triad is for highly contrasting colors, colors that will differ greatly from each other, and Tetrad is for accenting a single bold color, likely what we want.
Now you have more colors to expand a “Chinese Red”-based scene in your game. Still utilize the other colors on your palette but use these colors to accent the red throughout your scene.
Creating a color palette can less frightening than most developers think; utilizing the tools above and relying on your intuition is all you need.