Picking the best colors for your sprite

I had for the longest time been stuck with a monitor that never quite displayed its colors right. After finishing a sprite that I thought looked pretty good, I’d post it somewhere, check on it from another computer and be unpleasantly surprised at how wrong it looked. Even slight shifts can really hurt things (especially when it’s a skintone that looks too green).

Artist’s rendition of what I thought I posted vs what I really posted

So I quickly learned to make do with stealing palettes from existing sprites. In fact, today I very much recommend stealing palettes for most aspiring pixel artists — it gives you not just good colors but good contrast for your shading, and there’s some great sites out there for finding lots of palettes to choose from.

But eventually the time comes when you want to make something that’s fully your own, or you want to expand your horizons to be not just a good draw-er, but a good color-er, too. And here, once again, the lessons and tricks of regular art help make it easier to perfect your pixels’ hue, saturation and luminosity.

HUE: GOOD PALETTES

The main challenge is picking out the right hues to start with. I’ll spare you the graphic design course of color theory and the history of the color wheel, but keep this in mind: when spriting a character, you want not just the right hue for each separate area (good colors for skin, for a green shirt, for brown pants), but you want them to look nice together. Some colors, like blue and green, will just by their nature give you a hard time when you try to make them look good together.

Left: perfectly fine colors, but Right: put together and shaded on a sprite and *gak*

This is something that all artists think very seriously about, and thanks to the magic of the interwebs, that means there’s a bunch of free solutions that people have come up with:

• Adobe Kuler is an online color wheel that gives you plenty of relationships to choose from
• The ColorSchemeDesigner is intended for web design, but can give you a nice selection to visually compare things
• ColorsOnTheWeb, another web design tool, gives you not just a good interactive adjuster, but some education on the side about the science of color combination
• ColorBlender gives you sliders to work with, the ability to switch to Hue Saturation Value instead of RGB, and a way to export right to Photoshop’s .ACT format
• ColorExplorer has a few different methods for working with variations of a palette
• The Generator at DeGraeve.com lets you get inspiration from photos by reducing images down to their most prominent hues

As a quick aside, I’d like bring up the concept of hue-shifting for background artists and the more adventurous pixel pushers. Sort of like impressionism, this is where you take for instance a green tree and add colors other than green to make it stand out more, give it more color, and/or to give it some temperature. It’s a great style but it’s highly subjective in regards to not only where you apply such colors, but what colors to choose. Fortunately, there’s a fantastic solution to the latter: check out this hue-shifting palette creator for a good way to decide what colors to use.

Finally, there’s always the option of lifting colors directly from a photo (like copying someone’s skintone) or from a game’s promo artwork, but this can get tricky. It’s a phenomenon I’ve never been able to explain, but the colors used in full-sized artwork will rarely look right when shrunk down to sprite size.

1 – full sized artwork with perfectly fine colors
2- the same colors on a sprite look faded and wrong
3 – the sprite’s colors getting a boost. Why colors don’t translate from full sized art to sprites is a mystery to me.

If you do try it though, the best way to grab a palette from a photo is to pick the average hue of an area: load the image in Photoshop/GIMP, then go to FILTER > PIXELATE > MOSAIC and blur it to about 3 or 4. That’ll take an area of 3 or 4 pixels and average their color together.

Whichever tool you pick, you’ll now have better footing from which to choose more interesting hues that should give your sprite either a pleasing unity or striking color contrasts. But there’s also another kind of contrast you should work on, which comes with the next step of shading.

LUMINOSITY: GOOD SHADING CONTRAST

Contrast in shading is more tricky than it seems. Try shading a navy blue area next to a light yellow area to see what I mean. You don’t want one part of your sprite heavily shaded while another part is lightly shaded.

Wait.. something’s not right here with my shading..

This is one of those cases where it helps to apply math to art. Calculating the RGB values of your shading shifts to equal amounts guarantees the right shading, but why do that when Photoshop or GIMP can do the work for you?

The trick is to work in grayscale while you do your shading. Place your shadows on a figure colored in white, or lights on a figure colored in dark gray. How dark you make your grays will determine how intensely the figure is shaded. Once you’re done shading, place a new Photoshop or GIMP layer above the grays and fill in the base hues that you chose, then switch that layer to the “Multiply” layer style. The dark grays will shade those hues to equal intensity throughout. (See this sprite tutorial for the full explanation)

This will help with not just the shading contrast but also with the darkness levels of the lines and outlines. If the contrast looks good in the easy-to-judge grayscale version, it’ll give you a solid start when coloring.

Keep in mind that “multiply” won’t always get rid of all the grayness in lighter hues like yellow. That’s fine though, because you should have some control over how saturated your hues are.

SATURATION: GOOD SHADOW VIBRANCE

Many painters will tell you that the shadow area of a subject should be less saturated than the light area, because that’s how it works in real life. But this can often conflict with your main goal when working on a tiny sprite, which is to make it stand out.

Left: more realistic, but kind of dull and gritty. Right: more vibrant, attention-grabbing hues. Believe it or not, the light areas on both have the same colors. It’s only the shadows that’ve changed saturation.

By adding saturation to the shadow areas of a sprite while keeping the light areas just as vibrant, you’re applying a strong cartoon style that pops the sprite off the background while maintaining that color contrast and shading contrast that you’ve built up. Ergo, saturation contrast, if the term exists. Leave the more recessive, subtle colors for backgrounds.

BONUS: GOOD COLOR-COUNT

For those times you want to imitate the 16-bit art style and only use 15 colors on your sprite with the 1 transparent background color, GIMP and Photoshop can help there too.

Now that you’ve worked out all the hues that you want, you can examine the sprite to see if some colors might be redundant: does the character have brown hair or leather clothing that can be colored with darker skin tones instead of new colors? Can the character’s white shirt be shaded with blue and include the lightest blue of his jeans? Do you really need to add a white pixel just for the eye?

If checking manually for colors that can be combined is a pain, go into Photoshop’s IMAGE > MODE, and making sure you’re in RGB mode, switch it over to Index. Once you do, you’ll get a window that lets you choose your palette. Assuming you have a background filled in, choose a palette of “Local” (either Perceptual or Selective), and set the colors to 16, with FORCED to none, TRANSPARENCY unchecked and DITHER to none. Photoshop reduces the sprite to the most used colors and recolors similar ones to the new blend.

Can you tell the difference? (Hint: the boots and belt are probably the only parts you’ll be able to notice)

This not only keeps your sprite “technically” accurate to the old days of memory limitations, but it’s a legitimate art trick that gives your color scheme stronger unity.

CONCLUSION

Those are the tricks, but keep in mind they’re aimed at sprites of characters and creatures. Pixel art for objects or backgrounds might throw you a few curves here and there. Backgrounds especially should be treated as something that you want sprites to stand out from, which means keep it as recessive and low contrast as possible, color- and intensity-wise.

Use these tools to help you develop an eye for color on your own for future projects. They’ll help make your spriting faster and more satisfying, and may someday help you out big time on non-pixel projects, too.

MORE INFO:

Want a more in-depth look at how colors can work in your pixel art? Check out the discussion that happened over at the Pixelation forums, and take a look at this detailed article on how to get great colors for any of your projects.