22 May 2013

Canary Colours

Since its first release version, Canary Coloring has used the default Adobe color picker:

To the programmer, this color arrangement is very logical and even beautiful: each row and column represents a single step through a six step progression of the three segments of the hexadecimal color system. (Just writing that statement conjures images of precessionally perfect higher orders of programmer paradise.) This is evidenced by the clustering of colors into panels of six by six. The progression of the 36 colors in each panel do not just look nice, they are also representative of three complex processes going on: base color changes, blending and shading.

The first column and top row of each panel represent the shading steps of the pure colors which are shown at the bottom of the first column and end of the top row. Stepping back from the pure color to the upper left most swatch in the panel are the six shades for each respective color. The remaining columns and rows are simply blending the corresponding shades from each column and row together.

An interesting affect to persons who frequently use paint can be observed as brighter shades blend together: they approach white. This is because in light, unlike paint, white is made by combining the three pure primary colors of light: red, green and blue. In paint, the primary colors are red, yellow and blue and when combined make black.

Each panel represents a step in another six step process of changing the base color from no red, to full red. Adjusting the blending of blue and green from the base of red allows for six shades (four actual shades plus the pure color and absence of that color) to interact with of each six swatches of the other primary colors in every possible combination. This gives the color palette a total of 216 colors, which are considered the “web safe colors”.

Back in the early days of the internet (as in: the days of Netscape) those 216 colors were the only colors that a developer could reliably use across all web browsers and computers. Today we are spoiled with the fairly consistent rendering of the full range 16.78 million colors possible for display technology (not to mention the animation, music and videos we also get to enjoy).

216 colors is not accidental nor is the frequent usage of six arbitrary. Indeed, as I have frequently been taught by programmers, few numbers in the computer sciences are incidental.

Numbers in the computer world are generally stored in a hexadecimal format. For definition, we normally use a decimal number system. This is not referring to the numbers that come after a “.” but rather the number of items that increment the count to the next category. In a decimal system (also called “base ten”), there are 10 digits (zero through nine) before the next level is incremented. This means that the highest two digit number can be is equivalent to 99. In a hexadecimal system (also called “based 16”), there are 16 digits before the next level is incremented. To effectively communicate this, the letters “a” through “f” are used to substitute digits greater than nine. For example, “a” is equivalent to 10 and “f” is equivalent to 15 (15 plus a count for zero gives us sixteen). This means that the highest two digit number can be is equivalent to 256 (or “ff”, 16 times 16). 256 is a favorite number for computers because it can be easily built using 8-bits (while use of 8-bits is important, it is beyond the scope of this essay).

With the hexadecimal system, all 16.78 million colors a can easily be represent with a color code such as “ffffff” (pure white) or “0000ee” (the blue used by most web browsers to highlight a link). These same colors using a decimal system would be “000000000” and “000000238” respectively. Fewer digits in a sequences means less code, faster programs and more accurate communication, all very good things when under the tight constraints of sending data across the world.

Going back to the color picker: the color progression is not simply shading and blending but is actually a mathematical progression in hexadecimal. Following are the color codes from the first panel, notice how each row in the first column and each column in the first row increase by “33” (“33” in hexadecimal is actually 51 which, when adding zero makes 256 shades) while each of the other rows and columns is simply a combination of the first row and first column:

000000 000033 000066 000099 0000cc 0000ff
003300 003333 003366 003399 0033cc 0033ff
006600 006633 006666 006699 0066cc 0066ff
009900 009933 009966 009999 0099cc 0099ff
00cc00 00cc33 00cc66 00cc99 00cccc 00ccff
00ff00 00ff33 00ff66 00ff99 00ffcc 00ffff

While most hexadecimal color systems order the colors as red, green, blue, this system orders the colors as red, blue, green. This first block has no red (hence the "00" as the first two digits) and then progress the blue down by row (the third and fourth digits) and green by column (the final two digits). I will not go through the boring process of iterating the second (or anything other) block of numbers because they are almost identical except the first two digits are "33" and thus red is incremental in each panel with the blending and shading of blue and green remaining the same.

Unfortunately, beautiful numbers does not necessarily translate into a beautiful interface and the color picker did not do a good job of letting artists find the color and shade they were looking for (or, as my nephew said, "I need grey in my palette".)

To the artist, this color arrangement is almost useless. For example, and addressing my nephew's point, finding grey is a chore. There are four shades of grey plus black and white. Black and white are easy to find in the top left and bottom right corners respectively. Greys however, are a bit harder to find: the first grey from black is in the top row, middle panel, second column, second row. The second grey is in the third panel, the next column right and the next row down from the previous grey. This pattern progresses through the panels to white in the bottom row, last panel, last column, last row. This makes perfect sense when looking at the numbers, but not when looking at the colors.

Most often, when picking a color, we have a general idea of what color we want and we want to compare the shades and blends within a group of colors to get the right match. Think of paint swatches. They are clustered by base color with each swatch strip containing different shades of a given color. This system allows us to quickly compare a particular color against another particular color. Noting this, I set out to rebuild the palette to be more useful for artist (not programmers).

My first thought to present a more artistically appealing color picker was to rearrange the colors by hand and sight. I got to my third swatch before I gave up. My problem: the colors progressed three dimensionally (base color, blending and shading) making it rather daunting to rearrange 216 swatches. I stopped working on the colors after rearranging three swatches; then I realized that if math got me into this predicament the math could get me out of it.

My second thought was to transpose the data twice. What do you get when you transpose a data set twice? The same thing you started with (like rotating an image 180 degrees, twice).

My third thought was to transpose the entire data set and then transpose and mirror every other panel. This transformed the original color palette into something beautiful:

Notice how the colors now gradually (well, as gradually as can be done with a 20 percentage point increment) change between base colors by transitioning through the various shades and blends. This arrangement makes finding the right red (out of the available 30 variants of red) or green or blue much easier because the colors are generally grouped together.

(Oh, and I added the greys and basic colors at the bottom to make them even easier for my nephew.)

No comments:

Post a Comment