Designing an Inclusive Skin Tone Palette

Image for post
Image for post
Inclusive palette for Tidepool.org

Character illustrations can be used to tell whimsical or aspirational stories, or just to inject a more human touch into a brand. While most products have a defined brand palette, oftentimes they don’t have a defined character illustration style, skin tone or hair color palette.

In this case study, I review a process for creating inclusive characters.

  1. Character exploration
  2. Developing an inclusive palette
  3. Palette research
  4. Creating a Grouped Analogous Palette
  5. Showcase

1. Character exploration

Image for post
Image for post
Image for post
Image for post
Sketches of portraits

Bodies from the real world

Image for post
Image for post
Image for post
Image for post
Tidepool.org character illustration sketches

Face and head shapes

Image for post
Image for post
Image for post
Image for post
Quick sketches of head shapes and profiles

2. Developing an Inclusive Palette

Skin tone palettes use warmer tones and a grouped analogous, but not linear, color palette.

When is it OK to create blue people? Naturalistic or abstract palettes?

Depending on the project, I might exaggerate the palette. Using non-naturalistic colors, such as blues or purples, don’t showcase inclusivity. While these colors abstract the palette, their

Why an analogous palette is problematic

Image for post
Image for post
Analogous palette

3. Setting up the Palette and Researching Makeup

The skin color palette uses a mix of warm creams, softer yellows, muted olive, and darker brown tones. A great reference for setting up a palette is researching makeup brands. Some brands are limited in the diversity of their colors, so it’s best to review several brands to find common themes.

Image for post
Image for post
Research on makeup colors

Consider hue

  • Add more yellow than red tones.
  • Stay away from grey/ashy tones or blue tones which can give skin tone an unhealthy look. It can dull the color and make it difficult to adjust for a healthy, vibrant look.

Differentiate between hue

  • It’s easy to differentiate between tones.
  • Pairing multiple skin tones in the same image will seem aligned
    and not jarring.
  • Skin isn’t white (#FFFFFF) or black (#000000) There isn’t a linear light to dark scale.

Research skin tone palettes

We can start by researching shades from makeup sites to build a foundation. However, many brands aren’t inclusive of the full range of skin tones — many of the darker shades aren’t represented.

Most makeup brands classify their shades according to this formula:
Fair
Neutral/cool
Pink/peach/rosy

Olive
Warm
Tan/beige

Golden/warm
Yellow undertones
Caramel undertones
Cinnamon

Dark/soft
Cool/espresso
Rich coffee/mahogany red

4. Creating a Grouped Analogous Palette

Since Skin tones don’t follow a linear color palette.

1. Start with a base

Image for post
Image for post
Base hue

2. Add the darker, pink tones

Starting with a base color for one of the groupings can anchor the palette. It can be any of the fair, olive, golden/warm, or dark/soft grouping. After creating one of the anchor colors, it’s easier to adjust for darker variations. Also, after completing the research based on makeup brands, you should have a strong direction for the brown, olive and yellow tones too.

Image for post
Image for post
Add darker variations
Image for post
Image for post
Repeat with other hues
Image for post
Image for post

Testing the palette

Next, it’s always a good idea to test the palette with either the illustration scene that that you’re working on, or the characters. If you’re developing a character style, explore how the palette combines with the brand palette and adjust either to exaggerate or soften the contrast.

Image for post
Image for post
Explorations in hand gestures
Image for post
Image for post
Inclusive palette for Tidepool.org

5. Showcase

Image for post
Image for post
Final character illustration for Tidepool.org
Image for post
Image for post
Personal project
Image for post
Image for post
Personal project
Image for post
Image for post
Final character illustration for Tidepool.org
Image for post
Image for post
Personal project
Image for post
Image for post
Illustration exploration for Google Nest
Image for post
Image for post
Personal project
Image for post
Image for post
Personal project
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Character explorations for Tidepool.org
Image for post
Image for post
Personal project

Of course, illustrations should go beyond skin tone to be a starting point for an inclusive illustration. We should strive to represent people who we see represented in the real world, encompassing all abilities, ethnicities and cultures.

Image for post
Image for post

As always, I love to hear thoughts, questions and feedback!

Twitter

Portfolio

Written by

Designer @Google, teaching with @GirlsWhoCode & @trydesignlab, occasional illustrator

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