search

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
363 stars 28 forks source link

The same color is used for Primary, Secondary, and Tertiary even though I set them differently in Core Colors #96

Closed eygraber closed 1 year ago

eygraber commented 1 year ago

Describe the bug I set a primary, secondary, and tertiary color, but the primary color is used for secondary and tertiary as well.

This is happening in Chrome and Firefox in Ubuntu.

To Reproduce Steps to reproduce the behavior:

  1. Go to 'Custom' tab
  2. Click on 'Primary' in Core Colors
  3. Enter a new value for it (#32b2c9)
  4. Do the same for Secondary (#84d1df) and Tertiary (#def3f6)
  5. Observe that the colors in Core Colors have changed
  6. Scroll down to 'Light Scheme'
  7. See that the same color is used for Primary, Secondary, and Tertiary
  8. Export
  9. The same color is used for Primary, Secondary, and Tertiary

Expected behavior That the correct values would be used for Primary, Secondary, and Tertiary

Screenshots

image

image

Desktop (please complete the following information):

Smartphone (please complete the following information):

jwill commented 1 year ago

In the case of the example you gave, when converted to HCT color, the hues end up being very close to each other(207,210,214). The chroma values, or how vibrant or neutral[gray] the color is, are also in a bit of a tight band (45,34,14). The one component that varies more widely is the tone (or lightness) of the colors input. The color roles have set values in relation to a source color so those differences can be lost/normalized. Additionally, the color algorithm may shift input colors to make sure the color roles and tones computed from them have the desired qualities like proper contrast and such. For example, def3f6 unmodified would fail contrast on many light backgrounds.

We are always interested in how folks are interacting and expecting from our tooling. But in this case, this works as intended.

You can read more about HCT color and the color algorithm here: https://material.io/blog/science-of-color-design

eygraber commented 1 year ago

Thank you. I discussed with our design team and we will be reworking our palettes to work better with material 3!