The humble color picker. We all use it. Well, we all should be using it at any rate. I'm gonna use it as a starting point on explaining one way you might choose colors and shade some pixel art mainly because it is such a fundamental tool for both of those purposes. There are a lot of versions of color pickers around, but here I'll mainly focus on the Windows default (the kind used with MSPaint). I'll give some notes on what I know about some of the others (Photoshop, Gimp, etc.), but for the most part the 'techniques' (term used loosely) I put up here will be based on the windows default picker. More than likely tho, they'll will still apply to the others with some tweaking.

A lot of this will be old hat to most of you, but, it's a really basic and necessary tool and I figured it would be a good first step to talking about color, light, and shading. Who knows, you may pick up something new, and, please, feel free to post additions or ideas for tips and tricks with the color picker in the forum or comments.

So, here it is in all it's Microsoft Glory:

Personally, there's a lot that could be improved upon UI-wise. But, it's simple and effective for most things. Many image editing programs use it (since it seems to be easily called from the Windows API thingee) such as the old warhorse MSPaint, GraphicsGale, the DMI editor

Here's a breakdown of all the crap on the picker, in handy link-form! Excitement!

1. (A) The Basic Colors Palette
2. (B) The Color Square
3. (C) The Luminosity Slider
4. (D) The Red, Green, and Blue (RGB) Values
5. (E) The 'Add Custom Colors' Button
6. (F) The Custom Colors Palette
7. (G) Your Chosen Color
8. (H) The Hue, Saturation, and Luminosity (HSL) Values

Really, for most purposes, the two big ones are the color square and the luminosity slider, so we'll start with those.

The color square (B) is the large box on the right side of the picker that displays what you could roughly consider the full visible spectrum of colors any object can have. You can see it starts with red over on the left-hand top side and moves through yellow, green, cyan, blue, purple, and back to red (notice that it can be thought of as basically looping back around to red). These represent all the basic primary colors () available with the spaces between those 'pure' colors being blends of the two next to them. In other words, what most people would call orange will fall between red and yellow on the top side of square, just as purple would fall between blue and red.

There are two systems of thinking about color out there: the subtractive system (for media that reflects light), and the additive system (for media that emits light). The subtractive system is used in both traditional art (such as paint, pencil, and dyes) and gets it's name from what happens when it's pigment based colors are mixed together. If you take equal amounts of cyan, magenta, and yellow (CMY) and mix them together, the pigments that make up ink or paint absorb more and more light eventually resulting in black (or close to). In printing, actual black ink is added to the mix to decrease cost and speed drying times (and get closer to true black), so CMY becomes CMYK (K=black for some strange reason).

The additive system, on the other hand, is based around media that emits light, like the crystals in LCD monitors, the cathode rays and phosphors that make a crt monitor or television, and the magical pixies that make plasma TVs glow. It's called additive because when it's light based colors (red, green, and blue - or RGB) are mixed together in equal ratios and sufficient amounts, they result in white light.

Although not really a system like those above, Hue, saturation, and luminosity (or sometimes Brightness) or HSL (HSB) is a very useful model for describing colors . In this system, the color spectrum itself (red, yellow, green, cyan, blue, magenta, red again - and all the colors between those) becomes a single value on a slider: Hue. Saturation is the 'amount' of color shown. In other words, high saturation red would look close to sports car red or Japanese temple red, whereas low saturation red would look more like the red-grey of a ship's hull, or a rusty gate. All colors, when saturation is lowered, will become greyer and greyer and 'lose their color'. Brightness is the amount of all the other hues that are being added to the hue you've chosen. In practical terms, this means all colors move towards white as their brightness increases, and all colors move towards black as their color decreases. If brightness is controlled by a slider, like in the default Windows color picker, then the exact center of that slider will produce the most 'pure' colors of the chosen hue? Make sense? No? Well, too bad.

