Pixel Art Tutorial: Creating a Colour Palette

Creating a palette:

When should I worry about colors?

Well essentially what it comes down to is, what colors does the piece need to have?  then, as I go, how far can I get with those (until of course I need to add more shades). That’s when the mixing occurs.
-Adarias

This is a common method of creating a palette for a piece. Here’s an example of what he’s talking about:

As the piece gets more complex, it becomes necessary to create additional colors to achieve more advanced shading, or to color new image elements or details.

Another method is to create the piece in shades of grey, then add color later. This is possible because relative value is a greater concern than hue, because hue can be more easily altered later on, after value relationships have been established.

Personally I find it easier to keep up with colors as the piece progresses, so I prefer the first method.

Color count

You may find that pixel artists often advocate a low color count. You might assume that this is just a tradition leftover from the olden days of pixel art, back when video game consoles could only display a certain amount of colors.

If modern computers can easily display hundreds of colors, why shouldn’t you use them all?  In truth, using small palettes isn’t an outdated tradition of pixel art, and there are very logical reasons behind this practice.

Cohesion– When you’re using less colors, the same colors will reappear throughout the piece more frequently. Since the different areas of the work share the same colors, the palette ties the piece together, unifying the work.

Control
– The smaller the palette, the easier it is to manage. You may, and probably will, want to change adjust a color later on. If you’ve got 200 colors, it’s going to take you a lot longer to make the adjustments, because by changing one color you’ve thrown off its relationship with the colors neighboring it on its color ramps, and adjusting them means changing the relationships between those colors and their neighbors! You can see how this quickly adds up to a lot of work. With a smaller palette, the effect of changing a single color is more substantial, and there are less micro-relationships to worry about.

Hue, Saturation, and Luminescence

Hue:

Hue refers to the identity of a color. Whether a color is defined as blue, red, orange, etc. depends on its hue:

In the above picture, hue is represented along the x-axis.

Just as you can change how bright or dark a color appears by surrounding it with lighter or darker pixels, the perceived hue of a color depends on its environment. Here we have a completely neutral, medium grey:

In this picture (a detail of this piece by iLKke) the green in the trees is actually not green at all, but the same grey as the previous picture:

Because the background is so purple (which is the opposite of green on the color wheel), the grey looks greener than it actually is.

Hue will be an important concept later when we discuss hue shifting.

Saturation:

Saturation is the intensity of a color. The lower the saturation of a color, the closer the color gets to grey:

The most common problem new artists encounter is regards to saturation is using colors with too high of a saturation. When this happens, the colors start to burn the eyes. This can be a problem in any media, but because the colors in pixel art are made up of light, instead of pigment as in paint, the potential for colors being too bright or irritating is much higher. Notice how the colors in the second image are much easier on the eyes:


Luminescence (brightness):
Luminescence (also known as brightness or value) is how dark or light a color is. The higher the luminescence, the closer the color gets to white. If the luminescence is 0, then the color is black.
Here’s a palette arranged as a luminescence scale for you visual learners:

low luminescence (darker colors) on the left, high luminescence (brighter colors) on the right

In a given palette, you’ll want to have a wide range of values. If you only have colors in the same range of luminescence, then you won’t be able to create good contrast- a full range of values allows you to use highlights, mid-tones, and shadows. The difference between the brightness of two colors is known as contrast. A common problem newer artists exhibit is not having enough contrast. Here’s an example of an image for which the contrast is too low:

And that same image, adjusted so the values are spread out more evenly from light to dark:

The value of a color is a set number, but colors can appear lighter or darker depending on their background. For this reason, you won’t always want to use your brightest color for every highlight. A color that makes a good highlight on one object might be too bright to use on a darker object.

Luminescence is especially relevant to pixel art: The brightness of a pixel or line determines how thick it appears:

The first example is a simple black line. The width of the line looks consistent. Below that is a line with pixels that vary in brightness. Notice how the line appears thinner toward the center at 1x.

Color Ramps

A color ramp is a group of colors that can be used together, arranged according to luminosity. A palette can consist of a single ramp of many different ramps.
Here’s a palette:

And here’s that same palette, arranged according to its color ramps (of which there are two):

It isn’t necessary that you actually create a model like the one above (though some artists find it useful). What is important is that you understand what your color relationships are- that is, what your ramps are.

It isn’t necessary that a color be restricted to a single ramp. Often, ramps will share colors. Frequently, the darkest or lightest color will belong to most or all of the palette’s ramps, as in the example above, in which both ramps share the same darkest and lightest shades.

It’s also possible for mid-tones to work in multiple ramps. In these cases, the versatile color takes the place of two or more separate colors, aiding in palette conservation. In the case of multi-ramp shadows and highlights, the extremes in luminescence allow the color to be flexible (because they approach black or white). Since mid-tones are not afforded this advantage, they are often more neutral colors, meaning they are closer to brown or grey.

Here is a palette that uses one shade of grey to bridge the gaps in several ramps:

You also have to be careful about having colors in a ramp that don’t fit. If a color doesn’t belong in the ramp, then it has the potential of punching through the image, which is a priority issue in which the color, rather than work as part of the image, seems separate from it, and looks almost like it is sitting on top of the image. This is usually due to the saturation being too high, or because the hue clashes with the neighboring hues, and thus creates eyeburn.

The above image shows eyeburn created by a color with too much saturation.


…and in this image, eyeburn is created by the green clashing with the purple. The hue should logically follow its neighbors in the ramp.

Hue shifting

Hue-shifting refers to having a transition of hues in a color ramp. A color ramp without hue-shifting is known as a straight ramp. In straight ramps, only the luminescence changes, while in hue-shifted ramps both hue and luminescence will (usually) change.

The first color ramp is a straight green ramp. The second image is a green ramp with hue-shifting applied. When using hue shifting, bend your highlights toward a certain color (yellow, in the example above), and move the darker colors toward a second color (I chose blue in the above example). Hue-shifting is used because straight ramps are usually boring and don’t reflect the variety of hues we see in reality, and hue shifting can add subtle color contrast within a ramp.

(via Cure on Pixel Joint Forums)

Advertisements

2 replies »

  1. Honestly, I’m surprised no one has left any comments here. I’ve been sifting through a ton of color theories and color ramp tutorials all morning. And though I’ve essentially got all of the same things out of this, you have collected it all and explained it very cohesively all into one nice package. Had I found your post first I wouldn’t have had to go all over the place for the answer. Thanks 🙂

    Like

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s