Color Fundamentals for UI Design
How to get a handle on color to benefit your users
中文阅读
UI designers rely on color palette to strengthen communication between the users and the system. Though the meaning and associations of colors may vary between cultures, today’s global internet users share common expectations for color meaning in user interfaces. Reds and warm oranges often indicate warnings, errors, and grave seriousness of deletion. Cool greens and blues exude success. Grays and low-contrast graphics indicate impermanence, placeholder, or empty state.
Understanding the principles of color theory enables designers to use color more effectively in their work. Artists and craftsmen have relied on the color wheel as a visual design tool to aid in paint mixing and color selection, ever since Isaac Newton first invented it in the 17th century to make sense of his investigations into the physical properties of light.¹
Visible light is just one form of electromagnetic radiation, as are X-rays, microwaves, and radio waves. Of all the frequencies of within the electromagnetic spectrum, only a relatively limited range of wavelengths actually stimulates our eyes’ color receptors. Our eyes can only see colors ranging from around 380 nm to 700 nm. The rest is invisible to the naked eye. Beyond violet, ultraviolet rays can cause a sunburn. In the other direction, beyond visible red is infrared, which enables us to do many useful things such as turn on a TV with a remote control.
The color wheel “wraps” the visible spectrum into a circle, connecting the extremes of violet and red. The result is an optical illusion of a continuous loop. Right when you expect to slip out of the low end of the visible spectrum, you find yourself somehow back on top.
The color wheel illustrates simple relationships between color hues. When creating the color palette of a UI design system for a website or application, designers must maintain harmony between the colors to achieve a balanced aesthetic. Discordant color relationships are a hallmark of bad design, and can alienate the user (like a cacophony of hands slamming on piano keys).
The human eye perceives color using special neurons in the retina called photoreceptor cells, also known as cone cells for their distinctive shape. We can categorize them by the wavelengths of light which stimulate them. Long wavelengths of light extending to the red range stimulate L-cones the most; medium wavelengths around the green range stimulate M-cones; and short wavelengths like violet and blue stimulate S-cones. LMS color space informs how digital screens produce colors by combining red, blue, and green points of light.
Notice that the most overlapping stimulation occurs around yellow, causing us to perceive yellow as very “bright,” almost as bright as white light. As a result, the two bright colors yellow and white have low contrast with each other, and will create usability issues in an interface. That same shade of yellow however would have high contrast with the color opposite from it on the color wheel: purple.
Up to one in ten people in the world experience some form of colorblindness, in which their photoreceptors behave differently from the typical way described above. UI designers must consider how to minimize issues for those users to include them in the experience as much as possible.² Color alone is not enough to communicate critical information, and designers should employ a combination of techniques to provide adequate feedback and instruction to all users.
Colors which consist of a single, pure wavelength of light on the visible spectrum are known as “spectral colors.” These pure frequencies can be produced by a laser beam or cast by a prism refracting white light. Rainbows show the full visible range of spectral colors when they refract sun rays through particles of water.
Glance around at the colorful objects in your world. These are not spectral colors you are seeing, but rather light reflecting at multiple frequencies at once, combining to create unique colors. These nonspectral colors cannot be produced by a single wavelength of light, and include a universe of pinks, beiges, browns, and purples. For instance the purple of an eggplant is actually reflecting some frequencies of violet combined with some frequencies of red, interpreted by the human brain as one discrete hue.
Purples, in all their myriad combinations of red and violets, are the most mystifying and musical of all colors. The line of purples dances on the edges of our eyes’ capacity to perceive electromagnetic radiation, the violets verging on too fast of a frequency for us to see, and the reds almost too slow. At 380 nanometers, violet’s wavelength just approaches half that of red’s at 700 nm. They harmonize together like a visual “octave.”
Keeping these color fundamentals in mind should make your UI more harmonious, more accessible, and more interesting to users. To study more about color relationships, try playing around with a color palette application like Adobe Color. As a fun exercise, see how much you can break the rules to create the most discordant, ugliest combinations! To learn more about color blindness check out Colour Blindness Awareness, and always be sure to test your UI designs with one of the many color blind vision simulators available on the web.
[1] Alison Koontz. (May 29, 2018). A History of Color.
https://caltechletters.org/science/history-of-color-1
[2] Aaron Tenbuuren. (Jun 23, 2015). Designing For (and With) Color Blindness. https://medium.com/intrepid-s-insights/designing-for-and-with-color-blindness-48392aab3d87
