Difference between revisions of "Color palettes"

From TheAlmightyGuru
Jump to: navigation, search
(R1-G1-B1, 3-bit, 8 Colors)
(R1-G1-B1, 3-bit, 8 Colors)
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
A '''''color palette''''' in computing terms is a lookup of colors that a display system can use. This can either refer to the complete color set it can use, or just the color set it can use at a time, or in a certain area on the screen. Modern computers have a palette in the billions of colors, but in the early days of computing, color palettes were far more limited.
+
A '''color palette''' in computing terms is a lookup of colors that a display system can use. This can either refer to the complete color set it can use, or just the color set it can use at a time, or in a certain area on the screen. Modern computers have a palette in the billions of colors, but in the early days of computing, color palettes were far more limited.
  
 
==True Color, 24-bit 16,777,216 Colors==
 
==True Color, 24-bit 16,777,216 Colors==
 
[[Image:Color Palette - 24-Bit Color.png|thumb|128x128px|256 - Red, 256 - Green, 256 - Blue.]]
 
[[Image:Color Palette - 24-Bit Color.png|thumb|128x128px|256 - Red, 256 - Green, 256 - Blue.]]
So-called "true color" is a 24-bit RGB color system which uses a full byte (8-bits) for each red, green, and blue intensity resulting in 16,777,216 colors. Here is an example of a photo utilizing 24-bit color.
+
So-called "true color" is a 24-bit RGB color system which uses a full byte (8-bits) for each red, green, and blue intensity resulting in 16,777,216 possible colors. The human eye is only capable of distinguishing around 10 million colors, so true color is good enough to store any image that humans are capable of perceiving visually (although, not all display devices are capable of rendering the colors perfectly). Here is an example of a photo utilizing 24-bit color.
  
 
[[Image:Color Palette - RGB - Test.png]]
 
[[Image:Color Palette - RGB - Test.png]]
 +
 +
==High Color, 16-bit 65,536 Colors==
 +
[[Image:Color Palette - 16-Bit Color.png|thumb|128x128px|32 - Red, 64 - Green, 32 - Blue.]]
 +
So-called "high color" is a 16-bit RGB color system which uses 2 bytes to describe each color in the palette, yielding 65,536 unique colors. This is usually setup using 5 bits for red intensity, 6 for green intensity, and 5 for blue intensity, or 32 shades of red and blue, but 64 shades of green. Some systems use 5 for each intensity for simplicity sake, and are technically only 15-bit.
 +
 +
Although a fair amount of display hardware made use of 16-bit color, few graphic formats support it. Regardless, it was a very large step up from 8-bit palettes because it results in enough colors to display photographs of decent quality while still being half the size of any 24-bit color image. Notice how the example below looks nearly identical to the 24-bit color original. It's only when you zoom in that you begin to see the quality loss.
 +
 +
[[Image:Color Palette - 16-Bit Color - Example.png]]
 +
 +
==32-bit (24-bit with alpha) 16,777,216 Colors==
 +
32 bit color is actually 24-bit color with an additional 8-bit intensity (256 levels) for alpha transparency. Alpha transparency means, when a pixel is drawn, it should be merged with whatever pixel already exists in the current location. An alpha intensity of 0 is totally transparent while an alpha intensity of 255 is totally opaque.
 +
 +
==Deep Color, 30/36/48 bit, billions+==
 +
Deep color is a blanket term for any color depth greater than 8-bits per color intensity. 30-bit uses 10-bits each for red, green, and blue resulting in 1,073,741,824 possible colors. 36-bit uses 12-bits for each color intensity for a total of 68,719,476,736 color. 48-bit uses 16-bits for each color intensity for 281,474,976,710,656 total colors. Sometimes an 8-bit alpha channel is included as well. Although the human eye cannot distinguish such minor differences in color intensity, photographers and graphic designers will often use these higher color depths to avoid color loss that occurs from rounding errors when performing various effects on images.
 +
 +
==Indexed Palettes==
 +
Indexed palettes are those which have a predefined set of colors. These became especially popular during the [[Video Graphics Array|VGA]] era of digital art.
 +
 +
===VGA Palette===
 +
[[Image:Color Palette - 8-Bit Color (VGA).png|thumb|128x128px|Default VGA palette.]]
 +
 +
