What is your color system? How are numeric color names better than word ones?



1. Introduction to color basics



As you probably know from art class, there are 3 sets of primary colors. The primary colors of pigments, or cyan, magenta, and yellow, light, made of red, green, and blue, and paint [? don't know], made of red, yellow, and blue. Computer graphics refer to the 3 primary colors of light. Mixing them in different amounts produces varying numbers of colors. Ever wonder what you get when you mix, say, sky blue [color code 6074F2] and dark yellow [color code 808000] in terms of light? It turns out that you end up with a greyish color with a small touch of cyan, or color code 707A79. What does all that mean? Where did I get that resultant color from?

2. The hexadecimal coding



Web page designers using HTML color naming should understand this, but if you've never used HTML color naming outside general words like "red", "green", "yellow", "pink", etc., it's unlikely you'll know what these "codes" are. What it is is a hexadecimal numeric code. Hexadecimal is a number base with 16 different digits instead of the normal 10 we know of and actively use. Base-10 is also known as the decimal numeric system, which use the digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9. For hexadecimal, you have 6 extra digits involved including the 10 in the decimal numeric system [or decimal system for short]. The extra digits, which are letters of the alphabet, are: A, B, C, D, E, and F in the same counting order.

If there are 3 primary colors of light, how does these numbers tell how much of each to use? There are 3 primary colors of light and 6 digits. Break 'em up into groups of 2 and you get the individual values. For the color of the sky, or 6074F2, it can be broken up into 60 74 then F2. 60 is the hexadecimal number for red [equivelent to 96 in decimal if you're using a graphics program like MSPaint and Photostudio], 74 is the hexadecimal number for green [equal to 116 in decimal], and F2 is the hex number for blue [242 in decimal]. In all hexadecimal color code numbers, the first two digits is the amount of red used, the middle two is the amount of green, and the final two is for blue. Where did I get the 707A79 color from when mixing two colors? This concept is called "averaging" or, if you have consecutive pixels of these two colors next to each other, it is called "dithering".

If you've always wondered what the colors are of the 24-bit palette, I've created an image that contains all 16,777,216 colors. Click here to see the palette. Do note that it takes 48 MB of memory just to display the image so it may not be fully displayed if your system doesn't have much memory. Because there are so many colors, the image is huge. In fact, it's 4096x4096 pixels. No screen resolution today can display that image so scrolling is definitely required. If I were to design the full 32-bit palette (with alpha channel), I'd need an image 16384x16384 pixels and it would use up a whole gigabyte of disk space just to store. The full 24-bit palette takes just 48 MB. The file size of the image is only 59 KB because PNG compresses it extremely well.

To use the chart, each block of 256 pixels has increasing red from left to right and increasing green from top to bottom. Blue increases by 16 steps as you go down a row and by 1 as you go toward the right.

3. From hex to decimal and back



First, to understand averaging and what to do to average colors and/or use dithering, you need to know the basics of hexadecimal numbers. Unless you can add and divide hexadecimal [which, surprisingly, is the same as doing it in decimal], you'll need to know how to convert hexadecimal values to decimal values and back to hexadecimal. Doing so is easier than you think, especially since only two digits are involved. These tables below are shortcuts to the hex <–> decimal conversions:

HexDecimalHexDecimalHexDecimalHexDecimal
0x01x162x323x48
4x645x806x967x112
8x1289x144Ax160Bx176
Cx192Dx208Ex224Fx240


How to use these tables to convert to decimal



  1. Given a color, say the color of the sky, which is roughly 6074F2, you need to convert it to decimal.
  2. Break the hex codes into the three sections for each color of light: 60 74 F2.
  3. On the top table, find the "60" value above. The ones value makes no difference for now. 60 on the table above is 96.
  4. On the bottom table, find what the ones digit is equal to and add that to the value found for the tens digit. 96+0=96.
  5. Repeat steps 3 and 4 for green and blue.
  6. To test that color, open up MSPaint, Photostudio, or whatever graphics editor you're comfortable with and enter your decimal values you got. The color should be very close to this text color.


How to use these tables to convert back to hexadecimal



  1. Given a random decimal set, say 56 for red, 112 for green, and 224 for blue, converting it back to hexadecimal is almost the same as the above, only backwards.
  2. Always start with the value of red first.
  3. Find out what the value of red is for 56 on the top table that is closest to the hex value mentioned previously, but without going over. 56 is closest to 48, but 64 would be over. 48 is a 3 for the "tens" digit*.
  4. Take the decimal value for red and subtract the value you found on the top table. 56–48=8. Find 8 on the bottom table to find out what to use as a hexadecimal digit. 56 converts to 38 in hexadecimal.
  5. Repeat steps 3 and 4 for green and blue.
  6. Checking this color is a bit harder, but on the forums, you can make a test post in the testing area and put some text as "[color:xxxxxx]your test text[/color]" where the six x's stands for your converted hex code. The best way to test it is to create a very simple HTML document of your own and in the body's BGcolor tag, use this color to find out what it is.


