Before I dive into the creation of color palettes, I want to explain how to maximize each color, to get the most out of every color in your palette. Here’s an example color ramp:
Nothing about it seems particularly special. But notice that some of the colors are arranged in very thin bands while others are in larger blocks. I’ve arranged it this way to show how some colors are used as larger colors (“cluster” colors, to be used as a base shade for a surface), while others are in-betweens (“buffer” colors, to help blend the clusters together).
What happens if we change the ratios a little bit?
This ramp uses the same colors, but as a whole it looks lighter because of the way the colors are used—the relative amounts of each color are different, the clusters and buffers have been reversed. The result is a shift in the entire ramp’s saturation and brightness. The contrast, however, stays at at the same level of pleasant readability.
What’s the point of this example? To show that you can push your colors to work for you, rather than be confined by them. I’ve seen a lot of people trap themselves in with their palettes because they were too afraid to push their colors.
It leads to another point of contrast—one that you will constantly be using as a good pixel artist: a color looks different depending on the colors around it, and how much of those colors are used.
Why conserve colors? In the old days, hardware was a lot simpler and games had very specific limits about how many colors they could use. Getting the most out of each color was perhaps the most important aspect of pixel art back then, and the idea has carried over to today. Modern games don’t have those kinds of limits, but it’s still good practice to keep your palettes as small as possible. Not only is it much easier to manage your art’s colors with a tighter palette, but it will create visual consistency that will hold everything together.
So it’s time to make a palette. There are a lot of ways to go about choosing your colors. A lot of people will try to hammer out a “definitive” palette before they even start working—I’m guilty of that myself. It’s not the best approach, though. The best palettes are tweaked as they are being used. Don’t feel the need to trap yourself into something.
But where to start? Usually with some basic color ramps.
A color ramp is a grouping of colors that give you a range of shades to work with, usually arranged from darkest to brightest. This is a color ramp:
It’s not a particularly good one, though. It’s what we call a “straight ramp”—because it goes straight from dark to light. In other words, the only thing that changes is the brightness or luminosity, but not the hue or saturation. In a good ramp, the hue will change—because that’s how light works in real life.
In this example, the darkest shade hints towards a purple or red hue, while the lightest shade is green (on its way towards yellow). As long as the colors in the middle are recognizable, the overall huge of the ramp will be preserved. And don’t forget to always keep contrast in mind.
This is called hue-shifting.
Typically, darker shades will have less saturation and be skewed towards blue or purple, while lighter shades will be more saturated and skewed towards yellow. But while that’s a good starting point, don’t feel the need to confine yourself to those rules. Once you’re comfortable with making strong color ramps, be adventurous!
A color palette is a collection of your color ramps, and its what you would use to keep your colors organized. There are lots to talk about with palettes, so I’m going to start by showing you an example of what not to do.
I see this a lot. And when I say “a lot”, I mean I see this constantly. Everywhere. It seems to be the first thing a new pixel artist will make when trying to come up with their own colors.
So why is it bad? Aside from the immediate problem that the ramps are “straight ramps”.
The big problem is that this isn’t a unified palette, but a collection of individual ramps. It doesn’t appear to be created with the big picture in mind—each color was built individually, and as a result the palette has a disconnected feel. The reds were created darkest to lightest, and then the yellows, and then the greens, etc etc. There’s no overlap between the colors; they don’t mix together at all.
This is how I build a palette:
Sure looks different, doesn’t it? When I create a color palette, I’m not afraid to make a mess. I treat it like a real painter’s palette (remember that pixel art is much closer to painting than drawing).
The idea is in the unity of the colors. Each ramp branches away from the same darkest shade and eventually reach the same lightest shade (notice that the light yellows in the opposite corners are in fact the same color). As a result, the entire palette is cohesive. I suggest that you take a similar approach—don’t feel the need to arrange your ramps into neat little lines just because you’ve seen them organized that way before. The colors need to flow into each other, so keep it organic. You can always rearrange them afterwards.
Before we move on to the next section, here’s a scary evil alien:
The sprite on the left is made with the first palette (the bad one with the straight ramps). The obvious problem is that the saturation is way too bright—it’s an eyesore. More relevant, the blue and the green don’t mesh together very well at all—the contrast is so high that the sprite doesn’t feel cohesive. At the same time, the contrast within the color ramps (particularly the green), is too low. The result is an awkward mess: the green areas look very flat, but the blue is so different that is stands out too much.
The guy on the right uses colors from my more organic palette, and it’s obvious that the colors blend together in a natural way—if you look at his legs, you can see that the darkest shade of blue works overtime as the darkest shade of green.
That should cover colors and palettes, at least the important stuff. In the next section we’ll start putting this into use and making some sprites from scratch.
Next: Form and Light
Oh god I love how you do your palettes, that is beautiful to look at~ I use the standard build colors and sometimes painter palette but not to this extent~ Thanks for sharing :)
Hello, I have a question.
But before asking I want to tell you your post are delightful :) These on pixel art and the ones about writing too. Don’t stop writing!
So, I’m trying to begin doing my palette and I need to do, for now, just various tone of green. I could copy the samples there are here, but I really want to understand [u]how to choose[/u] the color for the gradation. i.e. how much I have to shift hue, to simulate real life color change? You just choose color when you like them or use a formula (like +30 hue, -20 brightness, +5 saturation and so on)?
Thanks so much for the post and the whole blog ^^
Hey thanks for the comments. :)
As for colors, I go entirely by eye. As the colors get brighter, I usually tint them toward yellow and increase the saturation—the brighter the color, the more I tint it; so if there was a formula it would be exponential (does that make sense?) But really I trust how it looks. I don’t look at the numbers.
I might make another tutorial actually that dives into this a little deeper; a lot of people have asked me about the same thing.
Good luck. :)
Looking colors and not number is in fact a more relaxing approach xD
Btw, I think I got it, thank you again ^^
This is a great, detailed tutorial so far. Thank you a lot for building it up!
Though I’m struggeling with the same problem, how to choose the colors. In my case I need grey’ish colours for a twilighted fishguy.
As clear and logical, as your overall color palette is, the green and blue one is not helping much, since the colors are bouncing around in the color circle without the clear direction of the overall color palette.
An extra tutorial part would be great, but I will try a bit for myself.
Do you adjust saturation in your pallets as well, or does it remain constant?
Sometimes! Some people will tell you that colors get desaturated as they get lighter, other people will tell you they get desaturated when they get darker. It depends on what you are trying to create. I don’t use any formula, I use my eyes. Trust your eyes and don’t feel the need to follow any rules.
Hmm, there seems to be some misinformation here. From my studies in 3D and producing photo-realism (i understand that’s not what this is), colors tend to become more saturated as you get into darker values, and tend to go towards white and become less saturated with light. Plastics do however have a highlight of the material color. While metals and woods will reflect the lights color. Desaturation of your deep colors will also tend to make characters blend in with backgrounds that are desaturated to help depth.
Depth can be represented in a number of ways, lower contrast, lower saturation, and blurring. Darkness however doesn’t mean less saturation, and this is especially true of fabrics and other translucent items that receive light on one side but not the other.
Sure, that’s all true when working with high-res or photorealistic images, but pixel art is a horse of a different color. Our aim with pixel art is to maximize readability in a small space, and these tutorials have that goal in mind—especially as they are aimed to beginners.
I agree with both of you. if you take a step back and your character or prop is blending with the whole then maybe your saturation isn’t pushed enough, however Despain is correct in the fact that readability is the highest importance. Although I am new to pixel art, the hardest part for me is understanding the subtleties while trying to maintain your own style is the tricky parts. ;)
I appreciate this entire tutorial. Keep writing, you do well with it.
Do you make a new colour palette for every picture you do or do you use a fixed palette for everything?
Both!
I’ll usually have a different palette for each project that I’m working on, to retain consistency within that project. There are a few palettes that I really like, though, and use them for multiple projects.