The default [[Video Graphics Array]] color palette uses 256 color indexes. It was designed to be backward-compatible with both the [[Color Graphics Adapter|CGA]] and [[Enhanced Graphics Adapter|EGA]] palettes, so the first 16 colors match the CGA/EGA standard. After that, there are 16 shades of gray, and then a 24-index color spectrum beginning with blue and rotating toward red, yellow, green, and back to blue. The spectrum is repeated two more times with each subsequent copy having a lower saturation than the previous. Those 72 colors are repeated two more times with each subsequent copy having a lower intensity. There are also 8 indexes at the end left black, I'm presuming because it would take nine indexes to accommodate another color using this scheme, though I don't know why they didn't just pad out the gray scale with the unused values or provide eight more unique colors.
 +
 +
Although this is the default color set, the entire palette could be customized. Each index can be made up of red, green, and blue intensities ranging from 0-63. It was common for games developed for the VGA platform to have palette files among their resources which would be exactly 768 bytes in size, enough bytes to define an RGB intensity for each index. Because of this, it's common for game editors to assume a 768-byte file is a palette lookup.
 +
 +
[[Image:Color Palette - 8-Bit Color (VGA) - Example.png]]
 +
 +
===Windows 4-Bit Palette===
 +
[[Image:Color Palette - 4-Bit Color (Windows 3).png|thumb|128x128px|Windows VGA palette.]]
 +
 +
When configured to standard VGA mode, [[Windows 3]] used the high resolution 640x480 4-bit color mode of the [[Video Graphics Array]] and used a custom 16-color palette. The colors are similar in concept to the original [[Color Graphics Adapter]] text mode palette using an RGB CYM BW system with a low and high intensity version of each, but it starts with a darker base, and uses the 255 intensity for the brighter colors. This yields an over all darker palette, but it's more conducive to the white background of Windows compared with the black background of DOS. The color order, however, is not in-line with the CGA standard. You can see from the example image below, it is not very useful for displaying photographs.
 +
 +
[[Image:Color Palette - 4-Bit Color (Windows 3) - Example.png]]
 +
 +
===Windows 8-Bit Palette===
 +
[[Image:Color Palette - 8-Bit Color (Windows 3).png|thumb|128x128px|Windows VGA palette.]]
 +
 +
Those users who had a [[Super VGA]] display adapter and monitor could see [[Windows 3]] in 8-bit color. For some reason, Microsoft decided to not make their default 256 color palette entirely backward compatible with their 4-bit palette, and the low-intensity colors had a more washed out look. However, since the palette could be modified programmatically, many display drivers fixed this problem by adjusting the palette to make it backward compatible. This palette is much better at displaying photographs.
 +
 +
[[Image:Color Palette - 8-Bit Color (Windows 3) - Example.png]]
  
 
==Single-Byte Palettes==
 
==Single-Byte Palettes==
Line 15: Line 55:
 
RGB 3-bit uses one bit for each red, green, and blue value which allows for two intensities per value yielding eight colors total. To get each RGB value simply multiply its bit by 255. This is the smallest possible palette that can include red, green, and blue simultaneously.
 
RGB 3-bit uses one bit for each red, green, and blue value which allows for two intensities per value yielding eight colors total. To get each RGB value simply multiply its bit by 255. This is the smallest possible palette that can include red, green, and blue simultaneously.
  
This palette was mostly ignored in the USA, but it was used by the European [[ZX Spectrum]] and several early Japanese home computers like the [[Sharp X-1]] and [[PC-8801]]. Graphic displays which use binary LEDs use a system similar to this where a series of red, green, and blue LED are placed next to each other in tandem, and are turned on or off to simulate other colors when viewed at a distance, though they do not have separate values for composites like cyan, yellow, magenta, and white.
+
This palette was mostly ignored in the USA, but it was used by some early 8-bit Japanese home computers like the [[PC-8800]] series and the [[Sharp X-1]].
  
 
Such a limited color palette produces especially grainy results with real-life photos.
 
Such a limited color palette produces especially grainy results with real-life photos.
Line 40: Line 80:
 
Because the human eye is better at resolving green than red or blue, one of the more optimal palette generation algorithms is add emphasis to green. This 6-7-6 algorithm also uses all eight bits, but adds an extra intensity level for green with the algorithm (42×R)+(6×G)+B. This allows for seven intensities of green and two of red and blue yielding 252 colors total. Like 6-6-6, this is more CPU intensive, but by adding an additional 36 colors, it results in a better output.
 
Because the human eye is better at resolving green than red or blue, one of the more optimal palette generation algorithms is add emphasis to green. This 6-7-6 algorithm also uses all eight bits, but adds an extra intensity level for green with the algorithm (42×R)+(6×G)+B. This allows for seven intensities of green and two of red and blue yielding 252 colors total. Like 6-6-6, this is more CPU intensive, but by adding an additional 36 colors, it results in a better output.
  