HexAddHexAddHexAddHexAdd
x00x11x22x33
x44x55x66x77
x88x99xA10xB11
xC12xD13xE14xF15


4. Averaging and dithering



Averaging is the concept of blending two colors to get a new one. At the beginning of the document, you saw that if you mix the color of the sky, or 6074F2, and the code 808000 [dark yellow], you get 707A79 as your end result. This value came from averaging these two colors together in a 1:1 ratio. Averaging is easy. Here's how you do it:

  1. First, convert the hex values to decimal using the steps described between the two above tables.
  2. Sky blue, or 6074F2 converts to 96 red, 116 green, and 242 blue.
  3. Dark yellow, or 808000 converts to 128 red, 128 green, and 0 blue.
  4. Take the two values of red and average them. (96+128)/2=224/2=112. Here, you'd use 112 for red.
  5. Repeat step 4 for green and blue to get 122 for green and 121 for blue.
  6. Convert your decimal values back to hexadecimal to get the 707A79 value I came up with.
  7. Testing this is far harder than the other two ways to test. The best way is by a graphics program.

    1. Create a new file in true color [24-bit color] about 300 pixels by more than 50.
    2. Split the document in half by a black line and widen it to about 16 to 32 pixels to make a box.
    3. Edit your colors to get one of the two colors you're wanting to mix. In my example here, bucket fill sky blue on either one of the two sides of your image.
    4. Edit your colors once more to get the other color, which is dark yellow and bucket fill it on the opposite side.
    5. Edit your colors for a final time using the mixed color results and bucket fill this color in the center and bucket fill those black lines you made.
    6. This'll create the illusion that the two colors are perfectly blended in together.
    7. You can try the magical color changer below a ways to see it for yourself. Note to get the true overlapping effect, the color ratios must be identical. You can still notice it with other ratios, but, in a 1:1 ratio, the objects appear to occupy the same position instead of having depth.


The formula for averaging colors in any ratios is rather simple:

(REDA×RATA+REDB×RATB)÷(RATA+RATB); (GRNA×RATA+GRNB×RATB)÷(RATA+RATB); (BLUA×RATA+BLUB×RATB)÷(RATA+RATB)


Variables:
REDA - amount of red used for first color;
RATA - ratio of first color;
REDB - amount of red used for second color;
RATB - ratio of second color;
GRNA - amount of green used for first color;
GRNB - amount of green used for second color;
BLUA - amount of blue used for first color;
BLUB - amount of blue used for second color;

This is a three-stage formula. You work the top formula first to compute the reds, the middle formula next to compute the greens, and the bottom formula to compute the blues. They can be done in any order, but must be done separately.

