08 Mar 2015 06:00

Apparently, about a little over a week ago, someone posted the picture of a dress asking others what its colors were. The post managed to go viral since viewers could not agree with each other regarding what they saw. Some saw a blue and black dress, while others saw gold and white. The world erupted into a wild debate, and now only in the aftermath did I take the time to look at the dress myself to see what I saw. But what I saw was somewhat shocking.

I in fact see a Blue and Gold dress, a compromise between the two camps. I am not entirely surprised that people perceive colors differently due to the image's context, but it does shock me that the mass majority of people see either Black and Blue or Gold and White and not what is the obvious middleground of Blue and Gold. This prompted the obvious question: why?

In honesty, I do not know the reason why, but I have an hypothesis. Before I answer why I see blue and gold, though, why do people perceive different colors to begin with?

Interestingly, it has to do with the lighting of the image. The brain ascertains the colors of objects based partly on their true color, partly on the light illuminating the objects, and partly on the context. In the case of the dress, the light being used and how the illumination was captured for the background causes some people to see either a picture with poor lighting or a dress reflecting a lot of light. In the former case, people are likely to interpret the true image as being darker (black and blue), whereas the latter camp will see a lighter image (gold and white).

In a brief experiment, we can actually see this merely by changing the image's brightness.

Adjusting Brightness

Image Unavailable

Darkening the image makes it blue and black, whereas lightening it makes it gold and white.

So what about the people who see blue and gold? To help explain this, I actually went to inspect the RGB values of the image itself to see what the computer thinks the colors are. Interestingly, the blue/white patches are seen as a bluish grey, and the black/gold patches are a very impure yellow. Below are two boxes indicating the colors without any context:


Image Unavailable

RGB: (133, 149, 183)
Since the blue component is largest, we see mostly a faded blue.


Image Unavailable

RGB: (127, 110, 67)
Since red and green are nearly the same and blue is very low, it is objectively yellow.

In other words, the computer thinks the dress is blue and gold. Hence, the people who see a blue and gold dress see the image as it is actually portrayed, irrespective of the contextual background lighting.

This might be incorrect, but it would not surprise me. Being a web developer, I have dealt with image editing and am heavily experienced with the RGB model. I am trained to be sensitive to the colors the monitor is displaying. This does not make me any better or worse than anyone who sees differently; in fact, it means that I see the dress incorrectly, because the dress in reality is black and blue.

In the end, I felt like sharing this because of an insight it gave me regarding color perception. Despite the fact that the computer is actually displaying blue and gold, very few actually see both those colors; they see either black and blue or gold and white. For a web designer, this is critical because it means that we cannot actually guarantee what kind of experience the end user will have when viewing particular color schemes. This emphasizes the importance of user feedback.

Other than that, it is a remarkable curiosity and fun to explore the many nuances of human perception. If you somehow found this post, be sure to include in the comments what colors you see!