Branding challange when creating themes

[razfazz]

I wanted to share my experience using this package and also the standard Flutter practises to generate impressive themes based on a primary color.
However, I've encountered some challenges when trying to ensure an exact match between the created color palette and the base color, particularly with softer shades.

In my specific use case, it's crucial to preserve the Brand Color and minimize any distortion while generating the palette.

I've already experimented with the colorSchemeSeed provided by official Flutter and explored the functions offered by the FlexThemeData package.

Regrettably, I haven't achieved the desired results yet.

The following web demo closely matches the requirements for ensuring consistent corporate colors, whether it's for me or for someone else with similar needs.

https://mcg.mbitson.com/#!?mcgpalette0=%233f51b5

A way to achieve this goal also with this package would be great

[rydmike]

Hi @razfazz, thanks for your question 😃

The palette you are linking too is using the older Material 2 Color System and Material Color Palette that was in use in Material 2.

Google never published the exact algorithm for creating those color palettes. Some libraries exist(ed) in JS that were reverse engineered from the web site. But I never found any Dart ports of it. There is a variant of it included in the color picker in the app, that makes a "fake" Material Color palette swatch, but it is not an exact match, far from it.

That color system is also effectively obsolete. You should instead migrate to using the new color system based on the new Google Color Space HCT (Hue Chroma Tone) that uses tonal palettes instead. The tonal palettes are different from past Material Color palettes. Read more about it here: https://m3.material.io/styles/color/the-color-system/key-colors-tones

If you really want to use colors from those older Material 2 Color palettes, you can use the customizable color scheme in the Playground and copy/paste the shades you want to use from the palettes you have, to primary, primaryContainer, secondary, secondaryContainer, tertiary and tertiaryContainer colors. Select e.g. Jolly Seed method, and use all tree colors as seed colors and also lock down all the colors you added custom value for, to still keep them exactly as given in the seeded result, but calculating other colors that are not as critical.

Here is a tweet story that shows some Playground techniques that amy be helpful: https://twitter.com/RydMike/status/1658657667622248449?s=20

In code you can alternatively make a custom ColorScheme using colors, from the palette you showed, and other sources as desired, and then passing in an entire premade ColorScheme to FlexColorScheme/FlexThemeData. With the API you can do this, but not in the Playground.

[rydmike]

This is good question though and we can continue it in discussions, if you need further info and some examples on how to do what I described above, using a few example colors from the Material Palette you linked.

As for ever getting the algo used to produce exactly those older Material palettes programmatically in Dart, that ship has sailed. I did spend quite some time looking for it before, and consider porting one of the JS ports over. I think I even found a Java or Kotlin reversed engineered version of it at some point, I probably have the links stored somewhere still. But since Google is moving full tilt to the HCT color system and since that algo is public, I'm not going to put any more effort into the older palettes. Besides, the HCT tonal palettes are fabulous, better than the older ones.

[zogol]

I have the same problem and would love to have an option to generate a "as close as possible branding color palette"

[rydmike]

Thanks for the question @zogol.

You can actually already do this. The Tweet thread already shows it https://twitter.com/RydMike/status/1658657667622248449?s=20

It can be hard to follow, so here is another explanation of how to do it as a written example.

Using Brand Color in FlexColorScheme with Generated Palettes

TLDR

The way you do this is to first define custom colors for primary, secondary and tertiary, to use your brand colors. Then enable seed generated color scheme, and use primary, secondary and tertiary as key colors for the seed generation. Next lock down the key colors. Done.

Two Brand Colors

The example in the Tweet used three fictive brand colors, but what if you only have two or maybe even one? Then what? Let's look at that as two additional examples.

If you only have two brand colors, I recommend using primary and tertiary for them and only using them as seed key colors in the seed generation.

NOTE: Due to how Material3 color system works, prefer using tertiary color as the secondary brand color. This is extra important if it is very different in hue from the main brand color. Main brand color should always be used as primary. If you have a third important brand color, use the one that is closer in hue to the primary main brand color as the secondary color.

The secondary and especially tertiary colors in the ColorScheme are not used by default as colors on M3 widgets a lot (tertiary hardly at all), but you can remap that as desired and as fitting with your design goals. You can do this mapping in the Themes Playground on widget/component level.

Here say we have "Gulf Blue" (0xFF081B5B) and "Outrageous Orange" (0xFFF86541) as our two brand colors. I specify only them (also in dark mode) as input colors. The other colors in the custom theme is just what happened to be there in the customizable theme when I started:

The ColorScheme for this would be like this (in my starting case) and it is not what we want:

To generate the palette for the used brand colors, head over to Seeded ColorScheme and use Primary and Tertiary as seed keys to make the tonal palettes using the new Google M3 HCT color space (Hue Chroma Tone), for the palette generation:

For everything except the primary palette, the default M3 tonal palette generation algorithm produces pretty dull colors.

With FlexColorScheme, and via Themes Playground, you can choose a different tonal palette generation strategy to get more colorful or even less colorful palettes, some of them also use different mapping of tones to ColorScheme colors too.

NOTE: With the FlexColorScheme API you can make you own palette generation and ColorScheme mapping config, and you are not limited to what is offered in the Playground.

Choose an option that fits you desired palette, concerning chromacity (colorfulness) of generated palettes. Here I went with "Jolly" and the generated palettes for primary, secondary and tertiary colors are now more colorful:

But as you can see, our brand colors are not used as primary and tertiary colors in the produced ColorScheme.

This is the way the M3 HCT color space palette generation algorithm works, there is no guarantee that the seed color ends up in the produced palettes, but it always produces a palette that is nice fit with the used input seed color.

To get your brand colors in there, all you have to do is flip two switches to "lock" down the used input seed colors as the actual used colors for the output ColorScheme colors, basically it is just a copyWith override.

