Closed sergejsha closed 10 months ago
"The color system automatically handles critical adjustments that provide accessible color contrast". The way I interpret this is that when you select a custom Primary colour, the Hue is extracted and then Chroma and Tone are adjusted to provide you with the set of shades you need for the interface.
I don't disagree with you, the tool is not very straightforward.
The Material Theme Builder uses Material Color Utilities for the generation algorithm, which helps create full schemes from limited inputs and mimic how dynamic color works for Android. The hue is used while the chroma and tone are adjusted to create the key colors, and the tonal indices are then created. The primary color role is tone 40 of the Primary tonal palette. This is explained in more detailed here: https://developer.android.com/design/ui/mobile/guides/styles/color#color-system-process Inputting a color, revealing the HCT values. While the hue persists, the input color has a tone of 86, so it will be close to the Primary Container input, but not Primary.
The Figma version can also be used for more manual or granular adjustments by editing the Figma style properties, they will export. Or of course, once you get a theme that is close, export the theme file and update the hex values in color.kt/color.xml.
Ok this makes a lot more sense now thank you. I don't think this is linked anywhere in the Color section on https://m3.material.io/ by the way and is much more informative.
So it creates a tonal palette from the input color and using a load of theory has decided that number 40 on the palette will always be the primary color, number 100 will always be the on-primary color etc.
This is fundamentally only suitable for generating color schemes from images if you can't by-design "lock in" brand colors and have this HCT system generate appropriate colors from those.
In the example #b5e0ef
is close to P-90, therefore not only does it decide for itself that 40 is a "nicer" color, it doesn't even shift the closest tone assignment of P-90 down to equal #b5e0ef
. In other words, it takes your primary color and says "I don't like that try these ones instead".
Obviously no one is going to change how this works because I disagree with that and I'm sure you have adoption metrics that have decided the millions of dollars here were well spent :)
I would recommend to avoid the confusion here adding a link to https://developer.android.com/design/ui/mobile/guides/styles/color#using-material on the m3 site, and to consider relabelling the core colors:
Describe the bug Using term "Primary" for custom input seed color is extremely misleading
To Reproduce Steps to reproduce the behavior:
Note: https://material.io/blog/science-of-color-design and https://material.io/blog/dynamic-color-harmony were read through.
Expected behavior Builder makes it clear that exact Primary color for the scheme cannot be chosen, but a custom source color for the Primary color can be given. This should be clear even without reading blog posts linked under the note above. Ideally, the term "Primary" should only be used for colors in generated schemes.
Screenshots