How is neutral color created?

[Whip]

Sorry if this is not the right place to ask but I want to know how the neutral color is created. Is it hard coded to certain shade of gray or is it derived from the primary color? If so, what is the calculation for conversion between primary and neutral color?

[MrEbbinghaus]

This is the piece of code, that generates the colour palettes. The secondary, neutral and neutral-variant colours are all less colourful versions of the source's hue.

https://github.com/material-foundation/material-color-utilities/blob/main/typescript/palettes/core_palette.ts#L49

const hct = Hct.fromInt(argb);
const hue = hct.hue;
const chroma = hct.chroma;

this.a1 = TonalPalette.fromHueAndChroma(hue, Math.max(48, chroma));
this.a2 = TonalPalette.fromHueAndChroma(hue, 16);
this.a3 = TonalPalette.fromHueAndChroma(hue + 60, 24);
this.n1 = TonalPalette.fromHueAndChroma(hue, 4);
this.n2 = TonalPalette.fromHueAndChroma(hue, 8);

[Whip]

So you are generating a tonal pallette with Hue (original from primary) and Chroma (4). But which tone do you use for neutral color? By looking at the theme builder, the primary color is at Tone 40 and Neutral is at 60. So Tone 60 from your n1 pallette is the neutral color?

[MrEbbinghaus]

I don't understand what the theme builder does with this neutral colour. Changing the tone of that colour just breaks the tool… I assume, that the tool just lets you build your own palette for each colour. (with neutral variant missing)

---

In the context of dynamic colours from a single source colour, there is no semantic "neutral" colour.

Here are the default colour palettes (I think this is a hue of 270) and their use in the semantic colours. You can see that neutral with tone 99 (hct(270, 4, 99)) is used for (light) backgrounds and surfaces.

[Whip]

Yeah actually it doesn't matter if the key color is Tone 40 or 60. Thanks for the code and help.