Pixel Game Art: Color

This is the third installment of the Pixel Game Art series.

Choosing the right colors is an important task. Hue, contrast, temperature, saturation; all of these describe color choices. Which choices are good and which should be best avoided? While there are surely many ways to choose colors, this provides a few guidelines for selecting good colors.

Components of Color

No, not red, green, and blue. When making pixel art, it’s often more helpful to think of color as being composed of hue, stauration, and value. Hue is the color’s, well, color. The positions on the color wheel – all the colors of the rainbow and even some that aren’t – are examples of hue. Value, however, is a measure of how bright a color is. Black is the color with zero value, and colors with 100% value are brightest. Humans are good at differentiating between light and dark, and are (slightly less) good at differentiating colors, so altering hue and value will create a strong contrast between colors.

Figure 1: Perhaps the most well-known use of saturation, Mirror’s Edge (Ferrero, 2015).

Saturation is a measure of how much color a color has. Completely unsaturated colors are grayscale. Changing the saturation of similar hues usually does not make them look different to the eye. Using many different levels of saturation in a single texture can make colors blend into one another. This makes changing color saturation a less effective method for increasing contrast. It has its uses, though. A saturated color will stand out when surrounded by less saturated colors, so it can be used to draw the player’s attention to a certain feature in the environment.

Balancing Colors

Figure 2: A color gradient from yellow-green (left) to yellow-orange (right).

Color balance – the amount of red-blue (and secondly, green-magenta) in a texture – is a major part of what makes a texture belong in the game environment. Does a yellow texture have a green tint, or an orange tint? Organic textures may go for the former, while metallic textures may go for the latter. The hue shift tool in your favorite image editor (shh!) may come in handy when selecting colors in this fashion.

An alternative way to make colors mesh is to use a monochrome color palette. Monochrome means “single color,” and textures in this style contain only one or two hues. Outlines and other defining features in the texture are achieved through variations in value. The upside of monochrome textures is that they transition well into grayscale where textures with multiple hues may not.

Whether using a single color or all the colors, carefully chosen colors will make a difference in the quality of textures.

Image Reference

Ferrero, Adam (4 August, 2015). Through the Rose-Colored Glass of Mirror’s Edge. Retrieved form https://rectifygaming.com/through-the-rose-colored-glass-of-mirrors-edge/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s