When Yellow Isn’t Really Yellow

by Jason Chuang 2 years ago Filed Under: Design

A rule of thumb in designing visualizations is to use well named colors. But what happens when a well named color, such as yellow, falls outside of the set of colors that can be displayed on an LCD monitor?

Color names can influence and constrain how we think. Psychology studies have shown that how we assign names to colors can affect memory, learning and discrimination. Speakers of Russian, a language with two words siniy for light blue and goluboy for dark blue, can differentiate shades of blue faster than English speakers accustomed to using just a single word blue.


 
Named colors help with communication. Remember those good old Microsoft Excel color palettes? Ever tried the line “Now, let us look at the purple bar” during a presentation?
 
 
Various studies, such as the World Color Survey conducted in the 1970s and the more recent XKCD color survey, provide us with a record of how speakers of more than 100 languages name their colors. Typically, subjects in these studies are shown tens–sometimes hundreds of colors–and asked to provide a name for each color. Unsurprisingly, an important factor in these studies is the medium through which these colors are presented to the subjects. The results of a survey are only as good as the accuracy and coverage of its color samples.

The World Color Survey is conducted using a chart of 330 carefully calibrated Munsell color chips, viewed under neutral lighting. The Munsell color space captures a wider spectrum of colors than what a modern sRGB-compliant monitor can display. As a bright and saturated color, yellow–more specifically, its peak or centroid–is one of the corners of Munsell color space that lies just outside of the sRGB gamut. In other words, the saturated and deep yellow shown to speakers around the world during the 1970s, to which they exclaimed amarillo! or tsixiyana! or áánapáróhnáá!, cannot be reproduced on the very monitor on which you’re reading this blog.

Furthermore, if you max out the R- and G-color channels on your monitor, and pump out the color RGB( 255, 255, 0 ) or #FFFF00, its hue is actually slightly misaligned with what people commonly identify as the color yellow.

To see the effects, try dragging the slider below until you reach what you consider to be the best example of the color yellow. Click on the button “Yellow!” to see your and others’ results.

 
While the color may appear differently due to variations between monitor models, laptop vs. desktop, viewing angle, and other conditions, most people find that the center of the slider (representing #EAEA10 or equal parts of R- and G-colorants) contains a slight tint of green; they would mix in a little more red to create yellow. For this blog post, we ran a quick study on Amazon Mechanical Turk, and found the average yellow was around #FAE50D, or at a ratio of 1.000 R-colorant to 0.914 G-colorant.

Not to take anything away from the color #FFFF00. It’s a pretty awesome color, and does carry the honor of being at the corner of the sRGB cubic and brighter than most other colors. The next time you’re drawing up a visualization, think about the purpose of using yellow. For highlighting and attracting attention–for better or for worse–by all means power up those LCD lights and harvest #FFFF00 to draw attention. But for a balanced and well-named color palette, remember: true yellow is just off to the side of #FFFF00. Try adding a touch of red.

Jason Chuang is a PhD candidate in Computer Science at Stanford University. His interest are in visualization, human-computer interaction and design.