1. When and why to choose a palette?

Good question, after all why I bowl with that? Simply because the palette is 50% of the quality of your work. Throughout a game, it is important to have consistent palettes, because they contribute greatly to the overall atmosphere. In general, what makes the difference between fine art and graphics failures is largely the palette. "Okay it is important to have a nice range, I'll do it at the end." Tut tut tut, certainly not! The palette works from start to finish when you're designing pixel art. For me, this is the first and the last thing I do: I start by making a starting palette in the corner of my image, then I tweak as I advance, and then, once everything is finished, I spend time improving it. The improvements are mainly due to "feeling", what you will learn here can be challenged: it is just a starting point.

2. The Magic of HSL

a. Overview

In a computer, all colors are represented by a hexadecimal code (ie which uses the characters 0 1 2 3 4 5 6 7 8 9 ABCDEF) 6 characters. For example, the code #000000 is black, white is #FFFFFF, and #FF0000 is pure red. Nothing very complicated so far. This code can be divided into three segments of two digits (the # is just decoration): the first two digits correspond to the red component of color, the next two are green and last two are last blue. By combining these three values, you get any color. For example, #FF0000 is pure red because the red part is maximized (FF) and the green and blue parts are both zero (00). Hexadecimal codes can be converted to decimal to facilitate more discussion (not everyone enjoys reading hexadecimal like you and me) -- each doublet between 00 and FF is a number between 0 and 255. Now I chose a color that I use in my pixel art, for example purple # 6A146A (Red 106 - Green 20 - Blue 106). Okay, this color is not bad but it does not suit me very well ... I want something more lively, more intense. I tell myself that to make it more intense, I just increase the 3 components ... pfff you speak, it's only make it more white and pale. Too bad, I will darken a little while, I will reduce each component of 10 ... missed again! I darkened my color but I don't want gray ... ouch ouch. It's difficult to choose colors with precision this way. But then comes Zorro to the rescue! (In this case, Zorro is the HSL palette). As you surely understand, it's not natural for your brain or mine to break color down into three color components (RGB -- Red Green Blue). The HSL palette is simply another way to identify a color: it no longer uses the RGB components, but three components visible and recognizable to the naked eye, the Hue, Saturation, and Brightness. Hue, between 0 and 360 is simply the color itself: red (0), yellow (60), green (120), cyan (180), blue (240), pink (300) and Red (360). If you are an observer, you will have noticed that the two extremes come together (as in politics). Of course, all the intermediate colors between the colors that I mentioned, do exist. The saturation, between 0 and 100, is the vibrancy of color. More color is saturated, it is more intense. A saturation of 0 corresponds to a gray. Finally, the brightness, between 0 and 100, is the simplest to understand: it determines if the color tends towards white or black. In all the pixel art programs presented in Chapter 1, you can choose your colors with HSL, so you have no reason not to use it. With a little practice, you can easily obtain a color that you imagine, while it would have taken hours using the RGB system.

b. Ramps and hues

