Difference between revisions of "Color palettes"

From TheAlmightyGuru
Jump to: navigation, search
(RGB)
Line 1: Line 1:
A '''''Single Byte Color Palette''''' is a [[color palette]] that can be defined using eight or fewer bits. There are many different algorithms used to encode an entire color palette into a single byte and quickly get the results.
+
A '''''Single Byte Color Palette''''' is a [[color palette]] 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.
  
 
==RGB==
 
==RGB==
In the early days of color graphics, RGB was actually pretty rare, but as computers pushed RGB on their monitors, they quickly became the predominant color system in computers and now, most other forms of color display. Here is an image using 24-bit RGB color (16,777,216 colors) as a reference for the one-byte palettes below.
+
In the early days of color graphics, RGB was actually pretty rare, but as computers pushed RGB on their monitors, they quickly became the predominant color system in computers and, because of their popularity, most other forms of color display. Here is an image using 24-bit RGB color (16,777,216 possible colors) as a reference for the one-byte palettes below.
  
 
[[Image:Color Palette - RGB - Test.png]]
 
[[Image:Color Palette - RGB - Test.png]]
Line 9: Line 9:
 
[[Image:Color Palette - 3-Bit Color (1-1-1).png|thumb|128x128px|1 - Red, 1 - Green, 1 - Blue.]]
 
[[Image:Color Palette - 3-Bit Color (1-1-1).png|thumb|128x128px|1 - Red, 1 - Green, 1 - Blue.]]
  
RGB 3-bit uses one bit for red, one for green, and one for blue which yields a total of 8 colors. Each hue's intensity is either on or off (0 or 255). 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. The limited color palette produces especially grainy results.
+
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. 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. Such a limited color palette produces especially grainy results with real-life photos.
  
 
[[Image:Color Palette - 3-Bit Color (1-1-1) - Example.png]]<br clear="all" />
 
[[Image:Color Palette - 3-Bit Color (1-1-1) - Example.png]]<br clear="all" />
  
 
===R4-G4-B4, 6-bit, 64 Colors===
 
===R4-G4-B4, 6-bit, 64 Colors===
 +
[[Image:Color Palette - 6-Bit Color (4-4-4).png|thumb|128x128px|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. 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 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.
 +
 +
[[Image:Color Palette - 6-Bit Color (4-4-4) - Example.png]]<br clear="all" />
 +
 +
===R6-G6-B6, 8-bit, 216 Colors===
 +
[[Image:Color Palette - 8-Bit Color (6-6-6).png|thumb|128x128px|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. Naturally, the added colors make the end result more attractive.
 +
 +
[[Image:Color Palette - 8-Bit Color (6-6-6) - Example.png]]<br clear="all" />
 +
 +
===R6-G7-B6, 8-bit, 252 Colors===
 +
[[Image:Color Palette - 8-Bit Color (6-7-6).png|thumb|128x128px|6 - Red, 7 - Green, 6 - Blue.]]
 +
 +
Because the human eye is better at resolving green that 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" />
 +
 +
===R6-G8-B5, 8-bit, 240 Colors===
 +
[[Image:Color Palette - 8-Bit Color (6-8-5).png|thumb|128x128px|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 give 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.
 +
 +
[[Image:Color Palette - 8-Bit Color (6-8-5) - Example.png]]<br clear="all" />
  
 
===R8-G8-B4, 8-bit, 256 Colors===
 
===R8-G8-B4, 8-bit, 256 Colors===
 
[[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 system separates the bits in a byte into three sections, 3 are used for the red intensity, 3 for the green intensity, and 2 for the blue intensity. This results in 8 levels of red, 8 of green, and 4 of blue. This is often the optimal system because the human eye is better at discerning between different intensities of red and green compared to 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, yields the maximum amount of colors, and is not CPU intensive because each value is stored in its own bit space. All this, and it still yields nice results.
  
 
[[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 25: Line 51:
 
[[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.]]
  
This system separates the bits in a byte into three sections, 3 are used for the red intensity, 2 for the green intensity, and 3 for the blue intensity. This results in 8 levels of red, 4 of green, and 8 of blue. This is often the optimal system because the human eye is better at discerning between different intensities of red and green compared to 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.
  
 
[[Image:Color Palette - 8-Bit Color (8-4-8) - Example.png]]
 
[[Image:Color Palette - 8-Bit Color (8-4-8) - Example.png]]
Line 33: Line 59:
 
[[Image:Color Palette - 8-Bit Color (4-8-8).png|thumb|128x128px|4 - Red, 8 - Green, 8 - Blue.]]
 
[[Image:Color Palette - 8-Bit Color (4-8-8).png|thumb|128x128px|4 - Red, 8 - Green, 8 - Blue.]]
  
This system separates the bits in a byte into three sections, 3 are used for the red intensity, 3 for the green intensity, and 2 for the blue intensity. This results in 4 levels of red, 8 of green, and 8 of blue. This is often the optimal system because the human eye is better at discerning between different intensities of red and green compared to 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.
  
 
[[Image:Color Palette - 8-Bit Color (4-8-8) - Example.png]]
 
[[Image:Color Palette - 8-Bit Color (4-8-8) - Example.png]]
 
<br clear="all" />
 
<br clear="all" />

Revision as of 14:34, 20 March 2018

A Single Byte Color Palette is a color palette 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.

RGB

In the early days of color graphics, RGB was actually pretty rare, but as computers pushed RGB on their monitors, they quickly became the predominant color system in computers and, because of their popularity, most other forms of color display. Here is an image using 24-bit RGB color (16,777,216 possible colors) as a reference for the one-byte palettes below.

Color Palette - RGB - Test.png

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. 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. 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. 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 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. 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 that 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 (8-8-4) - 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 give 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, yields the maximum amount of colors, and is not CPU intensive because each value is stored in its own bit space. All this, and it still yields nice results.

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 3-3-3 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