[[Image:Color Palette - 8-Bit Color (8-8-4) - Example.png]]<br clear="all" />
+
[[Image:Color Palette - 8-Bit Color (6-7-6) - Example.png]]<br clear="all" />
  
 
===R6-G8-B5, 8-bit, 240 Colors===
 
===R6-G8-B5, 8-bit, 240 Colors===
Line 52: Line 92:
 
[[Image:Color Palette - 8-Bit Color (8-8-4).png|thumb|128x128px|8 - Red, 8 - Green, 4 - Blue.]]
 
[[Image:Color Palette - 8-Bit Color (8-8-4).png|thumb|128x128px|8 - Red, 8 - Green, 4 - Blue.]]
  
This 8-bit configuration uses three bits for each red and green value, but only two bits for blue. This allows for eight intensities for red and green, and four for blue, yielding 256 colors. This layout is good for human viewing and yields the maximum amount of colors. While the palette might not be as versatile as a 6-7-6 or 6-8-5, it is far less CPU intensive because each value is stored in its own bit space. A palette of this type was used by early [[Namco]] arcade games like [[Pac-Man]].
+
This 8-bit configuration uses three bits for each red and green value, but only two bits for blue. This allows for eight intensities for red and green, and four for blue, yielding 256 colors. This layout is good for human viewing and yields the maximum amount of colors. While the palette might not be as versatile as a 6-7-6 or 6-8-5, it is far less CPU intensive because each value is stored in its own bit space. A palette of this type was used by early [[Namco]] arcade games like ''[[Pac-Man]]''.
  
 
[[Image:Color Palette - 8-Bit Color (8-8-4) - Example.png]]<br clear="all" />
 
[[Image:Color Palette - 8-Bit Color (8-8-4) - Example.png]]<br clear="all" />
Line 59: Line 99:
 
[[Image:Color Palette - 8-Bit Color (8-4-8).png|thumb|128x128px|8 - Red, 4 - Green, 8 - Blue.]]
 
[[Image:Color Palette - 8-Bit Color (8-4-8).png|thumb|128x128px|8 - Red, 4 - Green, 8 - Blue.]]
  
To give you an idea of why green is the focus in all of the non-homogeneous palettes above, here is an algorithm similar to 8-8-4, but with the least emphasis on green. This system uses three bits for red and blue, and only two for green. This results in eight levels of intensity for red and blue, but only four for green, yielding 256 colors. Despite having four times the colors, the output isn't much better than the 64-color 3-3-3 output from above. Green is extremely important.
+
To give you an idea of why green is the focus in all of the non-homogeneous palettes above, here is an algorithm similar to 8-8-4, but with the least emphasis on green. This system uses three bits for red and blue, and only two for green. This results in eight levels of intensity for red and blue, but only four for green, yielding 256 colors. Despite having four times the colors, the output isn't much better than the 64-color 4-4-4 output from above. Green is extremely important.
  
 
[[Image:Color Palette - 8-Bit Color (8-4-8) - Example.png]]
 
[[Image:Color Palette - 8-Bit Color (8-4-8) - Example.png]]
Line 80: Line 120:
  
  
[[Category: Tech Guides]]
+
[[Category: Computer Guides]]

Revision as of 13:15, 28 September 2020

A color palette in computing terms is a lookup of colors that a display system can use. This can either refer to the complete color set it can use, or just the color set it can use at a time, or in a certain area on the screen. Modern computers have a palette in the billions of colors, but in the early days of computing, color palettes were far more limited.

True Color, 24-bit 16,777,216 Colors

256 - Red, 256 - Green, 256 - Blue.

So-called "true color" is a 24-bit RGB color system which uses a full byte (8-bits) for each red, green, and blue intensity resulting in 16,777,216 possible colors. The human eye is only capable of distinguishing around 10 million colors, so true color is good enough to store any image that humans are capable of perceiving visually (although, not all display devices are capable of rendering the colors perfectly). Here is an example of a photo utilizing 24-bit color.

Color Palette - RGB - Test.png

High Color, 16-bit 65,536 Colors

32 - Red, 64 - Green, 32 - Blue.

So-called "high color" is a 16-bit RGB color system which uses 2 bytes to describe each color in the palette, yielding 65,536 unique colors. This is usually setup using 5 bits for red intensity, 6 for green intensity, and 5 for blue intensity, or 32 shades of red and blue, but 64 shades of green. Some systems use 5 for each intensity for simplicity sake, and are technically only 15-bit.

