8bit And 16bit Color Palettes

It took me quite a while to understand how 8bit and 16bit palettes work.

To spare you the search, I've decided to write this guide.

Motivation

Creating authentic 8bit and 16bit graphics requires understanding palettes. There are programs and algorithms, which transform your images into 8- or 16bit. Since algorithms cannot guess the intention behind the color choice and miss the context, creating them yourself is more flexible and results in higher quality. It also prevents the loss of details due to quantization. Additionally, to some, pixel-art is about control, and creating the palette gives such.

8Bit Graphics

During the era of the Nintendo Entertainment System, the technology worked with 8bit. Therefore the color of a pixel is represented by eight ones or zeroes. Today a pixel carries up to 32. You might be familiar with the red, green, and blue or RGB, where we split a color into three components. However, dividing 8bits into three colors is ambiguous. That's why there are formats for palettes. RGB332 is the most common for 8bit. It means we assign 3 bits to each red and green, and two bits to blue. A lighter orange would be 111 100 01, which would be 7 for red, 4 for green, and 1 for blue. That's nearly 0, so almost black.

Comparing the colors.
Left: Black; Right: Our Orange

What Is A Palette

Better idea: We map each RGB value onto a level. 

For example, let's map the following blue levels:

00 -> 0

01 -> 79

10 -> 155

11 -> 255

The color levels (right-hand side) the bits map to is our palette. Back then, hardware limited us to use one palette for all drawn on the screen at the same time. Years later, the Super Nintendo Entertainment System was released. Powered by 16bit, our capabilities increased immensely! A typical format for 16bit is RGB565. Today we use 24bit ("true-color") and the RGB888 format. Some formats use RGBA, followed by four numbers, where A (="alpha") stands for the transparency.

Side note: The sum of the numbers does not need to add up to the number of available bits. Ergo RGB333 is a valid format for 16bits.

Creating A Palette From Colors

Using preexisting colors to create a palette takes three steps. First, choose a format. Then add them to your palette.

Let's use the following colors for an 8bit palette of the format RGB332:

	Red	Green	Blue
Black	0	0	0
Color 2	212	211	198
White	255	255	255
Color 4	248	216	198
Color 5	248	197	198
Color 6	232	173	159
Color 7	97	99	43
Color 8	117	234	73

The format gives us 3 bits for red and green and 2 bits for blue. The formula for the number of representable levels is 2^bits. That is enough for 2³ = 8 levels of red and green each and 2² = 4 levels of blue. However, our colors have six unique levels of blue (0, 43, 73, 159, 198, 255). Therefore we can't represent all eight colors.

Quantization

Quantization, the third step, will help us here. For this one, we'll merge close color levels.

Our two colors:

248 red, 216 green, 198 blue            232 red, 173 green, 159 blue

will then (for example) become:

248 red, 216 green, 198 blue            232 red, 173 green, 198 blue

By choosing a good looking and distinguishable color level, we can optimize this better than an algorithm. Then we continue adding all needed colors and quantify them to our palette. Now with our palette created, we can color the pixel art.

Tips And Tricks

Reminder: In 8bit and 16bit video games, everything on-screen at the same time uses one palette. Therefore use the same palette for all associated sprites.

The difference between darker colors is harder to notice. Thus use less dark color levels.

Examples

Senko Pixel Art, 16Bit Palette (RGB565)
 drawn by GreenyNeko

This pixel art of Senko uses an RGB565 palette with the following color levels:

Color	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	...	32
Red	0	97	126	155	174	197	205	212	222	227	232	248	-	-	-	-
Green	0	46	54	60	83	99	106	163	173	188	197	207	211	216	224	234	255	...	-
Blue	0	43	48	60	73	88	93	101	118	159	175	198	236	255	-	-

Notice that there's still space in the palette marked by the "-"s.

Senko Pixel Art, 8Bit Palette (RGB332)
drawn by GreenyNeko

This one uses an RGB332 palette with the following color levels:

Color	1	2	3	4	5	6	7	8
Red	0	97	126	155	174	197	212	248
Green	46	83	106	156	173	197	216	234
Blue	43	106	175	198