The HSL color model is the one that, I think, is the easiest to think with while using the MS color picker. Here: Here's the color square, again. See how the top represents the highest saturation (the most amount of 'color'- in this case green), while the bottom represents the lowest saturation (the least color or grey). Go ahead and bring up the color picker in MSPaint or something that uses the default Windows picker. Move those cross-hairs around in the color square using your mouse while keeping your eye on the color box (G). Now pick a hue (color) at the top and move the cross-hairs slowly down. See how it becomes greyer and greyer? Pick another color and do the same. In fact, pick them all and try it. Get to know how the colors look when you decrease their saturations. They'll all become grey around the bottom of the square, but those tones you get while getting to the bottom all have their own flavors. In fact, now get up from the computer. Really. Do it. Those staples in your butt will come out easy, trust me. Now wander around and look at the various colors of your room, house, clothes, etc. You might even go outside. Ok, no. I won't ask you to do that. Have you noticed how many things don't actually have highly saturated colors? Most, in fact are somewhere in between the top of the square and the bottom. Even the quality of light will change the color of an object (sometimes extremely change) depending on the type of light and where it's hitting the object.

So if hue is the left-to-right dimension of the square and saturation is the up and down, where do we control the brightness or luminosity of the color we want? Well. That's where the luminosity slider (C) comes in. Positioning the black triangle next to the slider (with your mouse) will give any hue at it's middle brightness (even amounts of light and dark), and therefore (if you've given the hue enough saturation) will give you colors at their fullest. There's probably a buddhist koan riddle in there somewhere about balance, but I'll leave that to someone else.

One way to think of both the combination of both the color square and luminosity slider, together, is being a way to describe colors in a 3d space as cube (or cubazoid, or whatever geometrologists would call it). The color square could be the front of the cube and the slider would describe the depth of the cube. If we take hue to be the left-to-right or x coordinate, and the saturation to be the top-to-bottom or y coordinate, the luminosity slider can be thought of as the back-to-front or z coordinate. Wut?

So brightness or luminosity controls how far back (or dark) the color is. Here's the same pic with the slider overlayed and set at the middle luminosity value. The color chosen is down in the lower right hand corner. Pretty damn green still, considering it's only got half its full saturation (the cross hairs are halfway between the bottom and top of the color square). Notice that, if we moved the slider towards the back, all colors would eventually become black.

But wait...what if we wanna add even more brightness. Only half (the dark side) of the color 'cube' is represented. Here's the other half: Notice how all colors move toward white as you move up the slider? So if we wanted to get a color that's lighter than the one we chose before, we'd actually be in that new half of the 'cube'. Let's make it transparent first: Then we can move the slider (or z coordinate) towards us, and where those imaginary lines intersect, is the new color (shown in the lower right corner).

Hopefully, this hasn't confused the issue. To put it simply, the luminosity slider will make a color lighter or darker as needed but won't change the hue itself (although, note: as all colors move toward black or white (which have no saturation themselves) they will lose saturation - the point of highest saturation or 'fullest color' is the middle of the luminosity slider).

So, lets' do something that's actually pratical to game art with all this theoretical bs. Speaking of the luminosity slider, this control is often the one you'll use the most when making a color ramp. Color ramps are those small grids that you'll sometimes see on a piece of pixel art off in the corner. It was a way of for people to keep track of what colors they'd already put down when you only had 4, 8, 16, 32, or 256 colors back when computers couldn't display 24-bit (full color) digital art. They also make it handy for reselecting colors you need again by just using the eyedropper tool on them. They can be small or large, plain-jane and functional or fancy and geometric, or sometimes even act like a kind of signature for the artist that did the piece (as many people have a style of color ramp they use). Here are some examples:

One of the conventions of color ramps are that you group a single hue (like blue, green, cyan, magenta, orange-red, etc.) together and simply stack shades (different luminosities) on top of one another. So if you've got a de-saturated green color ramp, you'd place the lightest shade on one end of the ramp and place each darker shade after that one until you'd reached the darkest one:

They help in that, by constructing a color ramp, you can go ahead and have all the shades of a color ready without making them as you need it. Say, if I was making a red sphere and needed maybe five shades of red to do an ok job of shading it. First, I'd set the luminosity slider to about midway between the top most and bottom most settings (just for this example - you can start higher or lower, just leave some room above and below).

Then, I'd go ahead and pick my basic red inside the color square around the red stripe and move up or down depending on how much saturation I wanted. I'll choose a fairly unsaturated red, halfway between bright red and grey.

That's my basic color. From there, I can place that on my page (for a color ramp), add it to the custom colors palette or main palette (if in something like MSPaint), or simply leave it in my palette window (in something like Graphics Gale). I'll add it to the color ramp for this part.

Next, I'll go back into the color picker and start making different shades of this red. Let's say I need about five shades of this to pull off a good sphere (you can pick more or less, depending). So, if I count my original red as the mid point shade, I'll need 4 more: 2 lighter, 2 darker. I'll move the luminosity slider up to the lightest shade that I think I'll need (WITHOUT moving the crosshairs in the color square!). I'll also make a mental note as to where the slider triangle ended up (you'll see why). When I'm happy with that shade, I'll put it on the color ramp (leaving space for the shade in between the lightest and the middle shade).

Now, again, I'll go back to the color picker to choose the color in second lightest shade. Since I made a mental note of where the slider was for the lightest shade and the middle shade, I'll just move the slider directly in the middle of those two spots (if I happened to forget where they were, you can use the eyedropper and color picker to go back to those shades and check the slider on them). Now, I've got the second lightest shade of red.

We'll do pretty much the same for the two darkest shades, reselecting the middle shade, moving the slider down until we get a good shade for the darkest red and then getting a second darkest shade by splitting the difference between the two positions on the lum. slider.

Now we've got all five shades we need, we can draw and shade a sphere.

Another technique you can use for constructing a color ramp is to not only change the luminosity value for each shade, but to also change the hue and/or saturation at the same time as you change the luminosity. Your basically changing the color of the shade as you change the brightness.

In other words, your darkest shades in a color ramp might start around the blues in the color square. Every shade after that, while moving the luminosity slider up, you'd also move the cross-hairs in the color square a bit more away from blue and into the desaturated greens. Then, you'd slowly work your way over to the yellows. Until you ended up with your brightest color: a yellow. Here's the finished ramp: Notice how it changes hues (and even saturation) as it moves from the darkest to the lightest shades. Here's what a goofy portrait might look like shaded with that hue-shifted color ramp. Blue to green to yellow. So, you don't hafta limit yourself to one color on a single ramp. Hue-shifting can add life and depth to what would otherwise be a monochromatic (single color) picture. (Here's the same portrait using a single color color ramp:) Monochrome: green to...green.

Here's some other possible hue-shifted ramps (but by no means all the possibilities). Purple to red to yellow. Brown to grey-green to cyan. Brown to gold to light cyan. An extreme case. Blue to purple to orange to yellow to green to light cyan.

Some other examples of hue-shifting (Thanks to the good people at Pixeljoint):

• http://www.pixeljoint.com/pixelart/14427.htm
• http://www.pixeljoint.com/pixelart/15153.htm# (The color ramp is right above the dragon's head)
• http://www.pixeljoint.com/pixelart/6856.htm
• http://www.pixeljoint.com/pixelart/20539.htm# (You can see it mainly in the towers)
• http://www.pixeljoint.com/pixelart/19715.htm
• http://www.pixeljoint.com/pixelart/2376.htm
• http://www.pixeljoint.com/pixelart/17980.htm
• http://www.pixeljoint.com/pixelart/14360.htm

The Basic Colors Palette: Mickey Soft has stored all the colors that they think you'll ever need right here. Aren't they swell? Most of the primary colors are here (red, green, blue, cyan, magenta, yellow, black, white). But really, unless you're looking to draw some old school Marvel comics or your own fangame based on the Sunday edition of 'Ziggy', then you'll need more than these.

The Red, Green, and Blue (RGB) Values: All colors under the rgb system can be broken down into a mixture of various amounts of red, green, and blue. The values displayed here are the single byte (8bit - or 0 to 255 in this case) amounts of each of the three for your current chosen color. If you had chosen a bright, highly saturated orange, for instance, the numbers might read: red 255, green 128 (half full), and blue 0. A purple might be red 128, green 0, and blue 255 (and so on). Some of the combinations are pretty wierd (especially coming from an subtractive color system like paint). For example, yellow: equal parts red and green (!). Getting to know what some of the ratios and combinations do will help if you ever hafta use rgb sliders or program HTML, CSS, or even DM.

The Hue, Saturation, and Luminosity (HSL) Values: The other way of numerically describing a color, HSL (or its other name, HSB - Hue, Saturation, and Brightness) lets you change a color not by remixing red, green, and blue, but by changing hue (the color), saturation (the 'fullness' of a color), and luminosity (or the amount of white light in a color). In the MS color picker, these values range from 0 to 255 with hue moving from red, through the spectrum, and back to red (incidently, it's pretty hard to guess what color a hue number will be - at least for me), saturation moving from complete grey / no color (0) to full color (255), and luminosity making all colors black at 0, all colors full at 128, and all colors white at 255. Notice how only the first two values, hue and saturation change while moving your cross-hairs around the color square. It's only when you begin moving the luminosity slider around that the last value, luminosity, changes. This is why I think HSL is easiest to use when working with the color picker.

Your Current Chosen Color: This square basically displays your current chosen color, based on the settings of the color square and luminosity slider. Sometimes, in very low color monitors, this will also display a dithered (or checkered) version of the color made up of two other, solid colors, but most monitors at this point can display a full range of colors. This is the spot you wanna check to see if you've got the color you wanted.

The Custom Colors: You can store some of your color choices here (as opposed to the main window palette in MSPaint, or on a color ramp within the pic) using the 'Add to Custom Colors' button (E) to add the current color to the custom colors palette. It's a bit frustrating to use, because, in order to save a color in a new (unused) slot in this section, you hafta click on one of the black (unused) boxes before you choose your color. This wouldn't be a problem, but if you're making a variation or shade of another color and have it chosen (displayed in the 'chosen color' box), clicking the unused custom color slot will change that to black and you've lost your reference. There is, however, a way to select a new slot without clicking that black box and losing the base color.

1. Select your base color (by getting it from one of your palettes (custom or main) or from the color ramp.
2. Bring up the color picker dialog, if it's not already up.
3. Hit Alt-C.
4. You should now see a dotted box outline around one of the custom color slots.
5. Move it to the slot you want the new color to be using the arrow keys on the keyboard (without the mouse).
6. Adjust your base color to the new shade, hue, or saturation you want.
7. Click the 'Add to Custom Colors' button under the rgb and HSL values (or hit Alt-A).
8. Your new color should appear in the slot you selected.

Other variations of the color picker: The Gimp has many types of color pickers including CMYK for printing, RGB and HSV (V for Value) sliders, a color field (which I couldn't get to work well), and preset palettes. HSV is a lil' different from HSL or HSB in that value moves from black to the fullest color, and saturation now moves from white to the fullest color. In other words, setting value high but saturation low will yield white, setting value low and saturation high will yield black, setting value low and saturation low will yield black again (a grey so dark, it's black), and setting both to high will yield the fullest color.

the color circle + triangle: The model here is expressed by the hue (colors) forming a circle around a triangle that has as its three points: highest saturation (the bluest blue), highest brightness (the white), lowest brightness (the dark). It can use a triangle here because, they're using HSV (which has two blacks, one of which can be eliminated from the visual model).

The gimp's own color picker Similar to MS's but instead of having luminosity on seperate slider, they have hue on a slider to the right there. The four corners of the large square represent:

• top-right: high value and high saturation or (fullest color)
• bottom-right: low saturation and high value (white)
• bottom-left: low saturation and low value (grey-black)
• top-left: highest saturation and low value (black)

The Gimp's color picker is somewhat similar to Adobe Photoshop's color picker (or one of it's pickers): (Hssssss...horrible JPG! It burns us!) Although, I've used PS before, I no longer have access to it's plush interior. From what I remember, the picker functions the same as Gimp's, simply with some of the axes switched (top-right is now fullest color, etc.).