Using and Choosing Colors

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.

Trainer Tips!

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.

Trainer Tips!

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

24 comments

  1. Archeia says:

    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 :)

  2. Michele says:

    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 ^^

    • Despain says:

      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. :)

      • Michele says:

        Looking colors and not number is in fact a more relaxing approach xD

        Btw, I think I got it, thank you again ^^

      • Physeter says:

        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.

  3. Krieghan says:

    Do you adjust saturation in your pallets as well, or does it remain constant?

    • Despain says:

      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.

  4. Wasa says:

    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.

    • Despain says:

      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.

      • Anthony says:

        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.

  5. Slow Learner says:

    Do you make a new colour palette for every picture you do or do you use a fixed palette for everything?

    • Despain says:

      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.

  6. jwgamedesign says:

    OK, so I’m at the point where you’re supposed to make a sprite, and I came back there to recall how to choose your colors and whatnot, but I don’t know what the crap I’m doing.

    Do you just grab a bunch of color spectrums and use what you need? If I have an object that is brown (like a crate), can I hue shift the lighting to yellow and hue shift the shadow to something cooler? I can’t seem to get a close enough color to a cool color without it looking weird.

    Would it be a good idea to build out a form with 3 colors, a middle ground, light and dark color, then build a palette?

    • Despain says:

      Yeah, man. Start with some colors that you like for your “base” or midtone colors, and then use that to come up with the darker and lighter colors. The best advice that I have is don’t get too technical with it. Trust your eyes, and use what looks good.

      One of my friends used to ask me stuff like “should I shift each darker color by N points” and stuff like that, and my answer was always “don’t pay attention to the numbers on the sliders, just do what looks right.”

      Let the colors come about in a natural and organic way. Don’t overthink it. If you have a hard time you can share an image of your palette and I’ll be happy to take a look. Good luck man. :)

  7. basnu30 says:

    Hi, nice tutorial… but i actually come to say i having problem to pick colors, for example i need to create a sword, i have the out line and when i come to think about the color i will use, following your lessons, y try to pick a middle color like a kind of gray, and i try to pick two colors for light and dark shades, but, i’m stuck there because i try to choose a dark color like purple and for the lighter color i try to pick a yellow, but i can’t make fit, so it’s looks weird. Can you help me a bit?

    • Despain says:

      Hard to help with colors without seeing what you are doing. Share an example and I can probably give you some tips.

  8. Kidd The Maniac says:

    This might seem like an odd question, but would you use the same principles for a character whose outfit is largely black? (Like, a more yellow-ish shade for the highlights and something closer to blue for the shadows?)

    • Despain says:

      Sure! At the least, it’s a good starting point. I find that the best looking “blacks” actually have color to them. Sticking to pure shades of gray will look boring and flat.

  9. Hoshea Zackle Santoso says:

    What a good tutorial you have here! Lately, I was confused ho to make a good palettes, then I decided to pick some colors from Secret of Mana or some other SNES games, then just now I read whole of your pixel tutorials, (y) thanks dude, you helped me a lot!

  10. Steffen Simmons says:

    Is the “scary evil alien” supposed to be martian manhunter? Because if it is, that’s awesome.

  11. Eldin says:

    Brilliant stuff right here!

    I wanted to ask for your help though, I was hoping to show you my first real attempt at making a color palette, could I mail it to you.

    Let me explain it in the mean time, I basically started with dark blue, and kept going lighter bit by bit (of course, H, S, and L all change to make sure things are varied), I have more than four color palettes for blue (I’ll try to make them four or under once I get the hang of it), after going all the way until the lightest blue (almost white), I started going to really light yellow, then started increasing the yellow color.

    I was just hoping you could tell me if this is sound, as I’m already making a game and can make good looking pixel art, yet don’t fully understand making palettes, which really bugs me.

    Thanks for your time Despain, hope to hear from you soon!

    Eldin

Leave a Reply

Your email address will not be published. Required fields are marked *