Color Considerations (Part 2)

Now lets continue with some items I actually learned when looking at color specific things in more detail.

Some Physical Properties of the Eye

The human eye has typically 3 different daylight-sensitive cells (also called cone-cells). The sensitivity of each type of cone-cell type peaks at a different wave-length. The blue sensitive cone-cells peak in the blue wavelength of the light spectrum, the red sensitive cone-cells peak in the red wavelength of the light spectrum, and the green sensitive cone-cells peak in the green wavelength of the light spectrum.

Qualitative Diagram of the Light-Sensitivity versus Light-Wavelength of the 3 different Cells

Basically the brain constructs a color perception when processing the combination of responses from all 3 cone-cell types (there are lots of cone-cells, each triple responsible for a tiny fraction of the vision field an eye sees. And there are normally 2 eyes, so there is plenty of vision processing going on in the brain and the neural areas on the path from the light receiving cone-cells towards the brain).

Something I tried to show in the above diagram is the fact that the sensitivity of the red and green cone-cells overlap considerably more with regards to their spectral sensitivity in comparison to the 

blue cells. Something I learned is that about 10 to 15% of all people (quite often males) are challenged to distinguish red and green colors. The reason is that the sensitivity of red and green cone-cell receptors of such people overlap even more compared to what I tried to picture above (basically the peak sensitivity of the red and green cone-cells are more or less the same for such people). This means that humans can much easier differentiate between blue and any red/green color combinations compared to having differentiate between green and red. Given the large fraction of people challenged with this problem, it is important to take this into consideration when using colors for visualization. There are also programming tools available that let a normal person (for example a web-designer) see how a red-green challenged person might perceive a given digital image (the tools filter certain color information out of the digital picture and present only the information that a red-green challenged person perceives)..

What I also learned is that there is a fractional percentage of females in the world that have actually four different types of light receiving cone-cells. Such a person has an additional red cone-cell that allows such a person to perceive/distinguish "additional" red colors (basically such a person sees/perceives a lot more different red color variations compared to a person with normal eyes).

The cone-cells mentioned above are dominant if the light conditions are bright (normal day-light). The evolution has also equipped the human eye with an additional set of cells called rod-cells. The rod-cells kick in during very dim light conditions (night and dawn situations) whereas the cone-cells cease to function under such dim light conditions. The rod-cells are very sensitive but provide only a monochromatic response (this means there is no color information, only gray color tones from dark black towards white during night vision). The rod-cells sensitivity peaks somewhere in the blue-green wavelength spectrum under dim viewing conditions. The rod-cells also dominate vision when the eye has to process information from the very edge of a given vision field.

So what does the above really mean when having to deal with colors in documents and web-pages:

• Visualizations that use blue and monochrome (black, grey, white) colors can be perceived correct by most people. The human eye is also very good to distinguish all sorts of color shades in that space and under dim and bright viewing conditions. After I had "digested" that fact I did notice that a lot of a very popular web-pages and user-interface designs are predominantly using such colors as a default.
• It is possible to use one of red or green hues in a given image visualization, but if possible not both.
• The professional people dealing with color have developed a "Tri-Stimulus" model/standard that assigns quantitative measured values to a given (physical) color. Basically a given color is defined by a combination of 3 standardized blue, red and green "prime" color values. These Tri-Stimulus values for a color are used all over the place for example by the movie industry, paint shops, agriculture and the packaging industry. The software programming sector is just a very recent straggler jumping onto that bandwagon. More recently a lot more complex color models have been developed that also take into account the lighting condition of a visualization (for example it matters if the surrounding background is "dark" or "bright" when looking a "colored" spot).

Human Color Perception

People started to think how to describe color long before the physical nature of light was understood and much longer before people understood what was going on in the eye. Instead of quantitative measurements people focused on how they "perceived" light and tried to describe the perceived properties. This effort originated partly by scientists but was also driven forward in a major way by the arts community. In the 1900 century people came up with the notion of color rings, color globes and the concept of "neighboring colors" (colors that are perceptually "close" to each other). Colors also were given "properties" like hue (the position in the color ring specified in degrees), saturation/value (basically how pure a given color is versus how much gray color it contains as a color of a given hue radiates out from the grey center), and brightness/lightness (is the given color darker or whiter/lighter). Ultimately these perception efforts culminated in using statistical methods to put the human color perception on a more scientific base (lots of different people where asked to rank large amounts of individual colors according to their perception). The "Munsell Color Space" is such a system that was developed and standardized in the early 1900's and is with modifications still in use today. Professor Munsell came up with the definition of a "perceptual uniform color space" by extensively interviewing individual people how they perceived given colors and summarizing the individual results by applying statistical methods.

