Designing an Inclusive Skin Tone Palette

Inclusive palette for Tidepool.org

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.

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

--

--

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
Kelly Dern

Video UX Designer @Google, interested in chronic health tech, occasional illustrator