The Basics

Although we all have our preferences, there are no objectively "good" or "bad" colors. There is also no such thing as an objectively "perfect" color choice—there are only choices which, after trying them, we may discern if they are more or less effective in the context of the specific piece and all of the other color decisions we have made within it. Pixel art is simply a medium, and it does not really alter how we may use color, except in the lack of actual blending between pixels and the consequences of that. Understanding how color behaves in real life, and how it can be used creatively, will help you make informed, intentional decisions when picking colors for your sprites and other pixel works.

This article is not meant to be a purely scientific representation of human biology nor a mathematically-precise explanation of digital color models, but rather a pragmatic exploration of color theory geared towards working and hobbyist pixel artists. Here's what I think you should know:

  • In the absence of light, we cannot discern any color. Consequently, the properties of light in any situation have great influence over the way objects appear to the human eye.
  • Color is relative—that is, relative to the light and to the other colors surrounding it. The eye and the brain work in conjunction, using chromatic adaptation to compensate for the color of the light on and surrounding an object in order to determine what the color of an object actually is no matter the lighting conditions—a concept known as color constancy. Because of this, a color used for a blue object in one piece could also be used for a red object in another piece with different imagined lighting. This is why it is important that you are being smart about your color choices and not thinking in terms of visual symbology—the sky isn’t always blue, the grass isn’t always green, etc. This type of symbolic thinking is very easy to fall into, even when you're not a beginner, not just in terms of color but in every aspect of pixel art (i.e., sprites convey specific form—they’re not just a flat representation of the basic parts that make up the idea of something, like a child’s drawing of a house with a triangle roof and rectangular chimney.)
  • In the HSV representation of the RGB color space, there are three properties of color: hue, saturation, and value. Hue describes the overall color type or color family that can be specified by name (e.g. "red".) Saturation describes the purity of the hue at a consistent value level. Value describes the amount of black or white in a color, and is the most important for discerning form and depth.
  • However, the perceived value (sometimes known as luminance) is even more essential to describing the form and is dependent upon all three properties. It is important to note the distinction between value and perceived value (luminance)—value is the measure of black or white (or "lightness") in a color, while perceived value/luminance is the measure of overall brightness.

There are three theoretical types of color:

  • Local color: When I say that an object is a color, I am referring to the local color of the object. Because there must be light in order to see any surface, and the particular type of light influences how the surface appears, local color cannot really be observed, so it must be inferred by the way in which an object appears in relation to surrounding surfaces and the way it reacts to light.
  • Absolute color: The color as it really is, if one were to color-pick an area of the surface. The absolute color is determined by the color of any light sources hitting an object + the local color of the object.
  • Relative color: The color as it is seen in context due to chromatic adaptation, according to the perception of the eye and the way the brain interprets the information it receives. In isolation there would be no way to perceive relative color, only absolute color.

In the upper version of this sprite from Idle Monster Frontier, the local color of the fabric is intended to be the same grey as below, although the lighting conditions are different. Because the rim light is so intense, the absolute color of the fabric is shifted to a red-magenta color (A rather than B) and a reddish grey (C rather than D.) Although D is actually an absolute neutral grey, the highlight color (E) has a slight orange tint to it, which makes the relative color of the grey appear slightly blue on the bottom sprite.

We Need to Talk About the Wheel

Color theory education often focuses largely or even solely on the color wheel and the color relationships it implies—these principles are really only useful for selecting the relative color composition of elements of an image, if that. More important than the selection of color schemes is one’s ability to choose the correct absolute colors to portray those relative color relationships, and the proportions and distributions of color in your work (in addition to appropriate value relationships.)

The conventional color wheel (utilizing red, yellow, and blue as primary colors) is actually flawed in various ways. The way the colors are placed around the wheel is not representative of the true distribution of colors, and the selection of "primary" colors is subjective and largely based on an outdated range of pigment availability. Color schemes derived from this wheel describe only the relative relationships between color families, and give no information about which specific, absolute colors you should use. Without color relativity in mind, the conventional color wheel encourages use of absolute relationships, of putting a bright green absolute next to a bright red absolute to form a complementary color scheme. While maybe this could be used effectively, it’s unlikely to convey any sort of believable atmosphere or lighting.

Note how the positions of colors on the traditional wheel do not match up to their positions on the spectrum. For example, the orange-to-red section is elongated significantly compared to the color spectrum.

