Subscribe to πŸ’Œ Tiny Improvements, my weekly newsletter for product builders. It's a single, tiny idea to help you build better products.

The finicky nature of color in product design

cover image - Select colors by understanding your audience

Color can be used to convey a message, evoke an emotion, or even change the way a user interacts with a product. It can also be really difficult to get color right. There are cultural, historical, contextual, and even physiological factors that can influence how we perceive color.

Ever feel like you understand colors differently than you partner, or your best friend, or your mom? It's not just you.

Color perception is a very personal experience. A 1995 study published in the scientific journal Perceptual and motor skills called Blue versus periwinkle: color identification and gender showed that "the women identified significantly more elaborate colors than did the men"*

A diagram showing an array of colors spanning the spectrum, with a female-presenting person on the left having unique words associated with each color, and the male-presenting person having far fewer. For example: teal, seafoam, and turquoise vs blue.
Color perception is a very personal experience. Image from user kathreynn on DeviantArt

The lesson: As you build your products, it's in your best interest to understand your audience. How do your primary users perceive color? What words do they use to describe their environment? Can you use an existing color taxonomy system or product palette that speaks to your user base? Understanding the value systems, language, and expression of your users can help you better design an interface that is intuitive, speaks to the user, and fits their needs.

* It's worth calling out that our cultural understanding of the nuance of gender in 1995 was not the same as it is today. There are many peer-reviewed papers with similar experiments going back as far as the 1970s. This particular study used a measure called "femininity" in its procedure. I have a feeling that if it were recreated today, they would choose more inclusive terms.

How many colors are there?

If you grew up speaking english, you might rattle off the colors of the rainbow: red, orange, yellow, green, blue, indigo, and violet.

The colors we see are a universal truth, right?

Well, not exactly.

Different spoken languages can have have drastically different numbers of colors. This is likely a result of to the cultural and historical contexts that surrounded the development of a given language.

Different linguistic groups with different levels of technological sophistication developed over time, and depending on the size of the group and the need for communication, different color terms emerged in different languages. For example, the Bassa language (spoken by about half a million people in western africa) has only two terms to describe color β€” roughly equating to β€œlight” and β€œdark”.

In Homer's The Odyssey, the color the sea and the sky are famously described as "wine-dark", not because they were red, but because the ancient Greek language doesn't have a word for blue!

I love this diagram of the color wheel as described by the Irish language, which shows where various color words are placed on the wheel. It's a great example of how different languages can have different color.

Irish Color wheel, courtesy of Wikipedia contributor Sherlyn
Irish Color wheel, courtesy of Wikipedia contributor Sherlyn

The Wikipedia page for Color Term goes into much more detail about the history of color terms and how they have evolved over time. It's a great read.

Color and culture

As someone building a product for other people to use, it's important to understand the cultural context of your users. This is especially true in a world where our audience of customers can be spread across the globe. Just as you might have a different understanding of color than your partner, your users might have a different understanding of color than you.

For this reason, it can be helpful to build early product prototypes and mockups in greyscale - using different shades of grey to represent different elements of your design. This can help you focus on the hierarchy of your design before layering on your brand colors.

More colorful wisdom

  • 🎨 Did you know that 7-10% of men are red-green Colorblind? Putting red and green elements adjacent to one another in your designs can be difficult for some users to distinguish.

  • πŸ“– For some great books on color in design, take a look at Color Design Workbook and 100 Things Every Designer Needs to Know about People.

  • πŸ™ŒπŸ» One of my favorite tools for evaluating use of color in your designs is Stark. It comes in the form of a plugin for things like Figma, InDesign, and all of the popular browsers, and uses WCAG and ADA standards to assess the accessibility of your designs.

My work online this week

  • ⌨️ I've been getting deeper into the world of TypeScript, and have been trying to document tricks and patterns that I've found helpful along the way. Refactoring TypeScript React components in VS Code is a blog post showcasing how I use VS Code to refactor a React component from a class-based component to a functional component.

  • πŸ“Ό I also published a YouTube short showing How to add TypeScript to your existing Next.js project - it's surprisingly easy!

  • πŸ₯³ This last bit is indirectly my work, but I wanted to share anyway - we published our first couple articles online for my new company, Craftwork. If you're interested in home painting, check them out! This also marks the beginning of a new journey into SEO and content marketing - building up a domain's authority and ranking for relevant keywords from scratch. I expect to share some of my learnings in the months to come.

***

Thanks for reading Tiny Improvements. If you found this helpful, I'd love it if you shared this with a friend. It helps me out a great deal.

Until next time - be excellent to each other!

Hero
The finicky nature of color in product design

Choosing colors for your product can be a difficult task. There are cultural, historical, contextual, and even physiological factors that can influence how we perceive color.

newslettercolordesign

SHIP PRODUCTS
THAT MATTER

πŸ’Œ Tiny Improvements: my weekly newsletter sharing one small yet impactful idea for product builders, startup founders, and indiehackers.

It's your cheat code for building products your customers will love. Learn from the CTO of a Y Combinator-backed startup, with past experience at Google, Stripe, and Microsoft.

    Join the other product builders, and start shipping today!