Image for post
Image for post

Color My Digital World

Susan K Rits
Jul 15, 2017 · 6 min read

“People decide whether or not they like a product in 90 seconds or less. 90% of that decision is based solely on color.” — 99designs

Color psychology

Color psychology is the idea that colors elicit emotions from people, often subconsciously. Color has a predictable and quantifiable physiological effect that influences our perception and our behavior. It is about emotions, and whether people know it or not (or admit it or not) the colors used in a design strongly affect those emotions.

So blue might convey a feeling of trust, calm, masculinity, while yellow makes you think of creativity, summer, positivity.

Image for post
Image for post

Color is subjective

Now that we’ve sorted that all out, it will be easy to pick the perfect color palette for your brand or business or product, right? Just choose from the color families above and start mixing.

Blue is for boys, pink is for girls, and white signifies purity. Everybody knows that.

But wait — be careful!

Not all colors mean the same thing in all contexts, or all cultures.

Color is contextual

The meanings of colors are contextual, as the image above demonstrates. Red can be the color of love and valentines, or of serial killers and cult leaders. Depending on how you use the color, or to what metaphors you apply it, red can be fast like a race car or cool as an icy cold Coke or dead as a zombie.

Brides wear red, white means mourning, and green is for someone who cheats or is a cuckold…what? That doesn’t resonate with you? Well it makes perfect sense to the Chinese and Indians. Don’t forget, colors mean different things in different cultures.

Image for post
Image for post

Color meaning is cultural

Colors are culturally created; in America, the color white means purity, chastity, and virtue, and so is the color of a wedding gown. In India, widows wear white saris and brides wear red. You may see green and think of the great outdoors, the Chinese think of sickness or cheaters.

How you use a color — what palettes you put together — must be thought through carefully, and with sensitivity to the culture in which that brand or product will be displayed.

Build and test a color palette

While the psychology of color may help to explain why someone feels a certain way about a certain color, it isn’t the only determining factor in selecting your color palette. The entire design, from UX to UI to branding & logo all work together with color to convey a subconscious message to your customers.

What emotions do you want your brand to promote or project?

Creating a mood board

One way to start developing a color palette for your product is to start with a mood board. These are an arrangement of images, ideas, inspiration and products intended to evoke or project a particular style or concept that you associate with your product. (Or want people to associate it with.)

Image for post
Image for post
Moodboard by Mimi Yu.

Mood boards are an excellent way to play around with themes, images and colors in context. From there you can start to put together a working palette to test with your customers, stakeholders and users.

Play with palette makers

There are whole schools of thought around how to build a color palette and some fantastic tools.

  • Some recommend limiting the palette to three colors, others say four, or five.
  • Some wise colorists will say you need a neutral, a bright and a dark for any workable palette.
  • Still others caution designers to stay with the same saturation and brightness values but select different hues.
  • Some advocate for all one hue and vary the saturation and brightness.

What to do, what to do? The answer is: it depends. Sometimes just know

Monochromatic colors all have the same hue, but vary the saturation and brightness. This palette comes across as sophisticated and subtle. Great for when the content is the focus and the UI elements need to fade to the background.

Triads come from three opposing points on the color wheel. When the saturation and brightness are kept the same, the hue variations are complementary to each other, and will liven up your designs.

Analogous colors sit next to each other on the color wheel. The closer they are in hue, the more they will blend together. It takes careful balancing to find the three that work happily together without clashing.

Image for post
Image for post

Complementary and split complementary are colors that sit opposite from each other on the color wheel. These colors make a great contrast for each other and work well with any product that wants to pop!

Use a palette generator

Need more help finding a palette? Click over to any of these palette makers and play to your heart’s delight.

So what’s the perfect color for your brand?

It depends on your product, the emotional response you’re hoping to evoke, the color trends of the year (or season, or moment) and cultural aesthetics and values. Once you’ve got a few possible palettes together, start designing with them and test your creations:

  • Throw some logos, UIs and social media posts at your customer base and stakeholders, and ask them what they see and feel.
  • Pull out your mood boards and do some A/B testing.
  • Ask your user group to give a thumbs up or thumbs down for each sample image or color group or logo.

It won’t be hard to see what people are loving and leaving this season, and which palettes will evoke the response you want.

Keep up with the trends

Just remember, colors trend just like clothes. So be ready to update your brand in a season or two. Remember what Miranda Priestly said in The Devil Wear’s Prada:

100 Days of Product Design


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store