The "yurmby" wheel (named because the colors in order are yellow, red, magenta, blue, cyan, and green, or YRMBCG, which vaguely looks like yurmby) more accurately portrays the full range of color. Note that this wheel places red, green, and blue evenly spaced (unlike in the traditional wheel). Red, green, and blue (RGB) are the primary colors of light (and digital displays,) which makes this wheel more appropriate for our purposes. By selecting any handful of colors, which will be the "extremes" of your palette, as your relative primaries and connecting the lines between them, you can use the wheel to create a color gamut which contains the range of colors you may use in a piece. Any colors that fall within the shape the relative primaries create on the wheel should look cohesive, as they contain elements of your original (relative primary) colors. If you'd like to explore this more, I'd recommend reading about gamut masking in Color and Light by James Gurney (or on his blog.) You can use this same premise by "mixing in" a little of one color into another—place a swatch of one color over the other (using "normal" layer mode or equivalent) and lower the opacity of color you are adjusting. The color the addition of these two creates should be cohesive, even if they are technically complements, as they now contain similar elements.

Here is some pixel art of mine with its palette and corresponding gamut mask (minus one or two outliers.) Note that the wheel does not take the dimension of value into account, so while I do have some higher saturation colors, they are mainly darker in value. Most greens and blues are low saturation and/or very dark in value, which allows them to play nice with the more saturated oranges, reds, and pinks.

Whether or not you are considering the literal wheel, it is important to limit your range of available colors within a specific piece or project, in terms of all aspects of color (hue, saturation, value, and perceived value.) Just like how having two absolute complements may not be effective, it is unlikely that a piece containing a color of the highest possible saturation as well as the lowest possible saturation or the highest possible value and lowest possible value will look believable. There are exceptions, as pure black and white have no saturation and contain the lowest and highest values respectively, and you may still choose to use these stylistically in your sprites (or even both exclusively for 1-bit pixel art.) However, this type of pixel art is typically more graphically or symbolically-focused and does not aim to convey greater realism. You may want to utilize colored outlines to further the illusion of light and atmosphere in your pixel art if that is your goal.

When creating palettes, it is more useful to think in terms of relative color relationships. You may want to focus on creating the illusion of a complement (a relative complement) by finding an absolute color which appears to be the local color you have in mind for that object, in the context of the piece. One thing to remember is that greys tend to appear as the relative complement of the surrounding absolute. This means that if you put an absolute grey next to an absolute orange, it may appear as a relative blue. If you put an absolute grey next to an absolute blue, it may appear as a relative orange. This is one way you can choose to create the color relationships in your image—by pushing one color further towards the extremes, not both of them. This is also why many pixel artists use greys as "versatile interpolators" or "neutralizers" in their color ramps, which adjoin multiple color groups and may be used on objects of multiple local colors.

