Hue Shifting Mini Tutorial

Looking for a tutorial or resources? Take a look-see in here first, and see if we’ve got one on file! =D
Post Reply
User avatar
Posts: 402
Joined: Sun Jul 01, 2012 5:40 am
Avatar Base: Glume

Hue Shifting Mini Tutorial

Post by ClefairyKid » Mon Jul 09, 2012 8:06 pm

This is a copy of the post I made as C+C on someone's doll in the dolls section of the forum, but I felt that it would be great advice to anyone wanting to learn how to pick fun colour palettes that use "hue shifting". Baring in mind, that this wasn't something I planned out in advance or anything, I'll need to find a way of orgnaising what I mean in a proper tutorial at some point, but for now, I don't want to keep repeating myself so here it is :P Be warned, it's quite a read lol

In order to demonstrate what "hue shifting" is, I made these little animated gifs of the colour picker I use in Photoshop, not everyone will have the luxury of getting as much info about each colour as I do, but I hope it illustrates what I mean for educational purposes, you don't need a fancy picker like this to pick colours this way but it can help a lot for those still learning.

Ok, so, your greens for your green dress stay entirely within the green part of the colour spectrum, and most of you would say, that's normal isn't it? Well, in the weird and wonderful world of hue shifting, it's not enough to simply colour green with greens. We need to get outside the green section of the spectrum for the colours to really "pop".


Ok, so that second one looks really weird hey? But it's actually a technique used by lots of artists in all mediums, painting, manipulations everything, and it's especially useful in pixel art.

See how there's a rainbow next to the bigger square of colours? That's what I mean by the colour "spectrum". In hue shifting, we start the shadows off in the colder colour of the thing we are colouring, so in this case, we are colouring "green", so the colder colour to that is blue. So you can see that the colours start in the blue of the spectrum and head down into the greens from there. But that's not all, highlights are usually comprised of the warmer colour to what you're colouring, so in this case, yellow. Therefore you can see that after the arrows move through the green area, they finish in the yellows. This makes an especially nice palette for plants, for many have a blueish green shadow and light yellow highlight.

It's also important to note that in the first one, the colours you've used go straight up even within the green of the spectrum. It's usually best to make sure that the little circle (representing the colour picked) moves diagonally on that bigger square of possible colours, not just up and down on the rainbow "spectrum" on the side. This means that the amount of saturation the colour has is more balanced with the amount of "dark" and "light" or "luminosity".

So when a colour is picked, we have to consider, what is it for? The shadow or a highlight or mid colour? Whereabouts on the hue spectrum is it? Is it warmer or colder? How much dark or light is there? And how much saturation? Some people prefer to have their end highlight colours with high saturation and the palette I showed here does that, you can see the little circle starts to move back towards to the way it came, but continue up a little at the very end.

The second palette example I used here I got from ... enerator/1 where you can generate lots of great palletes for use in any pixelling project. You could even use them for paintings and all sorts! There are a few that don't have as much contrast as I would recommend, but most of their greens and blue are especially good, and it's a matter of getting used to this style of picking colours.

Here is a direct palette comparison, you'll see the the one I've suggested has far more colours as well, but this is because those extra colours are there for you to use for AA (anti-aliasing), which helps to smooth the jagged edges that occur often in pixel art. I'll explain that another day.. it's even hard to explain than hue-shifting XD But trust me you'll appreciate those extra colours being there :P


Don't freak out if that's a more yellowy green than you'd overall like for this doll, it's just it was a more contrasted palette for my explanation of how to move from one colour to another. There are darker green palettes you can find on the site I linked above that you might like better that also have some shifting and the extra colours you need, it's a matter of you looking for what you like best there c:

Another example is my beach tutorial, if you want to go and see it in the tutorial section, the sky blues are not just "blue", they start out as light blue and move towards yellow in the spectrum, as well as gaining in "light" as they go down. The sea water is purple in the shadows, blue in the mid colours and cyan/green in the highlights.

It's also helpful to remember that in the colour spectrum, blue and cyan can be considered two different sections, it's not all just "blue", the dark blues are "blue" and the light blues are "cyan", this is important when colouring something that's blue, the highlights will be cyan and the shadows purple, when colouring something cyan/light blue, the highlights will be greenish aqua or yellow and the shadows "blue" or dark blue.

If you have any questions about the technique, or want some help figuring out which colours you should move through on the spectrum for your own project, just comment here and I'll see what I can suggest c: Be sure to check out the Palette Generator Here before asking as you might find a palette on there that suits your needs perfectly ^^
Community Volunteer for the Pixel Art Gallery on deviantART
On the Pixel Team of TheQuiltingBee

Member of Pixel-Empire & Pixel-Joint

Post Reply

Return to “Tutorials and Resources!”