material-foundation / material-theme-builder

Visualize dynamic color and create a custom Material Theme.
https://material-foundation.github.io/material-theme-builder/
Apache License 2.0
360 stars 27 forks source link

Using term "Primary" for custom input seed color is misleading #209

Closed sergejsha closed 5 months ago

sergejsha commented 10 months ago

Describe the bug Using term "Primary" for custom input seed color is extremely misleading

To Reproduce Steps to reproduce the behavior:

  1. Open https://m3.material.io/theme-builder#/custom
  2. Set "Primary (Acts as custom source color)" to a color of your choice
  3. Check generated Light Scheme.
  4. Both the custom source color and the primary color in the scheme are called "Primary" but have different values. At the same time Secondary and Tertiary colors under "Core colors" and in generated schemes match, which is inconsistent to Primary colors.

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

Screenshot 2023-08-24 at 11 03 42
ale7780s commented 9 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.

margeeta commented 9 months ago

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 image image 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.

danielwilson1702 commented 9 months ago

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: Untitled