Now we have both a light and dark theme (I had set dark seed input colors to same colors as light) ColorScheme ready to go:

Generated Dark Theme

The generated dark theme color might not automatically be what you or the customer likes. In this case we got:

Advanced Dark Mode Tuning

Often brands do not have specified colors that work well as "main" colors in a dark theme. There are important contrast constraints that must be fulfilled for the colors to work well in dark mode.

If you or the customer have brand colors for dark mode, you can use them as custom input seed colors for dark scheme too. If they are very different in hue from light scheme you should, but if they only differ in chroma and tone, consider still using the light mode colors for seeding and only locking down the specific dark brand color.

In this case say we do not have specific brand colors that would be usable as brand colors for dark mode. We can still sprinkle in the brand colors used in light mode into the dark ColorScheme colors. We ca do so on colors that by design have seed generated colors that are similar in brightness.

For example, above we could e.g. put our light mode main brand colors on primaryContainer and on tertiaryContainer that have similar brightness and hue. If we think the main dark tertiary is still also a bit dull, we can try to add some more pop to it by hand tuning it, while still keeping its on color requirement as dark. Here is an example all of this:

When we use hard defined input color, FlexColorScheme cannot know what the right "color" expressive onColor for it is, so it makes default white/black on contrast colors as in M2.

We have two options, we can make all onColors use just black and white, for a more classic M2 onColor and more contrasty style:

Or, we can use surface blends to give a hint of their main color (keep above switches off then) to their onColors, so they fit better. You can do that in Surface blends:

Currently the surface blend Contrast colors blend level option control is only enabled when seeding is OFF. To use it you have to temporarily disable seeding (just one toggle "primary") and set Contrast colors blend level to e.g. 25 and also enable Main colors use onColor blending then toggle seeding back. The onColor blending will still by used by none seeded onColors.

In next release I'm going to remove that these controls are disabled in the Playground when using seeded color scheme and having some colors locked down to input values, since the control does have an impact on such colors. The API behind it is by design that way, to enable a way to bring back M3 like color expressiveness into custom onColor with specifying them. Using just black and white as contrast colors is imo still often fine too.

Now if we go back and look at the dark mode ColorScheme we have some M3 like color in the onColors for the colors we had specified as "fixed" dark input too.

They are not an exact match for what M3 tonals would be. Maybe in a future version I will add an option to automatically use M3 tones as contrast onColors for custom input colors. It is doable, I in fact just thought of how it can be done, did not consider it before, lol.

Just One Brand Color?

If you have just one brand color, let's say it is the "Gulf Blue" (0xFF081B5B) from the above two color example. And now you want to generate a palettes and ColorScheme for that case, how do you do that?

You might think, ok sure, let's just disable seeding from from tertiary. If you do, you will find that all the default M3 seeding strategies use the Hue from input primary key color and rotate it 60 degrees to make the palette for the tertiary color, when no key is given, so now you get a new none "primary" brand color related hue as color on tertiary palette and its ColorScheme colors:

This is probably not what we want for a "One brand color" theme. How can we fix this?

Two options, set the same color as input on Tertiary and seed with tertiary key as well, or use the One hue seed strategy and only use primary as key. The latter one is simpler, let's look at it first

One Hue

Just select the One hue seeding strategy and only use primary color as key. As locked color I only have primary in light mode, and in dark mode I only used/kept the lock on manually input primaryContainer color. We not get:

A one brand color related theme, with our single brand color used as main color in light mode and in the mix in dark mode too.

Same Key Input on Tertiary

The above version is simple, but it only allows you to use the specific tonal palette generation strategy used by the One hue config. If you prefer another strategy you can also use them, but then you need to specify same key color input for the tertiary color as you used for primary.

Then as before, also tertiary input color as key input in seeding and now you can use any of the palette generation choices, without hue rotation and instead using same single brand color as input for palette generation for tertiary color as well.

You can do the same for secondary, but it is not needed, the palette generation startegies all use the primary key color's hue as input if it is not specified. They only vary the amount of chroma used from the input, and some strategies also change ColorScheme tone mapping a bit.

Surface Blends

If you want to be even more expressive in blend colors on surfaces and backgrounds, or want even darker themes in dark mode than M3 gives you. Well then FlexColorScheme has you covered there too.

With FlexColorScheme you can still also use the surface color blending it already provided for Material 2 themes. Those surface colorings are based on alpha blends and using different blend strengths on different backgrounds and surface types. This blending can be combined and added to the in M3 mode produced neutral color palette results, from where the colors to all different ColorScheme surface and backgrounds colors are picked. Some examples.

Light mode surface blends

Starting from the above last scheme, this one:

and doing eg this:

We get much more blends in surfaces, sometimes this is used on desktop mode web designs. In this case the Scaffold background is so colored that you would typically only use it for effect and place controls in surface colored Card like containers.

Dark mode surface blends

Dark mode has its own controls for this, so here we start from this:

To this, where scaffold background should not hold widget directly but is only used as an effect color:

Some prefer the reverse effect in dark mode, where scaffold background remain dark, and background container and cards (surface) get more primary tint.

Dark mode true black

You may then also like the "True black" variant where Scaffold background remains totally black and other surfaces are also kept much darker:

Surfaces Gone Wild

Nobody said you have to use "primary" color as the blend color and input to generate the neutral M3 palettes for all the surface colors, it can be any color... 😄

Screen.Recording.2023-05-26.at.15.21.25.mov

Some subtle other combinations actually work and may create very unique and cool looks, but don't make it too crazy.

[razfazz]

What a detailed and in-depth answer! Thank you very much!

[zogol]

wow thank you for that detailed explanation. I will try that asap