Software gives you five skin tones, or sixteen million

2 months ago

Pick a skin tone in software and you get two bad options. About five preset shades, like an emoji. Or all sixteen million colors a screen can show, with no help choosing.

Ask

Ask about this presentation

Answers are generated from this presentation.

Chapters

  1. 0:00Software gives you five skin tones, or sixteen million
  2. 0:12Three sliders and one variety dial
  3. 0:22Each slider means something clear
  4. 0:33Sorted by hand, then rotated flat
  5. 1:03One knob for variety
  6. 1:20At zero, one neutral tone
  7. 1:32Five shades or sixteen million colors. Now three sliders and a dial
Show transcript

Software gives you five skin tones, or sixteen million

Software gives you five skin tones, or sixteen million.

One person built the usable option in between.
about 5
preset shades
too few
or
16,777,216
colors a screen can show
too many, no help choosing
color space open source runs in a browser

Pick a skin tone in software and you get two bad options. About five preset shades, like an emoji. Or all sixteen million colors a screen can show, with no help choosing.

Three sliders and one variety dial

Three sliders and one variety dial.

The whole range of human skin, in a browser.
a row of generated faces spanning the range of human skin tone
the color picker: a two-way square, a slider, and the rendered face it produces
toneyalexander.github.io/inclusive-color-space · open source (MIT)

One person built a free tool for this. It turns that whole range of human skin into three simple sliders, plus one dial for how much variety you want. It runs in a browser.

Each slider means something clear

Each slider means something clear.

Up and down, left and right, and the slider.
Deep
Flushed
the two-way color square from the picker
Ochre
Fair
the cool to warm slider
CoolWarm
Discovered, not designed.
toneyalexander.github.io/inclusive-color-space

Those three sliders turned out to mean something clear. Deep to fair. Flushed to ochre, a golden tan. Cool to warm. And the builder never chose those meanings.

Sorted by hand, then rotated flat

Sorted by hand, then rotated flat.

A standard rotation squared up the crooked pile.
the labeling board: skin-like faces sorted to the left, other colors to the right
Sorted by hand: could a person be this?
the crooked banana-shaped cloud of yes colors, rotated flat by PCA
The messy pile, squared up.
toneyalexander.github.io/inclusive-color-space

The builder sorted hundreds of colors by hand, into “a person could be this” or not. Every screen color is three numbers: how much red, green, and blue. Plot the yes-colors and they make a lopsided, banana-shaped cloud, sitting crooked. Then a standard piece of math called principal component analysis rotated that cloud flat, until its own natural directions lined up with the sliders. The rotation found the directions the colors vary along. Those directions became the sliders.

One knob for variety

One knob for variety.

The flattened cloud, wrapped in a ball.
a ball hand-fit around the rotated cloud of colors
The ball around the cloud.
five rows of faces, from nearly identical at the top to wild fantasy colors at the bottom
Tight to realistic to cartoonish to fantasy, from one dial.
toneyalexander.github.io/inclusive-color-space

For the last step, the builder wrapped the flattened cloud in a ball. The ball’s size becomes one variety dial. Turn it down and every direction shrinks together, evenly, never lopping off one end. Turn it up and the tones become cartoonish, even fantasy.

At zero, one neutral tone

At zero, one neutral tone.

The exact middle of the whole space.
the single neutral tone at the center of the space
the center tone · #BE7C50
If that center ever leaned one way, the space would be skewed.
It doubles as a skew check.
toneyalexander.github.io/inclusive-color-space

Turn that dial to zero and you land at the exact center: one neutral tone. If that center ever leaned one way, the space would be skewed. So the center checks the space.

Five shades or sixteen million colors. Now three sliders and a dial

Five shades or sixteen million colors. Now three sliders and a dial.

toneyalexander.github.io/inclusive-color-space

So the choice that was five shades or sixteen million colors is now three sliders and one dial. Sorted by hand, rotated by math, open for anyone to build on.