Color is Complex
Color selection is an early and important aspect of the design process. Colors influence our behavior, affect decision making, keep people engaged with websites and applications, and impact brand perception.
People have written entire books on color, and how they are used in marketing and design. Color is science, it the starting point for many scientific discoveries. In nature and design, color is used to convey a message.
Color can be used to put emphasis on different elements, to either guide us through a process, or point us in a specific direction. Examples of this are in dark patterns, where sometimes color is used to nudge us to do something we didn’t intend to do.
This is an introduction to color, as more than simple blues, reds and yellows. Looking at the fundamentals, different aspects and what different people have said about color. And in time, go deeper into what color means for us living in, and designing, the world around us.
Color is Science
Adam Rogers wrote the book Full Spectrum: How the Science of Color Made Us Modern. In the episode “Full Spectrum” from the podcast “99% Invisible” he lays out why in his views, colors are science.
Terminology
There are various terms used to specify different colors, depending on how pure they are, how much white, grey or black is added, and brightness, just to name a few.
- Hue: refers to one of the 12 colors on the color wheel
- Shade: a hue darkened with black
- Tone: a hue dulled with gray
- Tint: a hue lightened with white
- Saturation: the intensity or purity of a color
- Value: lightness or darkness of a color
Harmony
There are several ways to match different colors together, one popular way is to use PMS or a color wheel. Adobe made it very simple to create different pairings easily in their online tool, which includes analog, monochrome, triad, complimentary, and nuance pairing.
Color Systems
When we talk about colors, there are a few established methods, color systems, that people use to identify colors. A few internationally recognized examples of these systems are Pantone, RGB, CMYK and HEX. They are often named by the method of mixing colors in printers and on screens.
Pantone
The Pantone Matching System is globally recognized. It helps define, communicate and achieve color consistency across graphics, fashion and product design.
Using physical Pantone color swatches can be helpful when pair colors, because each screen displays colors slightly different. And it adds a different experience to see the colors in the real world.
For each Pantone color there is a HEX equivalent, and hex can be converted into either RGB or CMYK. This means you can really make any of those colors with Pantone.
RGB
The abbreviation RGB represent Red, Green and Blue lights. It’s a term used for monitors, television screens, digital cameras and scanners. It’s a line of lights that can display red, green or blue light, and by organizing them in particular orders create different colors.
CMYK
CMYK stand for Cyan, Magenta, Yellow, and Black. This is a spectrum printers use to get a blend of different colors, and is used in printed design. When you work with printers, making catalogs, business cards and other printed materials, you need to make and save the work in CMYK.
HEX
People familiar with using web colors will be familiar with HEX. HEX is a way of blending different hies, shades, tones, tints, saturation and value. It’s used in the styling of websites and applications, in the code’s HTML, CSS and JavaScrypt.
Color Converting
Having color cohesion between all these systems, can be a headache. Between printing and digital there are color differences, from the different ways colors are mixed and blended.
Also between different browsers, when they should be displaying the same hex color, there can be difference. Two different screens, display colors differently. And the light in the room where you view the colors, can differ from the time of day, and amount of light and color around it.
Nowadays there are online converters which can help switching between different systems. It doesn’t fix all problems, but makes balancing between different purposes a little easier. You simply enter the code you have, and it will present similar hues in the different systems.
Psychology of Color
In brand identities colors are very important. There’s a lot that goes into selecting brand colors, because each color impacts the perception of the brand.
Some of the associations people have with different color are trust worthy, cheap, youthful, healthy, royal, hopeful, modern or luxurious. Some of the perceptions come from how color is used in our lives, but also the power of other brands using similar colors.
Both smaller and bigger luxury brands have the interest of having their brand colors match with the brand’s intentions and authenticity, to build trust among their consumers.
Rainbows
Rainbows themselves are a common appearance art and design, including in ancient mythology, arts, design and political movements.
Rainbows are a way of ordering color, as they appear in nature. Often rainbows symbolize optimism. Examples from the zeitgeist are in the commonly known sayings “Gold at the end of the rainbow” and “Without rain, there are no rainbows.”
Another way rainbows are used as symbolism, is in referring to different categories. One of the most famous examples of this is the rainbow flag used by LGBTQ+ community, the 8 colors of the original flag attempt to refer to some of the different sexuality and gender identities.
Personally I have used a rainbow of colors to identify the different aspects of my focus, from graphic to ethical design in my personal brand and on my online portfolio.
Black and White
Depending on the context, black and white, both are and are not colors. This is not so much a debate, but more depending on field from which you approach theses (non-) colors.
This leaves us with the funny thing that black and white and both are considered all colors, and not a color, at the same time.
Black is a color, white is not a color.
The first option is that white is all colors, and reflects all the colors of the visible light.
White is a color, black is not a color.
The second option is that black is not a color because it absorbs all the colors of the visible spectrum and reflects none back.
Dark and Light Themes
Differences in background and font colors, and the contrast between them, affect the readability of text. The conventional way is dark text on a white background, like books, letters, school materials and official documents.
Artists and designers have explored most other possible color combinations. Technology has made it a lot cheaper to experiment with light text on dark backgrounds, and made it easier to try it on for size.
I must find the source for this, but I recall reading evidence that humans by default read things more easily if they’re dark letters on a light background. However I am curious how much of this was anecdotal evidence, people referencing books and letters. Or if it’s actually people’s correctness when engaging with texts.
As a big fan of dark themes myself, but understanding the conventional wisdom about light themes, I followed my curiosity in a quest to learn more about both. By creating two versions of a website design, I attempted to learn more about this in practice.
Greyscale
Here is a little game, if you’re interested. If possible with your device, turn your mobile phone grey scale. This is not for everybody, but if you are able, this is a fun experiment.
When I turned all my app icons white, it frustrated my husband when he would use my mobile. App brand colors are used in how we navigate through our menus. When you remove the color and make them all the same, I quickly learned to minimize my apps.
I attempt to limit the amount of apps I install and use on my phone, but that process became a lot more pressing when I couldn’t rely on color anymore to identify different apps.
And when I moved to full grayscale, I noticed how much less engaged I came with the content I was engaging in. It was an immediate feeling of being less immersed in it. It was easy to see the potential for this to be used in dark patterns to engage people with mobile content.
Nowadays grayscale turns on during work hours and after bed time. But I encourage you to try this for a short time, and experience the power of color.
Accessibility
Color is depending on perception. What shouldn’t be lost in the conversation is people with different versions of color blindness. Some of this conversation is being held in the context of accessibility.
When making colors accessible, it’s important to remember that color perception greatly varies. It can be useful to look at projects in a grey-scale to see if there’s enough contrast.Tools such as Colorable Contrast Helper, can assist in finding combinations that serve their purpose.
Another way to add contrast with colors for vision impaired people, can be by adding background patterns. Polka dots or stripe patterns can help differentiate between different elements, similar to the traditional way by using colors.
This can be especially useful, because certain reds and greens can look the same to people with some forms of color blindness. Understandably for positive or negative symbolism, such as confirm and cancel buttons, this difference can mean all the difference in how a message is perceived.
Updates
Originally posted: November 26, 2018. Updated 2021.