Early on, this Munsell color space was not defined using quantitative tri-stimulus values but with the help of printed "color patches". Standard "colorchecker" boards are still in use as a tool today and exclusively sold by GretagMcbeth (see https://en.wikipedia.org/wiki/ColorChecker). By the looks of it quite a bit of effort goes in to ensure that such colorchecker boards really reflect the "standard" colors. These days tri-stimulus values have been defined for all Munsell colors.

The Munsell system also assigns human-understandable names to each color "hue": Blue - BlueGreen - Green - GreenYellow - Yellow - YellowRed - Red - RedPurple - Purple - PurpleBlue - Blue. Typically the five prime colors and the 5 main intermediate colors are assigned the value 5.  The color wheel is then further divided up into 10 steps (for 100 different colors) or commonly into 4 steps: For example 2.5Yellow - 5Yellow - 7.5Yellow - 10Yellow - 2.5YellowGreen - 5YellowGreen and so on (the above figure has a hue ring with 40 different hues at value 5 and chroma 6) . Aside from the hue (position in the color ring) the system assigns a "value" (a notion of how black or white the particular color is) and a "chroma" (this is basically a notion of how saturated a given color looks like or in other words how far away from the corresponding "gray" value a given color is distanced). In the Munsell system every color is described with these 3 numbers/letters: A hue string, a "value" number ranging from 0 to 10, and a chroma number ranging 0 to 24 (this is a very high saturation value, not every hue achieves such a high chroma).

Color rings (and spaces) that take human perception into account have some very attractive properties when it comes to visualization/design of documents and web-pages.:

• There is a notion of a complementary color: Basically every color in a 360 degree color ring has a complementary color 180 degrees across the ring on the "other side". For example the complementary color of 5Blue is 5YellowRed (a sort of "orange"). For example a color palette that uses colors from a fully saturated (high chroma) blue running radially in towards gray and from there radially out towards a fully saturated (high chroma) 5YellowRed is superb for data visualizations (the human eye is at good distinguishing blue colors and in this case there is only a complementary set of YellowRed hues as the only other color involved that also offers a number of distinguishing steps).
• Complementary color notions also play a role in the arts community and such paintings and visualizations create a pleasing design. What I am trying to say is the following: A web-page that uses only colors that are located on a line from a base color to its complementary color  (or a sheet when brightness/lightness are taken into account) feels good to human perception.
• Such color rings also offer a way to define neighboring colors or establish how "close" two color hues are. Closely neighbored hues are perceived similar while further distant color hues might "bite" each other or create some sort of "color" conflict.
• Such a color system also provides a clean way to use "colors" of the same hue, but with different saturation/chroma, or with different brightness/lightness values. For example a light blue (a whitish blue), a dark blue and a medium blue can all have the same hue and their application in a picture are perceived as pleasing by the human mind (they are all related). One can imagine that such an ensemble of colors is created by mixing a base color (a hue) with more or less white, or with more or less black when painting a picture.
• Something else that is buried in such a ring are the different notions of gray: The very middle of the circle represents all colors with minimal (zero) saturation. It represents a vertical line from black towards white with all gray tones in between (a palette consisting of these colors is also called a monochrome palette). In these rings pure gray tones are special because they belong to all hues. So a pure gray color can be paired with all sorts of hues without "conflicting". There is also a very old tradition in the arts community of using a monochrome palette for paintings (ink paintings, charcoal paintings, and so on). A monochrome palette also offers no problems for people who are red-green challenged.

Some examples of the above comments:

The first example is a palette running from 5Blue (chroma 6, lightvalue 5) to its complementary color 5YellowRed (chroma 6, lightvalue 5) through the middle of the color ring. And the next example is a palette running from a high chroma and low-value Purple-Blue to a high chroma and high value Yellow (so there is notion of going from something darker to something lighter mixed into the palette).

The following is an example of a monochrome color palette from Black to White. These colors are named N0 (black) to N10(white). I guess N stands for "Neutral" and the 0 to 10 range represents the various lightness values.

Some Artistic Considerations

Something else I learned is that using less colors is definitely more. I provide here some links. I am not an artist, but there is a super duper web-page that nicely shows some of these concepts: http://www.handprint.com/HP/WCL/paletfs.html . I have also come across the same type of conclusions in a nice book from Johannes Itten "The Art of Color: The Subjective Experience and Objective Rationale of Color". The content in that book was developed by Itten when teaching "Bauhaus" arts courses in the 1920's.

• Using a monochrome color palette (basically only using colors between black and white) is a standard theme in painting: Japanese and Chinese ink wash paintings (Sesshu Toyo for example paints in that style) or pencil drawing in Europe come to mind. Such paintings and drawings provide exquisite detail by using very subtle gray colors. The Handprint-Web-Page mentioned above has a sub-section on monochrome painting. Using a monchrome black white or even a monochrome blue offers plenty of options when visualizing data or coming up with presentation slides. 
• Using a "Velazques Palette" is a minimalist way of painting with 3 prime colors and 1 grey and their mixtures that is very pleasing to the eye: The palette uses ultramarine-blue and the two closely neighbored burned-sienna and yellow-ochre colors more or less located on the opposite site of the ultramarine-blue in the color-hue-ring. Basically this is a theme of blue and colors opposite to it. What is also interesting about that palette is that a wide variety of natural occurring colors can be painted by just using these 3 colors and their mixes (basically a painters uses these 3 base colors and the grey to mix the remaining colors he or she needs). Again, all of that is very pleasing to the eye. The best example I have found for this is a sub-section called "Velazques Palette" on the Handprint-Web-Page mentioned above. That Velazques-Palette sub-section was a really eye-opener for me. Since then I look differently at paintings in museums. Hokusai's "Wave" wood-print for example also uses only a few base colors (to my eye basically a blue, something on the other side (something yellow-orangy and something orangy-redish-brownish) to the degree I can say (I have no clue if he followed a Velazques palette principle, but this print is not so far away from it)).
• A number of artists are happy to paint with just 2 base colors and their mixes: Typically the 2 colors are located directly opposite in the color hue circle. For example the Velazques palette can be reduced to ultra-marine blue and burnt-sienna (these two are opposite colors). 
• In the last years I have seen people proposing various color palettes that are basically plays on opposite color palettes. Other palettes have been a play of Velazques palettes or some form of rotated Velazques style palettes with one base color on one side and 2 closely neighbored colors on the opposite side but everything rotated in the hue-ring. These days I recognize when I am seeing such palettes what the rationale behind certain color choices likely are and I am able to construct my own.

Closing Comments

I only scratched the surface in these 2 blog posts when it comes to color. A topic I did not mention is the limited amount of color accuracy of computer monitors and hand-held devices. Typically this topic is covered by the color gamut offered by a device. Computer monitors for example have difficulties to properly display "black". Monitors are also limited in terms of showing highly saturated colors. Printers often have much more chroma/color-saturation levels at their disposal compared to a monitor. Judging how good a print that uses high saturation colors turns out when looking at a monitor is sometimes a tricky process. 

.

I also skipped another topic. The Munsell figure above with its hue-ring might give the impression that such rings are uniform and all colors are available. In this case I used chroma 6 for the hue-ring and value 5 and indeed a monitor can display the colors chosen reasonably accurate. However if I had picked lets say chroma 10 I would have been out of luck: sRGB monitors cannot accurately display a complete hue-ring for chroma 10 because the yellow and green colors are not available for chroma 10. The gamut of the monitor just doesn't allow displaying these colors, but they are available in print form and can be recognized by the human eye.

I am using these days mostly CIECAM02 when having to interpolate between colors to create my own color palette for a certain purpose. I programmed the necessary math myself after looking through wikipedia and a slew of other web-pages. CIECAM02 is more complex compared to Munsell because it also takes the surrounding color into consideration: Colors look different if the background is gray (like in my examples above), or black, or a bright white. I am now happy with the color palettes I am using these days.

I learned most of what I needed from the following web-sites (I liked especially the Handprint web-site and its sub-pages):

• Handprint Webpage: Color Vision (http://www.handprint.com/LS/CVS/color.html)
• Handprint Webpage: watercolors (http://www.handprint.com/HP/WCL/water.html)
• Wikipedia CIECAM02 Webpage: https://en.wikipedia.org/wiki/CIECAM02
• Wikipedia CIE 1931 color space and tristimulus values Webpage: https://en.wikipedia.org/wiki/CIE_1931_color_space
• The University of Rochester has also interesting web-pages on color. They are active in the various standards committees as well.
• GretagMcBeth and X-Rite (Pantone) have all sorts of interesting color related information on their web-pages. They are also selling interesting color related devices. I believe these days they are under the umbrella of a single corporation.

Last but not least: The human eye is not super duper in distinguishing (subtle) color differences between neighboring hues and neighboring chroma. Restraining the use of colors is important. It is much easier for humans to distinguish items via shapes (including rotations of a basic shape) and size.

I used the Munsell color system in my post because it has survived for a long while and it is derived from human perception which doesn't change as fast as technology. It also has a nice systematic way to describe a color in terms that can be understood by a person. Whenever I need to specify a color I typically have a good look at some Munsell web-pages to pick a color.

I think that covers everything related to colors I can compress in 2 blog posts.

Martin