@4bitlabs/inclusive-color-space

A simple color-generator for procedurally-generated "realistic" skin-tones. Adapted from https://toneyalexander.github.io/inclusive-color-space with a few adjustments.

function picker<T>(deepFair: number, blush: number, temperature: number): T;

The all the arguments are mapped to [−100, +100], as opposed to the original implementation that is [−1, 1].

| Aspect | Argument | Range | Original Variable | |----------------------|----------------|----------------------|:-------------------------:| | Deep–Fair | deepFair | [−100, +100] | +T | | Ochre–Flushed | blush | [−100, +100] | -U | | Cool–Warm | temperature | [−100, +100] | +V |

[!Note] These values do not directly map to the original implementation; namely blush is inverted from the U variable of the reference implementation, where ochre is positive, while flushed is negative.

By default, the pickers will map the square deepFair/blush X/Y square-space onto the disc constrained by temperature within the domain sphere using Shirley-Chiu "A Low Distortion Map Between Disk and Square".

Examples

Using the default color picker.

import skintone from '@4bitlabs/inclusive-color-space';

const skinColor = skintone(0, 0, 0); // '#be7c50'

Variations

| Aspect | Arguments | | |--------------|------------------------|:----------| | Deeper | skinTones(-75, 0, 0) | #6b3523 | | Fairer | skinTones(75, 0, 0) | #e8c5ae | | −Blush | skinTones(0, -75, 0) | #b98849 | | +Blush | skinTones(0, 75, 0) | #c37057 | | Cooler | skinTones(0, 0, -75) | #ac7d66 | | Warmer | skinTones(0, 0, 75) | #d17b3a |

Advanced

Creating a new picker with a custom r² value, you can use the exports from @4bitlabs/inclusive-color-space/advanced

import { createHexPicker } from '@4bitlabs/inclusive-color-space/advanced'

const skinTones = createHexPicker(4.0)

You can also create non-sphere constrained pickers by passing { constrained: false }. This will act a lot more like the original implementation, as written, but can produce some anomolous values, especially at higher r² sizes.

import { createHexPicker } from '@4bitlabs/inclusive-color-space/advanced'

// Create a picker with the default r² value, but mapped to the temperature disc
const skinTones = createHexPicker(1.5, { mapping: 'square' })

This package, also exports more specific colorpsace pickers than the default hex generator, when more control is required. See the code for details:

import { createTUVPicker, createSRGBPicker } from '@4bitlabs/inclusive-color-space/advanced';

const srgbPicker = createSRGBPicker(1.5);
const srgbTuple = srgbPicker(0, 0, 0); // ["sRGB", 190, 124, 80]

/* or */

const tuvPicker = createTUVPicker(1.5);
const tuvTuple = tuvPicker(50, 50, 0); // ["inclusive-tuv", 0.43301270189221924, -0.4330127018922193, 0]