Now that you know the tools at your disposal to choose a color, enter the heart of the matter: the creation of a palette. A palette consists of multiple "ramps": ramp is a group of colors whose hues are adjacent. For example, a pallet may contain a red ramp, a green ramp, and a brown ramp. Let's take a look at an example.
Here is a bearded pixel art dwarf, and below is the palette that has been used to achieve it. This palette contains three ramps: one blue, one red, and one orange. (Small note in passing, it is not necessary to stage your palette as I did. Usually it's a lot more messy than that). In each ramp, I ranked the colors from darker (left) to lighter (right). Note that the pure white and pure black (large rectangles) are part of two of my ramps: Because these two colors have a saturation of 0 (white and black are pure gray), they can belong to any ramp, and this is the same for all other grays as well. The oldest of you may have already seen images of C64 games. The color palette displayed on this machine contained numerous grays to enable artists to create a variety of ramps. -- Now that we know the essentials, we;re interested in the concept of FUNDAMENTAL hue-shift. We tend to believe that all colors have the same hue and saturation, and only the brightness changes depending on whether you're in light or shadow. But that's not actually the case! What I didn't say in the previous chapter, is that your objects are lit up by a blue sky and a yellow sun, which means that your hue varies a bit over your ramps. Most often the reality of things is very complex and requires knowledge of lighting that I have not mentioned, but in pixel art, you're safe with the following rules: - The darker it gets, the greater the saturation - The lighter it gets, the less the saturation - The darker it gets, the more blue your hue becomes - The lighter it gets, the more yellow your hue becomes
if you look in detail at the red ramp of the dwarf palette, we find these trends. The figures (see left) speak for themselves, you can check that everything is consistent with the principles above. You can reverse the rules concerning saturation for a more mild look.
We'll with a small example of our friends, the professionals: the classic "tree of Seiken Densetsu 3" which contains a huge palette of colors shifted from yellow to purple. The image below does not show the whole range, only the lightest color and the two darker.

c. Xenodrogen's Method

The Xenodrogen method, named after its inventor, is a method to choose the exact color of your ramp and without (too much) going wrong. This method is not an absolute rule to respect but if you have sense of color, it will allow you to make pretty ramps. This method is based on a complicated rule to make but easy to follow: "In a ramp, hue, saturation and brightness vary in a single direction. Their changes (second derivative, mathematically speaking) also vary in one direction." We have already discussed the first sentence, and we even said what direction the hue and saturation should vary in. The second sentence will allow us to quantify these changes: in a ramp, each component (hue, saturation and brightness) change must be more and more or less across the ramp. Imagine a 5-color palette, which we will refer to as A, B, C, D, and E. I can, for example, vary the saturation by 1 between A and B, and by 5 between B and C, by 5 again between C and D, and by 12 between D and E. On the other hand, it would be incorrect to do something like 2 3 2 1 4, which would result in kind of a "yoyo" effect. To summarize, I can change the rate at which I vary the hue or saturation, but I must change the rate in the same direction.
Let's take the green ramp to the left as for example: Here, the color decreases by increasing the saturation increases less and less, and the brightness increases more and more. Note that as described in the previous paragraph, we can reverse the relationship between brightness and saturation for a softer (more pastel) rendering: on this ramp, it is the clearest colors that are more saturated. One last detail on the Xenodrogen method: the more colors you have in your ramp, the more you should make small changes. The green ramp above had 5 colors, so we made small changes. If we had only three colors, there would have been variations in the range of 15-20 units.

3. Good taste

a. Black and white

The problem with the use of black and white deserves a paragraph to itself. Generally, the use of these two colors in a pure state (#000000 and #FFFFFF) is discouraged. However, there are two exceptions (one for each color) and the dwarf at the beginning of this tutorial is concerned with these two exceptions. We can use pure white (# FFFFFF) on very bright surfaces (effects and magic spells) or highly reflective (metal, precious stones). This is the case of the dwarf and his metal armor. The case of pure black (#000000) is more subtle: It can't be used for shadows, because in reality nothing is every completely black; there is usually a very subtle color there (sometimes purple). It shouldn't be used for decorations or contours. The only appropriate place to use it is as an outline to make characters more visible in a game, highlighting them above their surroundings. However, we strongly caution against using black "inside", as the black separates details inside the sprite, and makes it look like a rough draft.

Pitfalls

Beginners have two tendencies aside as soon as possible, namely: - Using over-saturated colors - Using colors based on assumptions instead of observation Remember that grass is not always green, water and sky are not always blue, and character color can vary depending on skin tone and light. Broadly speaking, the time of day and ambient light alter the color; look around you and learn accordingly. (Translator's note: If you look at your colors in RGB, your grass color (for instance) shouldn't have 00's for the red and blue components. By the same token, your sea and sky shouldn't be pure blue, and even stones, which we think of as grey, should have some variation in color, following the rules above. Using HSL can help you avoid falling into this trap.) -- I decided to conclude this tutorial as I started, and remind you that the rules set here are by no means set in stone, but rather simple advice. This chapter gives you many rules for making good color palettes, but the most important things are good taste and practice. Also, if you think you can improve your palette beyond the rules, do not hesitate to do so. Ultimately, it's the result that counts.

Chapter 6: Anti-aliasing ›

Table of Contents