Dithering is the concept of using two different colors perfectly side by side in an alternating checkerboard pattern to mix colors. Using the sky blue and dark yellow example in the testing part of the list above, you can also mix these two colors together to get this result. Using your graphics editor, this is how you use dithering:

  1. Create a new document of any size greater than at least 32 pixels on both sides. Zoom in to at least 4 times the zoom, but more you zoom in, the easier it is to do.
  2. Edit your colors to get the sky blue color again.
  3. Create a very small square [must be one pixel at a time] inside your document and create a sky blue and white checkerboard pattern. Hint: It's much faster if you just do 4 squares across the top row alternating and a layer below. Stop when you finish two rows of squares.
  4. Edit your colors a final time to get the dark yellow color.
  5. Between your sky blue squares paint your dark yellow squares alternating to create a simple 8x2 sky blue and dark yellow checkerboard. If you accidently cover a sky blue square with yellow, press Control+Z to undo it [or go to edit, then undo].
  6. Using your select tool, select this square grid you made and copy and paste it to make an even bigger checkerboard. Keep copying and pasting until your whole document is filled [Hint: If you're using a large document, you might want to select the bigger groups of squares, copy and paste those a few times, select the even bigger square and repeat.]
  7. Finally, zoom out so that the image is true size.


This makes it seem as if the color wasn't really sky blue and dark yellow, they seemed to have blended together. This is a trick of the human eye and it's even more effective if you're using a small screen, using a high resolution, and/or viewing it from a great distance.

If you were to average all the 16 colors you get with the palette for 4-bit color, you'd have 50 total colors if you use the dithering concept. For those who don't know what colors you get with a 4-bit palette, this list consists of all these colors as well as their apparent brightnesses to the human eye:

colorcolor samplehex code valueapprox. brightness*
black0000000
grey808080128
dark red80000040
dark yellow80800094
dark green00800054
dark cyan00808088
dark blue00008034
dark magenta80008074
whiteFFFFFF255
light greyC0C0C0192
redFF000080
yellowFFFF00187
green00FF00107
cyan00FFFF175
blue0000FF68
magentaFF00FF148


Table footnotes:
* Approximate brightness isn't exact, but it's close. The formula for computing brightness is, as I've used it in the table above:

RED×80÷255+GRN×107÷255+BLU×68÷255


RED - amount of red in original color;
GRN - amount of green in original color;
BLU - amount of blue in original color;

I didn't merge the constants because they form a long chain of repeating decimals. This is a simpler form to help you out.

If you want to find the exact brightness of the color, create something that has a fade of black to white of grays at the bottom with the color to test at the top. It turns out that red is actually much brighter than the 80 value. This method works only in relation of coverting to grayscale.

If you were to go through the entire continuous spectrum from red back to red again monitoring the constant brightness of all 1536 colors and graph it out, you'll see something resembling this "wave":



Brightness is useful for checking your averaged or dithered color, but, as I have it, it's not quite exact, but very close. In this giant image 769x531 pixels in size, the line represents how bright/dark the color is in the spectrum assuming that there is no greys involved. The more black there is for a color, the darker the color. The more white, the lighter the color. It resembles a line graph, only with the points a pixel apart. Note yellow and blue on this. Note how they are the extremes in this chart. Also note that from cyan to blue there is a huge spike in the brightness value around 0080FF. Between 0070FF and 0090FF, there is a huge difference unlike from FFFF00 to C0FF00, twice the gap range. It's the fact that it's curved that makes the approximate brightness value, well, approximate. This graph is much more accurate compared to using the brightness formula as I have it.

5. Putting averaging and dithering to use



If you were to cross these 16 colors in every which way you can, you'd get a total of 50 unique colors. If you were to express all these colors on a color chart, this is what you'll see:





How to use this color chart:

  1. The palette is arranged in the same pattern. The colors being averaged [or dithered with] are between the two. The color closest to the coresponding palette is the color being averaged or dithered. The palettes to the right of the focused color is always in the same order. The colors in order from the top to the bottom of the left side in the central area is the top row in each segment. The right colors from top to bottom make the bottom row of the segment.
  2. Let's cross true blue with gray as an example.
  3. Find either the gray or true blue color in the central area [it doesn't make a difference which one you choose, both lead to the same color]. Let's say that we choose gray first. Find the gray square in the central area and note the palette (of the same colors in the same order).
  4. Find the color you wish to merge it with (blue in our example) in the palette to the side of the main. Where the blue square is is on the side palette is where the merged color is.
  5. Doing the averaging, you should get the color 4040C0, a blue-gray color. Using the eyedropper tool in your graphics editor using the true color image would reveal this exact color.


The top image is the results of crossing the two colors in true color. The bottom image is an illusion as there's only 16 colors involved, not 50. If you were to zoom into this image by a magnification of 4 times the normal size, this is what you'll see:



This effect is called dithering. The first image doesn't have dithering, but the mixing is the same. This is called averaging [or color-crossing].

Simulating transparency is seemingly impossible as far as drawing images, yet, it's easier than you think. Consider these two images. The first one is the root image. The second one is with 3/4 transparency 404040 colored box with 1/2 transparent FFA000 text in it. Real transparency in 2D drawings cannot be easily used with general programs like Paint and Photostudio. Instead, you need to average the colors out to give the sense of transparency. Newer pieces of software allow for the use of the alpha channel which is transparency. This averaging method is exact compared to using alpha.



This image is of a small greenish beach with a cloudless sky. Here, you can see how little of a change there is in the background, but the transparent object still shows well. This is an animated image. Every 2 seconds, it'll change. The second one has a "spell failed" notice***.

One other use of averaging is involved with making animations and something lasting for a fraction of a frame. With averaging, you can make a simulation that an animated image or a video is seemingly played at a faster frame rate that what it really is. For example, if your animation was played at 10 frames per second and you want an effect of a sudden, white flash lasting for a 20th of a second, you'd average all the colors in the previous frame with one part white, save that frame, then revert back to normal.

Averaging is far more useful when you want finer-looking videos or animations. If you use averaging with 6 parts total [a mix of 0 parts color 1 and 6 parts of color 2, 1 part color 1 and 5 color 2, etc.], you can give the sense that your image has six times the resolution, though this is limited to a certain point. Using this in an actual animation can give you this:

image of colored bars moving across the screen 4 times finer than your current resolutionimage of colored bars moving across the screen 4 times finer than your current resolutionimage of colored bars moving across the screen 4 times finer than your current resolution


Watch the green bars closely and carefully. It won't take long to notice a significant amount of movement. Try placing your mouse arrow over one of the bars and keep it still for about 5 seconds. You'll notice that those bars have moved about 12 pixels [or so it seems about 50] to the left. Though, the only minus side on using this [for this type of pattern] is, if you look closely enough, that it appears as if the image suddenly gets brighter, even though you're constantly seeing the same color center. If you were to magnify this image by 4 times it's width, you'll see the r