Although these grey squares are both an absolute neutral grey (#838383,) each appears to take on the hue of the relative complement of the surrounding color. (I find the illusion works best if you try to look at all three squares at once.)

Using a color gamut created on the wheel, the color which falls in the geometric center of your gamut shape will be the subjective neutral, and should appear the most "grey" in the context of the piece (even though the absolute color may not be fully grey, and will likely have a certain hue "lean" to it.) The absolute color of the subjective neutral also describes the color cast of the piece overall, as your chosen color gamut leans in this direction. Similar to concept of the subjective neutral and how the color of your outlines in pixel art affects the overall appearance of the work, I have found that if there is a white in terms of local color or a very high value specular highlight in your piece, the absolute color you select for this is often significant regarding the tone of the work and reflects the general "shift" towards a certain color family.

Yellow works well for specular highlights and white local colors because of its high luminosity and saturation flexibility at high values. It can also help impart a "warm" or "vintage" tone to your work. Other hues can be utilized for highlights and relative whites, but the saturation will likely need to be reduced significantly. The only thing I have changed here is a single color (the relative white,) but it alters the look entirely. 

The wheel itself is not something I consider consciously in my own work; many color decisions are dictated by other circumstances of the project—the context of the work, color choices on other sprites of the category, general local color information about the objects I'm representing, etc. When making color choices, you should first consider what you already know about the requirements or goals of the project. If you are not working within a framework of preexisting style, color, and tone precedents, you should have some idea of what you are aiming for (otherwise you will never know when you have hit the mark, or what you should do to get there.) To help you get a better picture of what appeals to you and what you are working towards, you can gather visual references not only from other pixel art but from any visual media that appeals to you, including paintings, photos, screenshots from movies and anime, textiles, etc. If you have a lot of information about the local colors of aspects of the work, you can think of the most significant local color overall and pick an absolute color for those aspects that appeals to you intuitively, building the rest of the colors around that.

Similar to how each pixel contains color data which can be distributed over multiple pixels through the concept of anti-aliasing, the way you distribute color in all of its aspects throughout a piece spreads the visual "weight" around and affects the balance of the work. Generally, very high impact, high contrast colors (or accent colors) should be used sparingly, as they contain a lot of weight and need to be balanced by lower impact colors which make up the majority of the image. I’ve found that it’s often effective to have one main color which makes up the greatest total percent of the image, an accent color which makes up a small portion (maybe 10-20%) and a secondary color with less contrast and weight than the accent color, which makes up the remainder of the image. If you have more than one strong accent color, you can distribute the small total portion among all of them. I should note that this does not mean you need to only use three literal absolute colors, but rather this may serve as a general guideline for balancing different aspects of color (color intensity/saturation, color family, or perceived value.) The absolute colors you select as your accent colors are not necessarily objectively intense. They are accents relatively, in relation to the other colors in the piece. A piece composed mostly of highly saturated absolute colors could utilize a very low saturation color as an accent.

However, in most game dev and other non-one-off applications of pixel art, there will likely be circumstances which will dictate some things about your color decisions, and you may not be in control of where all sprites appear on screen at any moment, so you should not burden yourself with adhering to these or any other "rules" faithfully.

So-called Hue-Shifting

Many pixel art tutorials reference something called "hue-shifting," which generally refers to how the hue of an object should shift towards the opposite direction ("warmness" or "coolness") as the value of the object is also adjusted. While it is true that the hue should change, this is actually not a distinct concept or technique—because the way an object appears is dictated by the qualities of a light source (or multiple light sources) as applied to the object in addition to the local color of the object, all of the properties of color (yes, including the hue) are always shifting. Approaching rendering from this "hue-shifting" perspective oversimplifies the paradigm of 2D art as a whole while also failing to provide any explanation for why this would be the case. Because there is no color without light, palette construction should not be something wholly devoid of context or thought regarding rendering light and shade.

Hue-shifting tutorials usually use the terms "warm" and "cool." These are problematic, because, although we intrinsically have some understanding of what they mean in relation to color, there are no real scientific definitions for the two in relation to the color wheel, and the point at which you draw the line on the wheel is subjective. Thinking in terms of a color being relatively cool or relatively warm is more useful, as we can more easily discern which way the hue is being pulled.

Due to the concept of color relativity, it is generally true that if the light source is more "warm" than the object, the object may appear to be "cooler" in hue as it falls into shadow. If the light source is more "cool" than the object, the object may appear "warmer" as it falls into shadow. However, depending on the circumstances, the object may still be "warm" or "cool" overall. The areas of light and shadow may be more or less "warm" or "cool" relatively. Any secondary light sources (such as bounced light) may also affect the hue of areas in shadow, and certain properties of materials such as transmitted light and subsurface scattering can produce unexpected shifts in hue, saturation, and value.

Another untruth sometimes espoused within the concept of "hue-shifting" is that areas in shadow should be less saturated than areas in light. While this may sometimes be true, saturation varies depending on many factors and the least saturated tone may not always be the darkest tone—similarly, the highlight may not always be the most saturated. In fact, generally midtones have greater saturation potential than either highlights or shadows. If you plot out the shades of a single-colored object on a white background with a single white light source, as it goes from light to dark you will notice that this is a curve rather than a line—the saturation increases and then decreases again, while the value increases linearly and the hue stays almost entirely constant.

Here I have mapped the absolute colors of this tennis ball (under relatively neutral lighting) in relation to the hue 5GY according to the Munsell system. You can see that the center light (midtone) region is of the highest saturation, while the core shadow is the least saturated, and the hue hardly changes at all.

Every color has a value or range of values at which it has its peak saturation potential—for example, yellow’s peak saturation is higher in value, red’s is near the middle, and blue’s is lower. Because of this varied saturation potential, there may be times where you need to alter either the hue of the color or other aspects of the surrounding colors to make the first color appear more saturated while retaining the correct perceived value relationships.

For any given value of any given hue, the peak saturation differs. (Saturation ranges have been compressed to save space.)

Since hue and saturation do influence perceived value, you can use this to tweak the appearance of your relative color relationships. If one color isn’t quite working for you in the context of a piece, but the values should stay the same, you can usually make that offending color a little darker and less saturated or lighter and more saturated while still retaining the appearance of the same value. Certain hues are inherently brighter (have a higher perceived value) than others (blue has the lowest luminance value and yellow has the highest luminance value,) so you can use hue shifts in a similar way.

These four color swatches all have different HSV coordinates, but their perceived values are extremely similar. A: original color, B: more saturated and lighter, C: less saturated and darker, D: redder, more saturated, and lighter

Rendering Light in Pixel

Because one shortcoming of pixel art is its inability to convey smooth gradients (without using dithering,) it is much easier to convey a particular lighting condition's effect on color rather than on the modeling factors (value steps from light to shadow.) For instance, the transition between light to shadow (the terminator, which occurs on an object where the light rays run tangent to the edge of a form) will be much more gradual in soft, indirect light then in strong, direct light. You will find expressing these types of subtleties much more difficult in pixel art.

Modeling factors of an egg in daylight

In creating an individual sprite without background or other context, you may not consciously be considering the type of imagined light on your sprite, which is made more feasible because of the lack of line quality and gradation in pixel art. However, the color of the light source is what makes the absolute colors of an object shift in a way that retains the local color, and it will help you decide how you should shift your colors if you have an idea of the light color. Especially when rendering full scenes or pixel art which includes background, your palette decisions should be dictated to some extent by the lighting you are trying to convey, as the particular lighting circumstances affect not only the hues in the scene, but the overall value range (and therefore, your color selections.)

If the entire value range available is split into steps from 1 to 10, (in real life) there may be about 5 steps between a region of an object in light and in shadow. (Particularly reflective surfaces may require a broader range of values due to specularity.) In hazier conditions or situations where there is a stronger secondary light source (including reflected light,) the value range could be even slimmer. In sunlight, a surface in direct light (even a black surface) will appear lighter than a white surface in shadow.

Because pixel art does not excel in smooth gradations of tone and color (and due to its typically low resolutions,) the modeling factors often must be compressed to prevent banding and pillow shading and make use of space effectively. In this case, the tone you select to shade what would be both the core shadow and terminator or the halftone and center light must be chosen thoughtfully, so the overall value relationships feel appropriate for the object. Of course, depending on the resolution and style of your pixel art, you may choose to render objects more fully or not at all (using one flat tone to fill the entire region.)

On the left sphere, this is way too many modeling factors for this sort of pixel art (especially without dithering.) On the right sphere I've compressed multiple factors into single shades by roughly averaging them.

On Color Ramps and Palettes

In my opinion, there is an overemphasis on the significance of definitive and predefined palettes in the pixel art world. I hardly ever have a palette laid out for myself when I work. Instead, I typically will pull colors from my own works (especially ones of the same series or project) or from others’ works I am expanding on and use them as I go, adding and adjusting colors when necessary. In the event that I cannot pull from previously existing content, I will sometimes pull colors from other things that inspire me (or inspire the client, whatever the case may be) as a jumping off point and adjust them as the work develops. Building color ramps before starting your piece is sort of like going to the grocery store to buy ingredients before you know what recipe you want to make.

While poor color choices will definitely affect the overall appearance of the piece, simply having a "good" palette at the ready before you begin work will not make your work end up good. Even if you are using a "good" palette, if the colors you select for various parts of the sprite do not correspond to the appropriate values and value relationships, the result will not be as intended. Remember, you can sample colors from things other than pre-existing pixel art! Pixel artists often seem to fall into the trap of thinking the medium is a totally separate entity, but many techniques and knowledge from other art and science realms are also applicable to pixel art.

Especially as a beginner, it can be very tempting to look towards mathematical formulas and rigid step-by-step approaches for picking your colors. Unfortunately, there isn’t any one formula that will work for every situation. However, if you understand the general rules under which color operates, you can experiment with your own colors until you find something that pleases you.

It’s totally fine—preferable, actually—to bend the rules a little, and push your colors until you have to pull them back again. In fact, creating pixel art with a limited palette is a great opportunity to experiment, as you'll often come up with unique color combinations out of necessity that you never would have tried otherwise. Also, a limited palette can lend your pixel art a sense of cohesiveness and atmosphere.

It doesn’t matter how you get to your end result as long as you're being observant and intentional about your color choices. If in doubt, loosen up, try things. Sometimes happy accidents really are the best way to get yourself thinking about what you really see.