Designing an Inclusive Skin Tone Palette

Kelly Dern
5 min readAug 15, 2020

--

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

Sketches of portraits

Bodies from the real world

Tidepool.org character illustration sketches

Face and head shapes

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

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.

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

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.

Add darker variations
Repeat with other hues

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.

Explorations in hand gestures
Inclusive palette for Tidepool.org

5. Showcase

Final character illustration for Tidepool.org
Personal project
Personal project
Final character illustration for Tidepool.org
Personal project
Illustration exploration for Google Nest
Personal project
Personal project
Character explorations for Tidepool.org
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.

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

Twitter

Portfolio

--

--

Kelly Dern

Senior Video UX Designer @Google / Advisor / Public Speaker, interested in chronic health tech, occasional illustrator