Beginning Pixels - Color Ramps

Talk about things that are not making games here. But you should also make games!

Moderators: Bob the Hamster, marionline, SDHawk

Post Reply
User avatar
BMR
Metal King Slime
Posts: 3310
Joined: Mon Feb 27, 2012 2:46 pm
Location: The Philippines
Contact:

Beginning Pixels - Color Ramps

Post by BMR »

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:

Image

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:

Image

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:

Image

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:

Image

Well, now that we have a ramp that changes in both Lightness and Saturation, how would it look in the sprite?

Image

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:

Image

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:

Image

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!
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
User avatar
Gizmog
Metal King Slime
Posts: 2622
Joined: Tue Feb 19, 2008 5:41 am

Post by Gizmog »

None of the images load for me. Anyone else having that problem?
User avatar
BMR
Metal King Slime
Posts: 3310
Joined: Mon Feb 27, 2012 2:46 pm
Location: The Philippines
Contact:

Post by BMR »

What's showing up instead? Just a bunch of "this image cannot be found"s? The images are hosted on Photobucket, so might be a problem with that.
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
User avatar
Bob the Hamster
Lord of the Slimes
Posts: 7658
Joined: Tue Oct 16, 2007 2:34 pm
Location: Hamster Republic (Ontario Enclave)
Contact:

Post by Bob the Hamster »

They show up for me, but I notice if you copy and paste the image URL into a new tab it rediredts to an HTML page.

That probably means that photobucket is doing some referrer-checking voodoo, which is going to break images on certain combinations of browser and security settings
User avatar
BMR
Metal King Slime
Posts: 3310
Joined: Mon Feb 27, 2012 2:46 pm
Location: The Philippines
Contact:

Post by BMR »

Hmm, were you able to see the images in any of my other article thingies? I've only ever used Photobucket for image hosting.
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
User avatar
kylekrack
Liquid Metal Slime
Posts: 1240
Joined: Mon Jun 16, 2014 8:58 am
Location: USA
Contact:

Post by kylekrack »

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.
My pronouns are they/them
Ps. I love my wife
User avatar
Mogri
Super Slime
Posts: 4668
Joined: Mon Oct 15, 2007 6:38 pm
Location: Austin, TX
Contact:

Post by Mogri »

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.
Last edited by Mogri on Thu Jun 04, 2015 10:30 pm, edited 1 time in total.
User avatar
Gizmog
Metal King Slime
Posts: 2622
Joined: Tue Feb 19, 2008 5:41 am

Post by Gizmog »

It works in Firefox but not Opera. Most of the time I have trouble seeing the stuff you put on photobucket in Opera, so that's not too surprising. Sorry
Post Reply