Enrich your app with Material You dynamic color matching

Material Design is Google's expressive and adaptable design system that includes design principles, components, and tools that enable best practices in user interface design. Material Design is open source and provides a large library of customizable components for a variety of styling and branding needs, helping your team create high-quality digital experiences across Android, Flutter, and the web.

At I/O 2021 , we showcased a bold and expressive evolution of Material Design. Based on Material Design Primary and Secondary colors, Material Design 3 introduces Tertiary colors and additional color slots to verify accessibility and ensure display harmony. In this article, we'll show you more about Material You dynamic color matching, including what dynamic color matching is and how to implement it in your app.

If you prefer to see this through video, check it out here:

https://www.bilibili.com/video/BV1qS4y127Px/?aid=725116322&cid=556516164&page=1

△ Enrich your app with Material You dynamic color matching

Dynamic color matching

Material You redefines color into a more personalized experience with dynamic color matching. So, what is dynamic color matching? Android 12 can select color values through a dynamic color matching extraction algorithm. Based on dynamic color matching, you can generate a custom color palette based on the user's desktop wallpaper color. Dynamic light and dark schemes can be implemented throughout the user system interface, as well as in some applications. These schemes will be changed or adjusted according to user preferences and visual needs. Dynamic color matching is an algorithmic system that supports a personalized color experience while respecting colors that embody brand identity or have traditional meanings, such as green for "Go" and red for "Stop".

△ Dynamic color matching can extract the main color of the wallpaper

The principle of dynamic color matching

First, it extracts a source color from the user's wallpaper, infers five key colors, and then converts each key color into a palette of 13 shades. Next, it assigns a specific set of roles and values to the color chosen from the palette, and maps those roles and values to components we call "schemes".

△ Extract key colors from wallpaper

△ Generate palette from key colors

coloring scheme

A color scheme can be thought of as a set of related hues stitched together, rather than a set of fixed values. Each shade generates a set of light and dark schemes that will be changed or adjusted based on preference and visual needs. Error colors are also automatically assigned to the corresponding color slots. Every color role that an interface needs, goes through this process: Derived from key colors through appropriate contrast between elements. These color roles are what you want to map to in your design.

△ Light and dark color schemes of different colors

You may already be familiar with the current 12 color slots, such as the Primary and On Primary shades. In Material Design 3 (or M3 for short), we introduced new color palettes and roles in the design scheme, you can use Container colors and their corresponding On Container colors for interfaces that don't need as much emphasis as non-container elements element. In addition, the new Tertiary color palette is used to bring a wider range of color expression to your products.

△ Added Container and Tertiary color slots

Token

Using dynamic color matching means that we need to build the interface with values that change at runtime, which requires us to refer to colors based on semantics rather than hardcoded values. So how to make this possible? The way is to use Token. Based on Material Design 2 color roles, Token provides a global style color slot, which can help you change role assignments consistent with color cascades.

△ Using Token in the interface

A Token can be of many types, it can be paired with a value or refer to another Token. After using M3, we have three concepts of palette, color reference and system Token. The color roles you create are system tokens, and they can inherit the tokens we referenced in the palette, including Primary, Secondary, Tertiary, Neutral, Neutral Variant, and Error colors.

Designing tokens makes the entire product more flexible and consistent, allowing designers to assign color roles to elements in the interface, rather than setting a value for implementation. It saves developers and designers time by identifying a single source of truth when generating design tokens. For example, developers can reference design token files to map to theme objects in Compose; and if you change tokens in code, you can share those changes with designers so they can update those values in their designs.

△ Use Token to assign color roles to interface elements

You can more easily iterate on your design by using Tokens instead of hard-coded values for color and typography. Colors in the tint palette can be mapped to light and dark color schemes by design tokens, and the value of the color scheme can also be overridden to inherit custom colors or tokens referenced by other colors.

△ Mapping relationship between color value, palette and system color Token

You can take advantage of these colormaps with tokens to turn user-generated colors into dynamic and expressive interfaces. The palette is updated when the system colors change during runtime, as well as the color scheme, which is the color scheme you map to themes and components. It is crucial to use the correct color rules on the corresponding components to ensure accessibility and style continuity.

△ The same Token, different color values

Accessibility

But how do these tokens themselves ensure color accessibility? Since color schemes are defined by hues, not hues or hexadecimal values, in order for any color scheme to be accessible by default, color combinations are based on brightness to meet accessibility criteria .

△ Color combinations need to be based on brightness to meet accessibility

