Beginning Pixels - Color Ramps
Well, I felt like putting together another guide and felt it might be a good idea to do a follow-up to this article. As with that article, this is not a be-all end-all. Rather, it's aimed at the beginner who is just getting into pixel art. I'm sure the more advanced and experienced artists out there will have different opinions on some of these things, so feel free to chime in on anything you might feel needs improvement or you believe is flat out wrong.
Anywho, let's get started.
I. Color Ramps
Now, before getting into anything else, it's important to first look at color ramps. From the previous article, you've already learned about the differences in Hue, Lightness, and Saturation. A color ramp is a collection of colors, typically arranged from darkest to lightest left to right. These represent an organized progression of colors with slight variations in each color. Building good color ramps is essential to creating organized and efficient (in terms of color-count) pixel art.
Now, the simplest of ramps is called a straight ramp. This ramp has only one change, specifically its Lightness, and is probably the first type of color ramp that will be created by people starting out. An example of such is shown below:
Now, a ramp like this is rarely very useful. Why? Because in the real world, nothing ever simply progresses in color like that. A sprite made with this color ramp will look pretty garish and, truth be told, downright ugly. Case in point:
See how horrible that looks? It looks like a big splotch of purple just mushed together. sure, it might be possible to see some of the features, but for the most part it looks like it was carved from a block of Play-Doh and then spray-painted purple. The art in itself, specifically the pixels and their placement, works well enough (or at least I'd like to think so) but the problem is in the colors used. A straight ramp does not work here. How to solve it then?
II. Changing Saturation
Part of the solution is changing a bit of how the ramp progresses. Remember the discussion on Hue, Lightness, and Saturation in the previous article? Currently, the only change is in Lightness. One thing to keep in mind, is that generally speaking, the brighter a color gets (and thus the further to the right of the ramp it is) the lower in saturation it becomes. This means that darker colors tend to have a higher saturation, whereas brighter ones have a lower saturation. Take the following ramp as an example:
This is the same ramp as from before, with the same color values, but with the saturation gradually decreasing from left to right. This combines progressions in the Lightness and the Saturation to produce a better ramp. Take note though, that it's both the Lightness and the Saturation that changes here, as a change in Saturation alone would probably be just as bad as one that changes only in Lightness as shown below:
Well, now that we have a ramp that changes in both Lightness and Saturation, how would it look in the sprite?
Much better. Now, there's some more definition and variation in the sprite, providing some more measure of detail. Still, it's possible to improve on this some more.
III. Hue Shifting
Remember the three values? Lightness, Saturation, and Hue? So far, we've only changed two of those, Lightness and Saturation. It's also a good idea to have some subtle shifts in Hue in your ramp as well. This provides you with a wider range of colors, and once you've moved from individual ramps to a larger palette, it becomes easier to blend colors together, but more on that in another article.
Typically, when constructing a ramp, the further to the right you go, the more the colors will shift towards yellow. The more you shift to the left though, the greater the tendency to shift towards blue or purple. Now, this is just the most general rule (with a whole bunch of color theory stuff behind it that's too cumbersome to get into right now) but as you progress, it's certainly possible to change things around. The main purpose for using hue-shifting, as it is called, is to provide a higher level of contrast along with a wider range of colors. A ramp constructed with this in mind looks like this:
It's fairly subtle, but the right side of the ramp shifts towards yellow, while the left side shifts (even more subtly) towards blue. When applied to a sprite, it looks like this:
It's not a whole lot different from the previous sprite, but it does have some changes. Rather than looking like the entire sprite is purple, you have some variations in the color providing some more detail and a different feel in the areas that use lighter, yellower colors.
Now, keep in mind, these are not rules that are set in stone. It's a good idea to experiment with these little tips on your own, in order to get the most out of your ramps. Also, by practicing and tweaking things here and there, you'll get more accustomed to what works and what doesn't.
And that about wraps it up for this little article. Until next time!
Beginning Pixels - Color Ramps
Moderators: Bob the Hamster, marionline, SDHawk
- BMR
- Metal King Slime
- Posts: 3310
- Joined: Mon Feb 27, 2012 2:46 pm
- Location: The Philippines
- Contact:
Beginning Pixels - Color Ramps
Being from the third world, I reserve the right to speak in the third person.
Using Editor version wip 20170527 gfx_sdl+fb music_sdl
Using Editor version wip 20170527 gfx_sdl+fb music_sdl
- Bob the Hamster
- Lord of the Slimes
- Posts: 7658
- Joined: Tue Oct 16, 2007 2:34 pm
- Location: Hamster Republic (Ontario Enclave)
- Contact:
I have to bring up your comments on straight ramps. Where that picture specifically clearly gets blobbed up and difficult to see, I think the palette does work in some ways. The torso looks... well, not the best, but I actually rather like the legs and the frontal abdomen that connects the human to spider parts. Because the only change is the lightness of the colors, it gives a really smooth transition, and makes the legs look pretty, because the shadow cast on them gives a more consistent gradient.
So I agree with you, especially when it comes to saving color slots in a palette, but I find straight ramps particularly visually appealing when trying to achieve a softer look, which I think is worth mentioning.
So I agree with you, especially when it comes to saving color slots in a palette, but I find straight ramps particularly visually appealing when trying to achieve a softer look, which I think is worth mentioning.
My pronouns are they/them
Ps. I love my wife
Ps. I love my wife
Palette Pal is very useful for playing with color ramps. (Click and drag to highlight a section of colors to edit.)
This is something I've taken a recent interest in, so I look forward to reading more of what you have to say on the topic.
This is something I've taken a recent interest in, so I look forward to reading more of what you have to say on the topic.
Last edited by Mogri on Thu Jun 04, 2015 10:30 pm, edited 1 time in total.