Custom primary color not accepted, applies other color

[phillies]

Describe the bug Theme Builder changes the custom primary color upon entry without error message or ability to change the color to the desired color.

To Reproduce

1. Open Material Theme Builder, select Custom
2. Click on Primary and enter a custom primary color, e.g. 12, 34, 67 (a dark blue)
3. Hit enter to save the color
4. Color jumps from dark blue to a medium blue (44, 91, 167)
5. Re-entering the dark blue color now leads to the correct color on the left side (Key Colors) but still wrong color on right side (Your Theme)

Expected behavior The Theme Builder should accept the custom color as specified by the user and build the theme accordingly. Otherwise an error message why the color cannot be used would be necessary.

Screenshots

Desktop (please complete the following information):

OS: Windows 10 Browser: Chrome Version: 95

Additional context Identical behavior for web version and figma plugin.

[tfonteyn]

same here. Open page, switch to custom. click primary, select hex, enter values repeat for sec/ter. use export to xml, it exports the defaults.

It seems manual input is where the issue lies. Using the slider "seems" to work (I did not spend to much time on this part)

[rahulgajjar]

Same issue here. When I select the particular shade of blue (#3854E1) and try to select green (#00C6A8) as a secondary color, it applies some other color as secondary. Similar to the primary color. But if I try to select green as primary, it does generate color properly, but it won't work as the secondary color.

[FluorescentHallucinogen]

If I understand correctly, the problem is that not every color that can come to mind can be used. But the color picker can't limit the color space to only available colors. See https://github.com/openui/open-ui/issues/421. That's why some of the selected colors are reset.

@rodydavis @una Right?

[rahulgajjar]

Same issue here. When I select the particular shade of blue (#3854E1) and try to select green (#00C6A8) as a secondary color, it applies some other color as secondary. Similar to the primary color. But if I try to select green as primary, it does generate color properly, but it won't work as the secondary color.

Part of the issue has been solved in the current build. Still, when the primary color is selected, the secondary and tertiary colors are getting reset. That should not happen. Also, while exporting DSP file, it is not exporting the information correctly. The edited text styles are not reflected in the JSON file.

[rodydavis]

The web version will be fixed soon as a fix was already applied to the figma plug-in (for the input color changing slightly)

Right now not all colors are a valid input. The color needs enough hue and gamma to create a tonal row to match accessibility.

There are a couple fixes being worked on for colors that need adjustment.

[alexfracazo]

Same issue but a different result. The primary colour used reach AAA accessibility requirements - #1B22E6

Generated primary colour (Based on #1B22E6) doesn't reach AAA requirements - #3740F7

Expected behaviour: The Theme Builder should accept the custom colour as specified by the user, for example: If the user chooses a custom primary colour the system should build the theme using the custom colour as PRIMARY.

[FluorescentHallucinogen]

One of the solutions I discussed with @rodydavis is to use/create a custom color picker that can draw contrast ratio curves instead of native browser built-in color picker that cannot do this.

This should significantly improve the UX (user experience) by visualizing that not all colors are a valid input and why.

This idea comes from Chrome DevTools color picker.

BTW, Chrome DevTools source code is open. So as an idea, the color picker can be extracted and refactored as standalone web component. See https://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/ui/legacy/components/color_picker.

[jkmckay]

Anyone have a work around for the time being?

[jesselima]

Not working for me still. It does not keep my primary color, which is replaced by another color. I set the primary color f1592a, and then it is replaced by B12D00. I exported to check this value.

The copy and paste hex value inside the color-picker seems to be another issue. Does anyone have this problem too?

https://user-images.githubusercontent.com/17894156/151041702-479d0c50-00c0-4489-a919-eab09f6adf39.mov

[rodydavis]

The built in html5 color picker does not allow for pasting a Hex code

[freefish1218]

The web version will be fixed soon as a fix was already applied to the figma plug-in (for the input color changing slightly)

Right now not all colors are a valid input. The color needs enough hue and gamma to create a tonal row to match accessibility.

There are a couple fixes being worked on for colors that need adjustment.

Indeed in a real project this is the more desired result: The Theme Builder should accept the custom colour as specified by the user, for example: If the user chooses a custom primary colour the system should build the theme using the custom colour as PRIMARY.

Suggestions can be given by the system, but should be optional

[XamDR]

Hi. This issue is still happening. Any solutions? Some of us aren't designers and cannot afford one, so we use websites like these to generate the color palette for our apps. That's why even if is possible to manually change the primary color as desired, it is kind of hard to do it for every other color. In my case, I don't know what algorithm it's used to create the secondary, tertiary, surface colors, etc. Please let us have an option to keep the primary color we want and not change it for some variation of it.

[bpappin]

I just filed a similar bug. It blows my mind that when i set up a custom theme, and input a specific colour, it simply decides, "nope, sorry, i like this one instead".

This is not on. Almost every customer I've had will demand certain colours, and being able to maintain cohesion between the designers and the developers is pretty important.

[freefish1218]

I just filed a similar bug. It blows my mind that when i set up a custom theme, and input a specific colour, it simply decides, "nope, sorry, i like this one instead".

This is not on. Almost every customer I've had will demand certain colours, and being able to maintain cohesion between the designers and the developers is pretty important.

Yes! this is the fact. every customer want a more definitive color, not a similar one

[amustafa98]

Same issue with me, any solutions..?

[bpappin]

What we did was use the tool to make sure we were generating all the tokens, then manually change them all. Makes the tool almost useless.

[freefish1218]

The web version will be fixed soon as a fix was already applied to the figma plug-in (for the input color changing slightly)

Right now not all colors are a valid input. The color needs enough hue and gamma to create a tonal row to match accessibility.

There are a couple fixes being worked on for colors that need adjustment.

Looking forward to really solving this problem, Tks

[LiamKarlMitchell]

Same with #03525e and its perfectly fine to use with #FFFFFF foreground so confused as to why it changed it in theme without warning. If its a feature and for accessibility reasons I guess I understand, but it should warn or ask user if they want to proceed anyway.

[margeeta]

The theme builder uses the input's hue and applies it to a tonal range to then form the color schemes. This is all done using Material Color Utilities. The color roles within the schemes are based off certain tonal steps, so primary is always primary 40. While the input color may not have a tone of 40. This is to create accessible color schemes. Keep an eye out for further color algorithm adjustments.

If you wish to customize the M3 derived scheme further or completely override them, this can be done within Figma, as exports will match the style properties. Tonal palettes will not be updated if this is done and making updates to the color inputs will override Figma style properties.

[sedubois]

Thank you @margeeta for the explanation.

primary is always primary 40

@margeeta sometimes I do not find the 40 tone esthetic and may need flexibility to change to another tone while keeping the hue. For instance, when I enter an orange value such as #f08a24 as primary color in the custom Material Theme Builder, I find the resulting tone 40 #904d00 selected by the Material Theme Builder as primary color too brown and unesthetic in the light scheme (whereas the tone 80 #ffb77d used for the dark scheme is OK). Then I am forced to manually change it to a brighter tone after exporting.

If you wish to customize the M3 derived scheme further or completely override them, this can be done within Figma

@margeeta I followed the link to Figma provided in the README, then "Try it out", "Run", "Create theme", in the Custom tab set the primary color as I want, but then I do not see an option to customize its tone. After using Export > Jetpack Compose, it generates the same output as with the Material Theme Builder website, the value of val md_theme_light_primary still corresponds to the tone 40. But I am not familiar with Figma and may have misunderstood your instructions.

[bpappin]

Why is this issue closed? Its not fixed as far as I can see. Pretty much everyone except the developers have a problem with it.

[bpappin]

I have re-opened this bug as #150

I would encourage everyone to go vote for it, and make some noise.

[gm2707]

I am having the same issue - I input #6F505F as my primary and both the Figma plugin and the web tool spit out #944171 as the primary. #6F505F with #FFFFFF was WCAG AAA compliant, #944171 with #FFFFFF is only WCAG AA. No notification that the color was changed whatsoever!