As you can see in the image below, when the brightness is close, the tones of the two colors are very similar, although they are not the same. Such color combinations make contrast too low, especially for people with some degree of color blindness. Applying such a color combination to a component would result in an inability to meet accessibility requirements. Therefore, in order to ensure the accessibility of the color at the barrier-free level, all paired colors have a luminance difference of 60.

△ The effect of hue and brightness on contrast

custom extension

Dynamic color matching makes personal devices more personal. Once you incorporate personalization into your product interface, users will have more control over their devices than ever before. By using dynamic color matching and M3 color schemes, the user wallpaper will be able to affect the color scheme of the app, and your app colors will automatically adapt and integrate with the user's wallpaper color.

This may be a whole new way of thinking about the color scheme of your application. But the digital products we create today mirror real-life product trends, which means more personalized colors, patterns and elements. When we need a set of color palettes, if you feel that your palette is inappropriate or lacks available resources, dynamic color matching can provide you with user-friendly, ready-made, accessible palettes.

We fully understand that you may need your brand's color scheme to be the center of attention, so the latest color scheme can blend into your app's color background while supporting accessibility. You can create harmonious, accessible color palettes using your own branding and design system colors. M3 supports the systematic application of custom parameters, which help you define and maintain your brand. On Android apps, custom color schemes can also be used as a fallback for disabling dynamic color schemes. However, to migrate your Android app to use Material 3, whether using dynamic color or custom color, you first need to migrate to the base color or M3 custom scheme to access the new token.

△ M3 base color role

We always encourage you to take advantage of Material Design and expand as needed. M3's color system can be combined with custom components and branding styles, by automatically handling key adjustments to meet color contrast for accessibility, legibility, interaction state and component structure.

Migrating to Material 3

Next, I'll show you how to migrate your app to Material 3. The first step in the migration is to reference the new token and connect it with the components in the application. The typography, shape and color files for Material 3 are very similar to Material 2, so make sure you get the latest base color or custom branding scheme and set the values.

Material Theme Builder

There are some new Tokens in M3 that need attention, such as Primary, Secondary, Tertiary Container and On Variants series colors. Managing these colors can be overwhelming for you, so we've created a tool called Material Theme Builder to generate these for you. You can open it in a web page and click "Custom", then "Export for Compose".

If you have a custom color, you can add it as an extended color. We can open the tool and switch to the "Custom" tab, in the Material Theme Builder you can identify and enter one or more brand colors that will be used to define the color palette, by adding specific colors to determine each How the palette is generated. As shown in the image below, you can enter your brand's key colors on the left, and each color is assigned a corresponding key color role, depending on its purpose in the interface. If you have an existing application, you can use the colors in Material 2 to configure the Primary and Secondary colors. Then, you can click the export code menu in the upper right corner and select "Compose" in the drop-down list.

△ Custom color scheme

Finally, you can put these files directly into Android Studio and update the package if necessary. This will update the color, typography, and theme files, and once the code is updated, you can run the app to see the new branded theme mapped by the components.

Use dynamic color matching

You can preview various schemes generated based on source colors or images using the web tools described above. Next, we'll discuss how to update the app based on the colors generated by the user-selected image. Please open the Kotlin file theme and add a check to see if you are using dynamic color matching, then you can conditionally return the shades of color created by the system palette.

 val dynamic = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S val colorScheme = if (dynamic) { val context = LocalContext.current if (dark) dynamicLightColorScheme (context) else dynamicDarkColorScheme (context) } else { // 使用lightColorScheme、darkColorScheme 等}

After adding the above code, you can run the app on the device and change the wallpaper, which will display the user-generated color for the theme. You can add a toggle switch to allow users to switch between dynamic or custom themes, both of which are available in dark and light options.

You can selectively apply dynamic color schemes, which take effect at the same time as your branding color scheme. For example, a profile or account interface can showcase individual user colors to personalize important moments; if you have semantic colors, you don't have to exclude them, you can include them in other colors you're ready to implement . This means you can use dynamic color schemes for your app's main theme, semantically extended colors, or even brand colors; or you can use your own rich color library.

△ The color scheme changes with the wallpaper set by the user

Epilogue

With dynamic, branded themes, Material You can reflect the user's choice of colors, helping you build outstanding and expressive applications; at the same time, design tokens also help developers and designers collaborate. We look forward to seeing the apps you build! For more information on dynamic color matching, use the Material Theme Builder or install the Figma plugin , which works with the updated M3 Design Toolkit. This plugin is available by browsing the Figma community to visualize dynamic color schemes and create custom color schemes.

You are welcome to click here to submit feedback to us, or to share what you like and problems you find. Your feedback is very important to us, thank you for your support!