During a recent project at Untold, we discussed the importance of colors to a product’s design both on and offline. As the designer, I took a swatch and when compared with the product, the colors matched. However, when the swatch and the final image were seen separately, the colors looked different. What was going on here?
How the mind and our eyes plays tricks on us: there are two really great optical illusions that help explain this confusion. Let’s dive deeper:
In the checkered shadow illusion, squares A and B are the same shade of grey. The surrounding shades of gray make squares A and B appear different. One color on a dark background will look lighter than the same color on a light background. In this illusion, we can remove the context and see that the squares are the same, or draw a rectangle connecting the two and discover the same thing.
If we move away from grayscale and into color, the same illusion is seen. When two colors are side-by-side, their interaction changes the perception of their colors. A purple square on a blue background will appear red while a purple square on a red background will appear blue. This is known as simultaneous contrast.
When working on with physical projects in a digital context, it’s important to remember that colors aren’t viewed in isolation. Picking a reference color — while technically accurate — may not represent the color as it appears in real life. If a project calls for a specific color to be used or matched, remember that you may need to adjust the core color depending on the colors surrounding it to make it picture perfect.