Colors in theme doesn't match tonal palette

[kjetol]

Hi! I'm creating a primary color based on #304FFE. The tonal palette looks fine, but the primary color shows a color that is not in the palette. It also use primary 40 as reference, which I clearly can see is wrong. Is there a logical reason for this? I've tried toggling on/off color match in the settings, but there is still a mismatch with the tonal palette. Just need to know what is happening, so that I'm in control.

[juyrjon]

Seeing this as well.

Examples: Seed value: #4D83E5

Color Match setting enabled

• Variable/palette/P40 & style/ref/primary/40 becomes #185BBB. I expect this one to be true
• Variable/schemes/light/primary is #004CA7 (however the deprecated Surface Tint is correctly applied as #185BBB)
• Style/sys/light/primary is #004CA7

Color Match setting disabled

• Same variable/palette/P40 & style/ref/primary/40 is #185BBB as it seems they should be.
• Variable/schemes/light/primary is #445E91 AND the deprecated Surface Tint is correctly applied as #445E91
• Style/sys/light/primary is #445E91

Color Match at least produces something closer to expected, but the mismatches are confusing.

[HimanshuGodara]

I want to add few things here. The error in the mapping of generated palette is not consistent. It varies from seed colour provided. I've added one such example in the issue #251. There is also a Figma file where you can see the difference in the palette for a seed colour of (#008489) Here is the Figma Link where you can check the mappings of colour roles to the reference tokens

[gepardec-wf]

same here.

problem: the values of the color roles (sys) are not always chosen from the tonal palettes (ref). some values match, but many others differ.

it is the same problem with the figma-plugin, the web version (2.0.1) and the latest web version (which is "prerelease"?).

[sweetsaltco]

The problem still exists until today. I lost a lot of time trying to figure out what went wrong. I'm looking into manually making adjustments to the styling sheet so guidance from the Material 3 team on a manual alternative would be appreciated.

[margeeta]

The palettes are only displaying the color match variation currently, regardless if color match or content color variant settings are off. We are investigating this issue to see if we can have the algorithm display the corresponding palettes. Please note the resulting scheme colors are correct! If you have color match on, your colors will be used in container roles. If color match is off, then the tonal spot variant is used.

[kjetol]

Yeah, I lost a lot of time too. Ended up defining the tonal palettes and color roles manually so that I have total control of the colors.

Kjetil

tir. 20. feb. 2024 kl. 22:22 skrev Mohammad @.***>:

The problem still exists until today. I lost a lot of time trying to figure out what went wrong. I'm looking into manually making adjustments to the styling sheet so guidance from the Material 3 team on a manual alternative would be appreciated.

— Reply to this email directly, view it on GitHub https://github.com/material-foundation/material-theme-builder/issues/240#issuecomment-1955118943, or unsubscribe https://github.com/notifications/unsubscribe-auth/BFCBF4TTNV4ZWWWBA43LE33YUUHXVAVCNFSM6AAAAABBKCWBV2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJVGEYTQOJUGM . You are receiving this because you authored the thread.Message ID: @.*** com>

[gepardec-wf]

i too have to manually readjust hundreds of variables in figma.

the plugin and web version of theme builder seems very buggy right now.

the visible and exported color palettes should respect the color match and other settings. I hope this gets fixed soon.

what i do not understand is that it is not possible to simply export all of the generated color palettes and color roles. eg. the palettes of error role or the palettes of custom colors. they are shown at least in the web version, but can beither be exported nor manually copied or read out. I guess that would be too easy... ;)

[margeeta]

We highly recommend only using the color scheme and not the tonal palettes, the color scheme is used for your app's theme. The tonal palettes are only there as reference. Color match places the input color into the Container role. The rest of the color roles are shifted and generated using Material Color Utilities algorithm. For more granular control, the styles in Figma and the exported color file values can be updated.

[juyrjon]

Additionally, the Color Match setting enabled reverses Container and On Container values. It should produce a light container (P/S/T/E-90) with a dark on-container color (P/S/T/E-10) but creates light text on dark (again with values which don't match refs)