Material Design is a highly expressive and adaptable Design system built by Google that includes Design guidelines, components and tools to help implement best practices in user interface Design. Material Design is open source and provides a large library of customizable components for a wide variety of styles and branding needs to help your team create high-quality digital experiences across Android, Flutter and the Web.

At I/O 2021, we showcased the bold and expressive evolution of Material Design. Based on the Material Design Primary and Secondary colours, Tertiary colours and additional colour slots are introduced to verify accessibility and ensure harmonious display. 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 application.

If you prefer to see this in video, check it out here.

Dynamic color

Material You redefines color as a more personalized experience through dynamic color matching. So, what is dynamic color matching? Android 12 can use a dynamic color extraction algorithm to select color values. Based on the dynamic color extraction algorithm, you can create a custom color palette based on the user’s desktop wallpaper color. Dynamic light and dark schemes can be incorporated 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 personalized color experiences while respecting implicit brand identity or traditional colors, such as green for “Go” and red for “Stop”.

△ Dynamic color matching can extract the main color of wallpaper

The principle of dynamic color matching

First, it extracts a source color from a user’s wallpaper and extrapolates five key colors, then converts each key color into a palette of 13 hues. Next, it assigns a specific set of roles and values to the colors selected from the palette, and maps these roles and values to components we call “schemes.”

△ Extracting key colors from wallpaper

△ Generate palette from key colors

The color scheme

A color scheme can be thought of as a patchwork of related tones rather than a set of fixed values. Each hue generates a set of light and dark schemes that are changed or adjusted according to preferences and visual needs. The Error color is also automatically assigned to the corresponding color slot. Each color character that the interface needs goes through the process of deriving key colors from the appropriate contrast between elements. These color roles are what you map to in your design.

△ Light and dark color scheme of different colors

You may already be familiar with the current 12 color slots, such as Primary tone and On Primary tone. In Material Design 3 (or M3 for short), we introduced a new palette and personas in our Design solutions that allow you to use Container colors and their corresponding On Container colors for interface elements that don’t need the same emphasis as non-container elements. In addition, the new Tertiary color palette is designed to bring a wider range of color expressiveness to your products.

△ Added Container and Tertiary color slots

Token

Using dynamic color matching means we need to build interfaces with values that change at run time, which requires us to reference colors based on semantics rather than hard-coded values. So how to make this possible? The method is to use tokens. Token provides global style color slots based on Material Design 2 color roles, which can help you change character assignments consistent with color cascades.

▽ Use Token in interface

A Token can have multiple types, and it can pair with a value or reference another Token. After using M3, we had the concept of palette, color reference, and system Token. The color characters you create are system tokens that can inherit the tokens we reference in the palette, including Primary, Secondary, Tertiary, Neutral, Neutral Variant, and Error colors.

Design Tokens allow for greater flexibility and consistency throughout the product, allowing designers to specify color roles for elements in the interface rather than setting a value for implementation. Generating design tokens saves developers and designers time by identifying a single source of facts. For example, a developer can reference a design Token file to map to a topic object in Compose; And if you change the Token in your code, you can share those changes with the designer so that the designer can update the values in their design.

Assign color roles to interface elements using tokens

By using tokens instead of hard-coded values for color and typography, you can iterate over designs more easily. The colors in the hue palette can be mapped to light and dark color schemes by design tokens, while the values of the color scheme can also be rewritten to inherit tokens for custom colors or other color references.

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

You can leverage these color mappings with tokens to transform user-generated colors into dynamic and expressive interfaces. The palette is updated as the system colors change during runtime, along with the color scheme that you map to theme backgrounds and components. It is critical to use the right color rules on the appropriate components to ensure accessibility and continuity of style.

▽ Same Token, different color value

Frictionless access

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

The color combination needs to be based on brightness for accessibility

As you can see in the picture below, when the brightness is close, the color palette is very similar, even though the hues are not the same. This color combination makes contrast too low, especially for people with some degree of color blindness. If such a color combination is applied to components, accessibility will not be satisfied. Therefore, in order to ensure the accessibility of colors at the barrier-free level, all pairs of colors have a brightness difference of 60.

△ Influence of hue and brightness on contrast

Custom extension

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

This may be a new way of thinking about your color scheme. But the digital products we create today reflect real life product trends, which means more personalized colors, patterns and elements. When we need a color palette, if you feel that your color palette is not suitable or lack of available resources, Dynamic color matching can provide you with the user’s favorite, off-the-shelf, accessible color palette.

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

△ M3 base color character

We always encourage you to take advantage of Material Design and extend as needed. The M3’s color system can be combined with custom components and brand styles, enabling accessible color contrast, legibility, interactive state, and component structure by automatically handling key adjustments.

Migrate to Material 3

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

Material Theme Builder

There are some new tokens to watch out for in M3 such as Primary, Secondary, Tertiary Container and On Variants. Managing these colors can be taxing for you, so we created a tool called the Material Theme Builder to generate them for you. You can open it in a web page and click “Custom”, then click “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, where in the Material Theme Builder you can identify and enter one or more brand colors that will be used to define the palette and determine how each palette will be generated by adding specific colors. As shown in the figure below, you can enter the key color of the brand on the left side, and each color will be assigned a corresponding key color role, depending on its use in the interface. If you have an existing application, you can configure the Primary and Secondary colors using the colors in Material 2. You can then click on the export code menu in the upper right and select “Compose” from 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 background files, and after updating the code you can run the application to see the new branded theme background mapped by the component.

Use dynamic color matching

You can use the web tools described above to preview various scenarios based on source color or image generation. Next, we’ll discuss how to update the application based on the colors generated by the user-selected image. Open the Kotlin file theme and add a check to see if you are using dynamic color matching, then you can return the shades scheme colors created by the system palette depending on the conditions.

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 {
       // Use lightColorScheme, darkColorScheme, etc
}
Copy the code

When you add the code above, you can run the application on the device and change the wallpaper, which displays the user-generated color for the theme background. You can add a toggle switch to allow the user to switch between dynamic or custom theme backgrounds, both of which offer a choice of dark and light colors.

You can apply dynamic color schemes selectively and simultaneously with the brand color scheme. For example, a profile or account interface can display an individual’s user colors to personalize important moments; If you have semantic colors, you don’t have to exclude them, but you can include them in the other colors you plan to implement. This means you can use dynamic color matching for your app’s main theme, semantically extended colors, and even brand colors; Or you can use your own rich library of colors.

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

conclusion

With dynamic, branded themes, Material You can reflect the user’s choice of color, helping You build great and expressive applications; Designing tokens also facilitates collaboration between developers and designers. We look forward to seeing the applications you build! For more information about dynamic color matching, use the Material Theme Builder or install the Figma plug-in, which works with the updated M3 design kit. The plugin is available by browsing the Figma community to visualize dynamic color schemes and create custom color schemes.

Please click here to submit your feedback to us, or share your favorite content or questions. Your feedback is very important to us, thank you for your support!