Plugin creates tonal palettes with different Hue (color) even for same category as primary

[beingminimal]

Describe the bug When we create new theme from plugin, it creates color styles with different hue code for even same tonel palettes like primary & secondary. Check screenshots

To Reproduce Steps to reproduce the behavior:

1. Just open plugin in any figma file and generate new theme and you can check it in primary tonal palettes

Expected behavior It should change only lightness of single hue color to generate tonal palettes. Please solve this bug as soon as possible. Thank You.

Screenshots Check hue numbers in all images

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[rodydavis]

Would love to get more info here, but I believe it is working as intended.

When a primary, secondary .... color is modified it generates the corresponding tonal row and then color scheme.

The color picker in figma can override any value, but from the plugin it will make sure it runs through the algorithm.

[beingminimal]

@rodydavis Hey this are the not override values by figma color picker, but this are the screenshot taken after creating theme from plugin. which shows it is creating color tonal palettes with diff hue color for even same color tonal palettes. So as per HUE color specs and M3 specs it must be same hue color with diff lights in it. I hope i have cleared here. Let me know if any further efforts required. Thank You

[tonyhallett]

@codecycleteam

Today it agrees with the M3 specs. HCT

https://m3.material.io/foundations/glossary

HCT is an abbreviation of hue, chroma, tone. It’s the name of the color space that enables dynamic color. HCT is based on CAM16 hue and chroma; the L construct for luminance from Lab (CIELAB, 1976) is denoted as T for tone.

The material-color-utilities repo, that I am assuming the plugin uses, matches the Android code

https://github.com/material-foundation/material-color-utilities/tree/main/java/hct

https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/color

The single color that’s extracted to define all five key colors is called a source color.

https://github.com/material-foundation/material-color-utilities/blob/a010a621940b5eaac5bb73cc3b7f2d4d4d8a20c6/java/palettes/CorePalette.java#L44

  private CorePalette(int argb) {
    Hct hct = Hct.fromInt(argb);
    float hue = hct.getHue();
    this.a1 = TonalPalette.fromHueAndChroma(hue, max(48f, hct.getChroma()));
    this.a2 = TonalPalette.fromHueAndChroma(hue, 16f);
    this.a3 = TonalPalette.fromHueAndChroma(hue + 60f, 24f);
    this.n1 = TonalPalette.fromHueAndChroma(hue, 4f);
    this.n2 = TonalPalette.fromHueAndChroma(hue, 8f);
    this.error = TonalPalette.fromHueAndChroma(25, 84f);
  }

A tonal palette comprises a 13-tone range that serves as the basis for mapping tones to specific roles

In code: Tone.of(hex code).get(tone) or Tone.of(hue, chroma).get(tone)

https://github.com/material-foundation/material-color-utilities/blob/a010a621940b5eaac5bb73cc3b7f2d4d4d8a20c6/java/palettes/TonalPalette.java#L66

  public int tone(int tone) {
    return cache.computeIfAbsent(tone, k -> Hct.from(this.hue, this.chroma, tone).toInt());
  }

Although no 13-tone palette code in the repo the color roles take the tone https://github.com/material-foundation/material-color-utilities/blob/a010a621940b5eaac5bb73cc3b7f2d4d4d8a20c6/java/scheme/Scheme.java#L111

  public static Scheme light(int argb) {
    CorePalette core = CorePalette.of(argb);
    return new Scheme()
        .withPrimary(core.a1.tone(40))
        .withOnPrimary(core.a1.tone(100))
        .withPrimaryContainer(core.a1.tone(90))
        .withOnPrimaryContainer(core.a1.tone(10))

I have a C# port of the java code and the palettes that the figma plugin dsp exports agrees with the palettes generated from C#.