Color Design in 256

[Kilyle]

(I don't mean to plagerize; the initial color settings I got from a PDF book on graphics design, which you can download for free at www.gamemaker.nl/feldman.html (and even read some chapters online).  However, the patterns in these color settings, I worked out myself, and I have organized the colors in perhaps a more useful fashion than merely alphabetical listing.)

------------------------
ETA: I have found a wonderful page that converts colors to hex and RGB values. Web colors are written in hexadecimal, with values ranging from 00 to FF. Although it is possible to use intermediary values, such as #112255, most colors are written using multiples of 33: 33, 66, 99, CC, FF. Perhaps not surprisingly, these basic settings turn out to identical to the fifths system (51, 102, 153, 204, 255) that I realized was behind the most common named colors.

Here is the page: www.geocities.com/SoHo/3505/help/colorcube.html

Here is another page. This one deals with color use on web pages, and gives examples of complementary colors, both in foreground and background:
world.std.com/~wij/color/corner.html
------------------------

I had such trouble figuring out color at first that now that I have it figured out I thought I would pass the information on to whomever needs it.

First, you might have had this problem trying to import graphics into RPGMaker: It pops up with an error and says "that file has too many colors."  This means that you have moved beyond the number of colors that the palette can hold.  A palette can hold 256 colors total, which is binary 8-bit or 2 to the eighth power (2x2x2x2x2x2x2x2).  If you go beyond this, the file format changes, the file size goes up (sometimes a lot), and RPGMaker flat-out refuses to accept the file.

Another error that was extremely frustrating for me was when I tried to compile a collection of sprites ripped from various video games.  Individually, each sprite had few colors; collectively, they had more than 256, and as the files that I was working with were already in RTP format (256), they were already bound to a palette that didn't include the extra colors.  So when I cut and pasted my graphics in, the suckers automatically changed colors, and often lost some of the distinction that had been there when I started.  I tried everything I could to trick the computer into keeping my files the correct color, but to no avail.

Luckily, a good understanding of palettes and restricted "color depth" helped me (and should help you) to understand what's going on, and with any luck to work out a compromise that doesn't involve giving up those great colors that make graphics pop.  Ergo, I impart this knowledge to you.

How do you make a file with fewer colors?  Save it in a format that automatically restricts the palette to 256 colors.  One way to do this is to save the file as a 256-color bitmap, then resave it as a smaller filetype, such as GIF or PNG.  This makes sure that at some point the picture had no more than 256 colors, and, while I don't know much about GIF, I know that PNG is a lossless format, so you won't get fuzzy edges (unlike JPG, which is better suited for photographs, and completely unsuited to pixel art).  No fuzzy edges means no merged colors, so no extra colors that you didn't want in your palette.

You will need to determine which colors you want to use, and find a way to put them in your palette.  Now, the only way I know to pick a palette is to have those colors (and no more than 256 colors) in the image before you save it in palette (256) format.  (There are certainly other ways that I'm not aware of, and other graphics programs deal with this a lot better than Microsoft Paint does.)  So take the file I've attached, pick out the colors, paste them into a blank file, and make sure that you like the colors in combination, then save it in 256 format, then resave it in PNG.  If you then use only those colors, it should work fine with RPGMaker.

The question is, which colors do you want to use?  So here goes the crash course in color selection.

First of all, in case you had any confusion, computer colors are made of light, not pigment, so they don't act like markers or paints.  That is, mixing all the colors gives you white, not brown or black, and you get yellow by mixing red and green.  You can see that the color wheel that you might have been taught in school doesn't work the same way.

A computer color is stored as a three values: Red, Green, and Blue.  From what I understand, the intensity (or luminosity), hue, and saturation are based on these values, so I would call them Secondary Values, and we won't need to pay much attention to them.  (Luminosity, for example, is how bright the color is; but a color setting of no color (0,0,0) has no luminosity, while a color setting of all color (255,255,255) has full luminosity, and furthermore if you change the luminosity it changes the color settings.)

A color setting ranges from 0 to 255, for a total range of 256 possible settings (getting the idea?).  The Primary Colors are Red, Green, and Blue.  To get a primary, set the primary's number to 255 and the other two to 0.  The Secondary Colors (Yellow, Cyan, and Magenta) come when you mix two Primaries together: Set two numbers to 255 and one to 0.  Red+Green makes Yellow, Green+Blue makes Cyan, and Blue+Red makes Magenta.  (I might quibble over the names, but meh.)

Now, I found a list of tried-and-true colors (at the site listed at the top of this post).  So I downloaded a palette program (because the Microsoft Paint color handling is deplorable) and started putting the colors into it.  And they all looked pretty nice.  Pretty soon I was trying to arrange them into color groups, because they're listed alphabetically, which doesn't help in comparing two greens side by side.  Then I found that many of the colors didn't seem to fit together, it was hard to tell which category should take the others, and when I thought I had found a pattern, there were holes in it.

Finally, I gave up on that palette and started over, and I started looking for patterns.  And it turned out that a few numbers were showing up over and over again: 51, 102, 128, 153, 204, and 255.  Now, it was easy to see why 255 showed up so much, and 128 was half of that (so a color made with 128's instead of 255's would be half as bright).  But why the others?  And with a stroke of mathematical genius, I realized that, if you ignore 0, 255 becomes divisible by 5, and furthermore divisible by 51 (5x51=255).  So 51, 102, 153, 204, 255 is like saying 1/5, 2/5, 3/5, 4/5, 5/5.  And if you're going to mix paints, using only three colors and zero to five units sounds like a good way to go.

Once I saw this, organizing the chart and filling in the blanks took less than an hour.  I here offer the charts that I have come up with.  (I hope you can figure out a palette program on your own, but if you have trouble figuring out where to put the numbers, PM me.)

First, in working with my unit notation, the highest number comes first, the lowest last.  This calls for rearranging the order of colors.  Red (255,0,0) is noted as 5.0.0.  Green (0,255,0) is noted as 5.0.0 GRB (5G.0R.0B).  Blue (0,0,255) is noted as 5.0.0 BRG (5B.0R.0G).  The order of equal units is unimportant, so I choose to maintain the normal order (thus BGR if Blue>Green>Red, but BRG if Red=Green).  One could shorten the notation further by leaving out the dots (5.4.1 = 541), but as this might be read as only one number, I choose to leave the dots in during this discussion.

So, the Extremes and Primaries:

Black: 0.0.0
White: 5.5.5
Red: 5.0.0 (RGB)
Green ("Lime"): 5.0.0 GRB
Blue ("Royal Blue"): 5.0.0 BRG

Greys range anywhere along the line from 0.0.0 to 5.5.5, with equal portions of all three colors; I shall deal with that near the end.

In what I call "Shades of Primary" (the left column of the chart (3 colors wide)) you start with 5 units of one color and 0 units of both the others (5.0.0).  This generates the three Primaries.  To move the color closer to grey or white (make it less distinct), simply add the other colors equally:

5.1.1
5.2.2......Salmon (RGB), Dark Periwinkle (BRG)
5.3.3
5.4.4

(5.5.5 is white; 4.4.4, 3.3.3, 2.2.2, and 1.1.1 are all greys, and I leave them out of this portion of the chart, as it's more useful to compare them to each other.  I hope you haven't gotten lost in the number switch: each unit is 51 points, so 4.4.4 means 204,204,204.  Conveniently enough, the final digit of all five settings is the same as how many fifths it is.)  Continuing the chart:

4.0.0
4.1.1
4.2.2
4.3.3......Sea Green (GRB), Grayish Purple (BRG)

3.0.0......Dark Blue (BRG), Medium Green (GRB)*
3.1.1
3.2.2

(*Note that the names are not internally consistent--they don't stick to a pattern.  3.0.0 offers the exact same mix for a green and a blue here, yet blue is termed 'dark' and green is termed only 'medium' (medium blue and dark green are other combinations).  Nevertheless, I will use the names given by my source.)

2.0.0
2.1.1......Dark Green (GRB)

1.0.0

Fifteen lines with three possible colors per line--45 possible colors--and only the Primaries and seven other colors get named (ten in all).  Does this mean that only those colors are useful?  I doubt it.  Among other things, you can use the brighter colors for highlight and the darker ones for shading.  So if you have, say, a jacket of Dark Periwinkle (5.2.2), you can use 5.3.3 or 5.4.4 (both are lighter colors, closer to white) to highlight and 5.1.1 (a darker color) to shade.  I haven't yet tried to see if this manner of shading yields pleasing results, so go experiment!

The next column (3 colors wide) is identical to the first, except that it deals with the Secondary Colors, so the pattern is X.X.Y:

5.5.0......Sun Yellow (RGB), Fuscia (RBG), Turquoise (GBR)
5.5.1
5.5.2......Light Yellow (RGB)
5.5.3
5.5.4

4.4.0
4.4.1......Gold (RGB)*
4.4.2......Light Gold (RGB)
4.4.3......Tan (RGB), Light Plum (RBG)

(*Gold, then, is a slightly dark shade of Yellow with a unit (51 points) of contrast to make it slightly gray.)

3.3.0......Avocado (RGB)
3.3.1
3.3.2

2.2.0
2.2.1

1.1.0......Ultra Purple (RBG)

Again, 45 possible colors, but only the Secondaries and seven colors get named.  Same argument as above: Nothing is saying that the nameless colors aren't useful.  Go experiment.

Now, I started to stray from the primaries, and I discovered a rather shocking thing: I could make neons!  It turns out that "neon" (the kind you find in highlighters) means "take a normal Secondary Color and unbalance the mixture" (e.g., take Yellow (Red+Green) and use more Green than Red to make Neon Yellow).  Not that my source's color chart listed them as neon--but in my palette you'll see what I'm talking about.  5.4.0 and 5.3.0 seem to be the strongest neons, so if you want a quick look, go into Microsoft Paint, open "Edit Colors," and type "255, 204, 0" (in any order) or "255, 153, 0" (in any order) into the RGB boxes.

Ergo, the next columns (two sets of 6 colors) I called "Neon Mix."  The first set goes like this:

5.4.0......Chartreuse (GRB), Light Blue #2 (BGR)
5.4.1......Aqua (GBR)
5.4.2......Deli Mustard (RGB), Hot Pink (RBG)
5.4.3......Flesh (RGB), Light Rose (RBG), Lilac (BRG)

(Once you get to equal numbers (5.4.4) you're back on the first chart.)

4.3.0
4.3.1
4.3.2......Lavender (BRG)

3.2.0......Golden Brown (RGB), Blue-Green (GBR), Gray-Blue (BGR), Royal Purple (BRG)
3.2.1......Grass (GBR), Purple #2 (BRG)

2.1.0

Sixty potential colors, fifteen names (1/4 of the possibilities).

The second neon chart goes like this:

5.3.0......Light Orange (RGB), Periwinkle #1 (BRG)
5.3.1......Pumpkin (RGB), Light Blue #1 (BGR)
5.3.2......Dull Green (GBR)

4.2.0......Sienna (RGB), Dark Purplish Blue (BRG)
4.2.1......Purple #1 (BRG), Wine (RBG)*

(*Notice how these two purples differ in that one has twice as much blue as red, and the other has twice as much red as blue.)

3.1.0......Burgundy (RBG)

5.2.0......Florida Gator Orange* (RGB), Bright Blue (BGR)
5.2.1......Tomato Soup (RGB), Periwinkle #2 (BRG)

(*I still haven't figured out why orange is named after gators, which as far as I understand it are green (being bright orange would sorta make 'em easier to spot).  Unless this means the color you wear to avoid being shot while hunting gators?)

4.1.0......Red-Orange (RGB), Bright Green (GBR), Medium Blue (BGR), Crimson (RBG)

5.1.0

(I may have them out of order from the example chart.)
So sixty colors again, and eighteen names--getting better.

Right below the neon charts is a chart of the standard palette colors, the stuff we had to work with back in GW-Basic.  (Odd how they don't look a thing like the stuff I had to work with in GW-Basic, and there's no bright periwinkle, but never mind.)  You'll notice that these use the 5.0.0/5.5.0 method on the brighter colors, and the...what?  Those are 128's.  So the notation would be more like 2.5/0/0 and 2.5/2.5/0 (switching to slashes because I need the decimals).  Basically, they're colors at half strength (luminosity).  The other colors around there are miscellaneous grays and oddities that appear to be part of Windows' base palette, and include those grays used to draw the basic buttons and bars in Windows.

The half color primaries are called Maroon, Green, and Navy Blue, and the secondaries are called Army Green, Teal, and Deep Purple.

The double bar just over from the Windows base palette is a graduation from black to white.  It consists of equal amounts of the three colors, and the names of the colors are as follows:

0: Black
22: Dark Gray
41: Castle Stone
66: Bauhaus Gray
85: Medium Gray
102: Steel
128: Gray (the darker of the Paint standard grays*)
150: Gun Metal
178: Light Gray
192: Bright Gray (the lighter of the Paint standard grays)
227: Off-White
255: White

(*This grey is used as the bars for the 'select area' tool, and as the background outside the image, in Paint.)

Now, you might ask, what's that collection over to the right?  It certainly doesn't look as well organized as the color bars we've been working with so far.  Well, these are the colors on the chart that don't fit into the unit pattern.  You'll notice a good variety of browns and peachy colors, some colors very near to white, and a smattering of other colors that look quite nice indeed.  Now, I don't have these in a good order yet, so I'll just list them here in a semi-categorical order, and you'll have to figure out which is which (obviously, this is no longer unit notation):

Browns:
BROWN: 232.168.144
DARK BROWN: 104.52.0
LIGHT BROWN: 136.96.88
GRAYISH BROWN: 152.140.104
BOOT LEATHER: 160.68.0
SADDLE BROWN: 112.76.48
MILK CHOCOLATE: 144.52.40

Yellow, Orange, and Tan:
BANANA: 227.207.87
KHAKI: 240.230.140
LIGHT BEIGE: 144.132.112
OLIVE DRAB: 107.142.35
TAUPE: 160.144.128
WHEAT: 245.222.179
WET CEMENT: 184.156.152

Greens and Blues:
CADET BLUE: 96.156.152
COBALT: 61.89.171
INDIGO: 8.46.84
MINT: 189.252.201
OCEAN BLUE: 56.176.192
SKY BLUE #1:128.218.225
SKY BLUE #2:0.220.255

Reds, Orangey Reds, and Pinks:
SANDY BROWN: 120.0.0
CARROT: 237.145.33
CORAL: 255.127.80
FIRE BRICK: 165.0.33
MELON: 227.168.105
PINK: 255.124.128
RASPBERRY: 135.38.87
RUST: 112.0.0
WILD ORCHID: 176.48.216

Off-Whites:
IVORY: 255.255.240
LINEN: 250.240.230
SNOW: 255.250.250
EGGSHELL: 252.230.201

On the near-whites, note that it's very easy to confuse them with normal white, particularly if you have a white background.  So surround them with darker colors in such a way that you know they're a color and not just background.  (And you always wondered why the snow in Harvest Moon wasn't just plain white...right?)

Okay!  I hope that helped you to understand palettes, common colors, and how to experiment with making your own colors.  There's enough variety here to let you make just about anything you want even without experimenting, but I encourage you to mess around and find some colors that are uniquely yours (that is, not commonly on the palette of every game maker around the world).  Gambatte!  (Work hard/good luck!)

[WarxePB]

...some insight into 256-colors that I never would've thought of. You like to write, don't you?

[DarkFlood2]

...My brain hurts now.