material-color-utilities icon indicating copy to clipboard operation
material-color-utilities copied to clipboard

Need a helper for getting seed colors for the material3 color system

Open ber4444 opened this issue 2 years ago • 3 comments

I am happy that this library exposes the Hct class which was used under the hood in Material library's MaterialColors.getColorRoles() like this:

    Hct hctColor = Hct.fromInt(color);
    hctColor.setTone(tone);
    return hctColor.toInt();

Basically, I used it to get color roles for a seed color, which as per material specs are at tonal values of 10, 40, 90 and 100.

All good, but now my designer wants me to use the exact color code for the onAccentContainer role, which would be the seed color at tonal value of 10. How do I generate this seed color, so that after setTone(10) I would get the exact color code he wants, while also supporting all the other material color system tones?

ber4444 avatar May 24 '22 06:05 ber4444

val seedColor = designerWantsThisColor.setTone(-10) is the way I would do it, if your library supported negative values so that I would get seedColor.setTone(10) == designerWantsThisColor and this way the primary UI elements would have the exact color he wants, rather than its toned variant. (ref for the color system: https://m3.material.io/styles/color/the-color-system/color-roles)

ber4444 avatar May 24 '22 06:05 ber4444

I don't think a function like this is possible. In a nutshell, this is what the above code does:

  1. Convert your seed/source color from RGB to HCT color space. HCT is very similar to HSL in that it uses Hue, Chroma/Saturation and Tone/Lightness to represent the color, instead of red, green and blue.
Hct hct = Hct.FromInt(seedColor);
  1. Change the Tone to 10. This makes it so that whatever the seed color was, the result will have a certain perceived brightness, but its hue and chroma will remain the same.
hct.Tone = 10;

  1. Convert back to RGB.
int result = hct.ToInt();

So, unless designerWantsThisColor's HCT Tone is 10 (check here), you will have to find a workaround. If you have any questions, please let me know.

albi005 avatar May 29 '22 20:05 albi005

I think (haven't tried it but based on what is claimed) this has been addressed now with: Screenshot_20231225-093315 Only catch is that we need to generate the colors with the tool, not at runtime.

ber4444 avatar Dec 25 '23 17:12 ber4444