Art School Week 1: Color Theory and Psychology
Today we’re starting with the basics of art. This is part of the foundation for making content that looks good.
When developing a brand, you want to invoke certain emotions in the target audience while retaining visual consistency in content. Content should be visible on websites and social media. No clashing colors or garish nightmares (unless that’s somehow part of your brand, then go wild). All rules in art can be broken if someone understands the how and why.
Disclaimer: This post is an INTRO to color, especially for ecommerce-minded people. Color is an immense and complicated subject, so I won’t be overly autistic here. Some of the below information may be oversimplified for clarity. If something is beyond the scope of this post, you can DM me on Twitter to learn more. Alternatively, toss phrases into DuckDuckGo or Wikipedia. I’ll add more to this post if needed.
COLOR TERMINOLOGY AND THE COLOR WHEEL
“Hue” is another word for color (referring to “pure” versions). A “shade” is when black is added to a color, and a “tint” is when white is added instead. A “tone” is adding gray (or both black and white). We can get an infinite number of colors by combining hues with black and/or white. On electronic devices, we use the RGB color model (Red, Green, Blue) and all colors on a screen are a mixture of these 3 colors.
To display color options, we have the “color wheel,” often shown like this:
.svg)
A downside of RGB is that different devices show color in different ways, and people perceive colors differently, so 100% agreement is impossible. One compromise (web dev) is “web safe colors.” These are the colors most likely to have a baseline level of consistency across devices. CSS also works with some named colors. Sites like W3Schools and Encycolorpedia list these options.
When using a color wheel, it can be as complex or simple as someone wants. And why a wheel to begin with? With color wheels, we can create groups of colors.
HOW TO CHOOSE COLOR PAIRINGS
Certain colors have “ideal” combinations, and we can find most by dividing a color wheel. Types of pairings:
Monochromatic (one hue with tints and/or shades)
Analogous (adjacent hues on the color wheel)
Complementary (2 opposites on the color wheel)
Triadic (3 opposites on the color wheel)
Tetradic (4 opposites on the color wheel)
Automated tools now exist for making the process easy, such as Canva’s color wheel tool.
Certain wavelengths are more pleasing together than others. For instance, blue and gold usually seem decent together (a complementary pairing on a color wheel). Award ceremonies love this combination.
As an everyday example, consider one’s wardrobe. Keep things to a few colors at most, and avoid bizarre color combinations that’d turn someone into a clown. Neutral colors or “earth tones” work well for many people because they automatically go together (nature already created correct color combinations, with no extra work needed on our part). With branding, going bold can be the better choice, but one should still limit colors. More = complexity and chaos. Honk.
An example of monochromatic colors is the U.S. Air Force dress uniform (dark blue hat, light blue top, dark blue bottom).
The color bigwigs at Pantone release an annual “color of the year,” which is supposed to be useful in determining trends. But one has to understand how and why to use this information, making it useless for most entrepreneurs. Which is fine, because brands should have consistent coloration over their lifetime. Chasing color trends detracts from customer experience if done incorrectly.
Now that we understand how to choose colors, let’s talk about which colors to choose.
THE PSYCHOLOGY OF COLOR
Color influences perceptions and marketers need to take advantage. Many studies show how and why this works. It’s difficult to overstate how important this concept is. One study claimed that “People make up their minds within 90 seconds of their initial interactions with either people or products… 62‐90 percent of the assessment is based on colors alone.” As an everyday example, chefs understand how good plating can increase flavor.
America’s favorite colors, according to one researcher:
Blue
Green
Purple
Red
Yellow
Orange
Pink
Since a color’s popularity varies by factors such as gender and location, popularity alone isn’t the deciding factor. Still, it can be one factor. Combining popularity with psychological aspects may augment a brand. For example, look at the S&P 500, and see how many brands use blue: Microsoft, Facebook, Berkshire Hathaway, JP Morgan Chase, UnitedHealth, Paypal, etc. Blue is an obvious and deliberate choice for all of them.
An example from Graphic Plus Media:
For more examples, just search “color psychology” for countless infographics.
Now to combine all of the above: contrast.
COLOR CONTRAST
Aesthetics and psychology aren’t the only reasons to choose certain colors. Readability and visibility of content matters too. View Web Content Accessibility Guidelines for specifics, or check out Contrast Rebellion for examples. It’s important for people to understand and recognize content. This goes with color pairings and avoiding clashing colors. So once you’ve chosen all your colors, look to see how they compare against each other. Sites like Coolors have a contrast checker.
One organization said that about 8% of men and 0.5% of women have a form of color blindness (color vision deficiency) and one study projects that nearly half of the global population will have other vision issues (myopia) by 2050. Rapidly aging populations in first-world countries may be a contributing factor. Around 16-17% of the American population is 65+, expected to rise to 22% by 2050.
Of course, we’ll be on Degen Island by 2035. The point is, ignore readability at your own peril. Customers won’t put in special effort to view something if they can keep scrolling. There’s plenty of other content online.
Speaking of color-blindness...
DESIGNING WITH COLOR BLINDNESS
If you’re color-blind, strategies depend on which type of color-blind. The most common is red-green color blindness, with protanopia and deuteranopia being the most severe. In this case, try to avoid designs that use reds or greens. Black and white content, or shades of blue, will be easiest. Blue-yellow color blindness is less common, yet the same principles apply. Stick with the colors you know are accurate, or do black and white to be safe. Another option is black (or white) with a splash of one color. Simple color schemes, combined with good contrast, goes a long way in determining your own benchmarks.
In ecommerce, color-blind entrepreneurs should probably focus on niches where they can better apply color psychology. Or team up with someone who can help on the design front. Note: Being color-blind isn’t always a downside because it can help with noticing contrast or other elements. Film director Nicolas Winding Refn is a good example of someone who’s turned being color-blind into an asset (his movies are always visually striking, even if one doesn’t care for the content). Fortunately, many of the same artistic principles apply, regardless of which colors you see. Color pairings, layout styles, and other choices make a big difference.
Facebook for example, uses a lot of colorful icons, but the design (shape, size, contrast, etc) of those icons keeps the site accessible. Likewise, dark mode only uses shades of black/white for background and text. User-generated image and video content may not show correctly for color-blind people, but the core functionality of the website remains the same.
Simplicity is often best for logos and branding. Check out the big names and examine what makes sense about their designs. More about this topic in a future Substack post. Subscribe to immediately know when it comes out!
RECAP
How do we get colors?
How does one choose groups of colors?
Which colors best represent a brand?
Is the brand’s content clear?
This is a reader-supported publication. For further support of my work:
I sell physical artwork at ApolloGallery.org with more to come
You can hire me for graphic design work