Although a fair amount of display hardware made use of 16-bit color, few graphic formats support it. Regardless, it was a very large step up from 8-bit palettes because it results in enough colors to display photographs of decent quality while still being half the size of any 24-bit color image. Notice how the example below looks nearly identical to the 24-bit color original. It's only when you zoom in that you begin to see the quality loss.

Color Palette - 16-Bit Color - Example.png

32-bit (24-bit with alpha) 16,777,216 Colors

32 bit color is actually 24-bit color with an additional 8-bit intensity (256 levels) for alpha transparency. Alpha transparency means, when a pixel is drawn, it should be merged with whatever pixel already exists in the current location. An alpha intensity of 0 is totally transparent while an alpha intensity of 255 is totally opaque.

Deep Color, 30/36/48 bit, billions+

Deep color is a blanket term for any color depth greater than 8-bits per color intensity. 30-bit uses 10-bits each for red, green, and blue resulting in 1,073,741,824 possible colors. 36-bit uses 12-bits for each color intensity for a total of 68,719,476,736 color. 48-bit uses 16-bits for each color intensity for 281,474,976,710,656 total colors. Sometimes an 8-bit alpha channel is included as well. Although the human eye cannot distinguish such minor differences in color intensity, photographers and graphic designers will often use these higher color depths to avoid color loss that occurs from rounding errors when performing various effects on images.

Indexed Palettes

Indexed palettes are those which have a predefined set of colors. These became especially popular during the VGA era of digital art.

VGA Palette

Default VGA palette.

The default Video Graphics Array color palette uses 256 color indexes. It was designed to be backward-compatible with both the CGA and EGA palettes, so the first 16 colors match the CGA/EGA standard. After that, there are 16 shades of gray, and then a 24-index color spectrum beginning with blue and rotating toward red, yellow, green, and back to blue. The spectrum is repeated two more times with each subsequent copy having a lower saturation than the previous. Those 72 colors are repeated two more times with each subsequent copy having a lower intensity. There are also 8 indexes at the end left black, I'm presuming because it would take nine indexes to accommodate another color using this scheme, though I don't know why they didn't just pad out the gray scale with the unused values or provide eight more unique colors.

Although this is the default color set, the entire palette could be customized. Each index can be made up of red, green, and blue intensities ranging from 0-63. It was common for games developed for the VGA platform to have palette files among their resources which would be exactly 768 bytes in size, enough bytes to define an RGB intensity for each index. Because of this, it's common for game editors to assume a 768-byte file is a palette lookup.

Color Palette - 8-Bit Color (VGA) - Example.png

Windows 4-Bit Palette

When configured to standard VGA mode, Windows 3 used the high resolution 640x480 4-bit color mode of the Video Graphics Array and used a custom 16-color palette. The colors are similar in concept to the original Color Graphics Adapter text mode palette using an RGB CYM BW system with a low and high intensity version of each, but it starts with a darker base, and uses the 255 intensity for the brighter colors. This yields an over all darker palette, but it's more conducive to the white background of Windows compared with the black background of DOS. The color order, however, is not in-line with the CGA standard. You can see from the example image below, it is not very useful for displaying photographs.

File:Color Palette - 4-Bit Color (Windows 3) - Example.png

Windows 8-Bit Palette

Those users who had a Super VGA display adapter and monitor could see Windows 3 in 8-bit color. For some reason, Microsoft decided to not make their default 256 color palette entirely backward compatible with their 4-bit palette, and the low-intensity colors had a more washed out look. However, since the palette could be modified programmatically, many display drivers fixed this problem by adjusting the palette to make it backward compatible. This palette is much better at displaying photographs.

File:Color Palette - 8-Bit Color (Windows 3) - Example.png

Single-Byte Palettes

A single-byte palette is one that can be defined using eight or fewer bits rather than a lookup table. Single byte color palettes were popular in the early days of computing when memory was at a premium and palette lookup tables were memory intensive. There are many different algorithms used to encode an entire color palette into a single byte and quickly get the results.

R1-G1-B1, 3-bit, 8 Colors

1 - Red, 1 - Green, 1 - Blue.

RGB 3-bit uses one bit for each red, green, and blue value which allows for two intensities per value yielding eight colors total. To get each RGB value simply multiply its bit by 255. This is the smallest possible palette that can include red, green, and blue simultaneously.

This palette was mostly ignored in the USA, but it was used by some early 8-bit Japanese home computers like the PC-8800 series and the Sharp X-1.

Such a limited color palette produces especially grainy results with real-life photos.

