Pixel Art & Colour Theory

Colour theory is a very important concept to learn before you jump into pixel art, it can literally make or break your piece, even if your piece is fundamentally correct in every other way if your colours look like mud and poo, (not actual mud and poo) so will it.

A lot of this post will be information from outside sources as others have put it much more precisely and eloquently than I ever will :P so lets get down to it.

Hue, Saturation & Luminescence

The Photoshop colour picker is an excellent aid in teaching about colours, open it up and have a play for yourself.

These terms are used to precisely describe colour, Hue is the base identity of the colour ie. red, blue. is it defined on this colour picker by the bar of colours in the centre and the H value to the left. Saturation is the intensity of the colour it is defined on the Photoshop colour picker by the X axis of the large window and the S value to the left. Finally Luminescence is what percentage of black or white is in the colour, a value of 100% being completely white and 0% completely black.


The next piece of information is from a post by Dhaos on Pixelation it covers a lot of values for good colour hues and where to put them, so take in all the magic numbers and keep them close on hand:


[BAISC PIXEL COLOR THEORY]-pixels are much more exact than natural media so you must 'learn' what colors are light and dark*the follow values are the HUE of a color (using RGB to select colors is alot more complicated... I only know like two artists who do it)*I do not include most of the inbetween colors (teal violet, magenta etc...its not necessary right now, I'm only included commonly used colors)


[MIDTONES] (the 'base' tone if you will) +red:5-25hue or 340-355hue +orange/brown:25-40hue (the less saturation this hue has, the more brown it becomes) +yellow: 40-50hue +green: 65-80hue (darkers greens 'hue:120ish' generally look VERY bad unless they are confined to a small area on a pic) +blue: 200-215hue +purple: 220-245hue


[SHADOWS] (where light does not hit...) +red: 0-10hue or 330-340hue +orange/brown: 10-25hue +yellow: 20-30hue (note the shadows of yellow tend to be orange or brown) +green: 80-95 or 120~145 (again...there usually isn't alot of dark green in an image, even a forest scene, so this hue:120+ is ok) +blue: 220-245hue (note...the shadows of blue tend to be purple... perhaps its a pattern...) +purple: 225-245hue (purple generally is its own shadow)


[HIGHLIGHTS] (where light directly strikes an object...used to make specific objects POP)-This section is complicated. It involves hue shifting to figure out-highlights are generally done by shifting your midtone hue to the next brightest colour-red/orange/brown: maximum hue: 35-50 (aka yellow~yellowish-orange)-yellow: maximum hue: 55-60 (any higher and you get green)-green: maximum hue: 55-65 (yellow is brighter...thus it highlights green)-blue: maximum hue: 160-195 (notice the huge-ass range... blue is just weird that way...most greens/teals/light blues can highlight it beautifully)-purple: maximum hue 200-210 (aka blue) OR 300~345 (again huge range, magenta/violet can highlight purples as well)


[COLOR COMPARISON]-yellow->green->orange/brown->red->blue->purple-some colors are brighter than others...its just how colors are-yellows are generally the brightest 'colors' aside from white(s)...-colors blend best if 1)they follow the hue rainbow-thing 2)the tones are seperated by an area of shadow

Please enjoy the cheat notes, i have :P

Next post will be on further colour techniques

Ciao