Color Palette - 3-Bit Color (1-1-1) - Example.png

R4-G4-B4, 6-bit, 64 Colors

4 - Red, 4 - Green, 4 - Blue.

RGB 6-bit uses two bits for each red, green, and blue value which allows for four intensities per value yielding 64 colors total. The Enhanced Graphics Adapter uses this system to represent all of the possible colors of which it can use 16 at a time. In computer systems with 8-bit bytes, this color system isn't very compact because it leaves two unused bits per byte, although, the unused bits could be used to store additional information. On a computer architecture which uses 12-bit bytes, two colors can be stored in a single byte. With 8-times the number of colors compared to 3-bit color, the output photo is much nicer looking.

Color Palette - 6-Bit Color (4-4-4) - Example.png

R6-G6-B6, 8-bit, 216 Colors

6 - Red, 6 - Green, 6 - Blue.

Because RGB color has three unique values, it can't be stored into single 8-bit byte evenly while also using all the indexes. This has led to various algorithms being devised to get an optimal palette. The 6-6-6 method yields the largest number of colors possible while still having an equal number of intensities for each value. This layout uses all 8-bits, but the red, green, and blue values are determined with the following algorithm: (36×R)+(6×G)+B. This allows for six intensities per value yielding 216 colors total. The remaining 40 indexes are left unused and could be filled from a color table. While this makes it slightly more CPU intensive to extract a color from the palette, it does have the advantage of being perfectly uniform across each value. In fact, this color system was used by early Web browsers as their "Web-safe" color set. Naturally, the added colors make the end result more attractive.

Color Palette - 8-Bit Color (6-6-6) - Example.png

R6-G7-B6, 8-bit, 252 Colors

6 - Red, 7 - Green, 6 - Blue.

Because the human eye is better at resolving green than red or blue, one of the more optimal palette generation algorithms is add emphasis to green. This 6-7-6 algorithm also uses all eight bits, but adds an extra intensity level for green with the algorithm (42×R)+(6×G)+B. This allows for seven intensities of green and two of red and blue yielding 252 colors total. Like 6-6-6, this is more CPU intensive, but by adding an additional 36 colors, it results in a better output.

Color Palette - 8-Bit Color (6-7-6) - Example.png

R6-G8-B5, 8-bit, 240 Colors

6 - Red, 8 - Green, 5 - Blue.

This configuration is made because the human eye is actually a lot better at resolving green than blue, but it's also better at resolving red. So, this 6-8-5 gives one intensity level of blue to green. The algorithm uses all eight bits and can be represented at (40×R)+(5×G)+B. This allows for six intensities of red, eight of green, and only five of blue, yielding 240 colors total. Like 6-6-6, it's also more CPU intensive, but by putting more emphasis on green at the cost of blue, it can actually yield better results for a human viewer, despite the lost colors.

Color Palette - 8-Bit Color (6-8-5) - Example.png

R8-G8-B4, 8-bit, 256 Colors

8 - Red, 8 - Green, 4 - Blue.

This 8-bit configuration uses three bits for each red and green value, but only two bits for blue. This allows for eight intensities for red and green, and four for blue, yielding 256 colors. This layout is good for human viewing and yields the maximum amount of colors. While the palette might not be as versatile as a 6-7-6 or 6-8-5, it is far less CPU intensive because each value is stored in its own bit space. A palette of this type was used by early Namco arcade games like Pac-Man.

Color Palette - 8-Bit Color (8-8-4) - Example.png

R8-G4-B8, 8-bit, 256 Colors

8 - Red, 4 - Green, 8 - Blue.

To give you an idea of why green is the focus in all of the non-homogeneous palettes above, here is an algorithm similar to 8-8-4, but with the least emphasis on green. This system uses three bits for red and blue, and only two for green. This results in eight levels of intensity for red and blue, but only four for green, yielding 256 colors. Despite having four times the colors, the output isn't much better than the 64-color 4-4-4 output from above. Green is extremely important.

Color Palette - 8-Bit Color (8-4-8) - Example.png

R4-G8-B8, 8-bit, 256 Colors

4 - Red, 8 - Green, 8 - Blue.

This is like the 8-8-4, but with emphasis added to blue and green over red. This system uses two bits for red, and three for green and blue. This results in four levels of intensity for red, but eight for green and blue, yielding 256 colors. Notice how the output paradoxically looks more red despite having less red intensity. The warmer tone comes from the loss of nuance in red.

Color Palette - 8-Bit Color (4-8-8) - Example.png

Categories

Links