Dynamic Color on Android from a UI/UX designer point of view

Material You is the latest version of Google’s Material Design language, which introduces a more personalized and dynamic approach to UI design. With its focus on user customization and adaptability, it gives us a new powerful set of tools to create interfaces that are tailored to the needs and preferences of the users.

What is Dynamic Color?

One of the key features of Material You is Dynamic Color, which allows users to create custom color schemes based on their wallpapers. It uses artificial intelligence algorithms to analyze the chosen image and generates a customized color palette that can be used throughout the device’s user interface.

This feature can be used to create a more personalized feel of the product, as the colors can change to create a more dynamic and engaging user experience. Sounds interesting, right? But how to implement it in your own designs?

Here are my tips on how to get started with Dynamic Color, along with an explanation of some of the problems I encountered while working with this system for the very first time.

Before we start

First of all — if you haven’t already — I strongly suggest you take a look at the guidelines provided by Material You. It offers a comprehensive set of principles on how to implement this new feature. Here are some useful links:

• Overview of Dynamic Color for a better understanding of the rules and general idea behind the system;
• Customizing Color Schemes for creating brand expression within the dynamic color schemes.

There is a lot of information to digest, so let’s take a closer look at three, in my opinion, the most important factors to keep in mind.

Tonal palettes & color roles

The very first thing to acknowledge is a new color system. It is based on five main key colors (accent and neutral) that relate to the tonal palette with 13 tones. Tones are generated algorithmically to ensure visual consistency and adaptability across different components and states.

So-called Accent colors are the following:

• Primary color — use it for all the main UI elements that should drive the most attention,
• Secondary color — use it for less important elements, like chips, but notice, that this color is quite similar to the primary; don’t use it as an accent color,
• Tertiary color — use it for accents. It’s bright and varies from the previous two.

Additionally, you have Neutral colors, which are:

• Neutral — for surface roles,
• Neutral Variant — for medium emphasis elements like text, icons, and outlines.

Before even opening the Figma or another design tool take a deep look at the tonal palettes in both themes — light and dark.

Source: Material You

Did you notice? The most prominent color in the light theme is Primary Container. That’s right — if you want to drag attention to your most important primary buttons they need to use this color role. Imagine your FAB button made out of Primary and On Primary. Users will just keep missing them.

All the Primary colors in the light theme will be dark to very dark and rather desaturated. Material You had to define them that way to be able to obtain the accessibility standards.

Here’s a task for you: To explore this change further take a look at their Theme Generator and try to get the bright, vibrant orange as a Primary role. Did you succeed?

Source: Material You

What is worth noticing is that the Primary Container color in the dark mode has completely opposite values. So if you already defined your primary buttons with it in the light theme, you may get quite surprised by how the dark theme will actually look like.

To fix this remember about additional roles, like Fixed accent colors. Use them anywhere instead of the equivalent role to keep needed fixed behavior. More information about additional roles can be found here.

Surface colors & elevation

Another aspect worth noticing is surface colors. In Material Design 3 we build elevation not by using shadows, but by dimming the Surface Container color.

Source: Material You

The higher element in the layout, the darker the Surface Container color is. That is slightly surprising, especially taking into account the dark theme where surface colors work in the opposite ways — the highest the lightest.

Source: Material You

Deciding to design your app for Material Design 3 this is something to be kept in mind from the beginning. Respect these basic rules. Otherwise, you will give your developers and yourself a hard time working on and implementing the design.

…therefore forget about HEX values

As mentioned before, the whole tone palette is generated out of five main key colors. They are defined with very specific hue, saturation and brightness relations to obtain the accessibility standards (3:1, 4:5:1, 7:1).

Enabling users to apply dynamic colors means that you should pay the most of your attention to the color relations rather than exact HEX values. Regardless of the chosen five keys, the roles between components and surfaces should be defined correctly so your design will look great no matter what key colors are applied. I can not stress enough how important it is to understand this statement. If I have to give one final piece of advice for every designer who tries the Dynamic Color for the very first time — this is the one.

One handy tool for simulating the color change in the design is the Material Theme Builder plugin for Figma. How do you use it? Firstly open the plugin, choose your colors and generate the color styles. Use it throughout the design and whenever you need — open it again to change the basic colors and sneak peek at how the design will change with different color picks.

Applying colors to the design

Let’s take a look at the example. Let’s say you want to design an app using two complementary colors. Your pick is vibrant blue and orange. You map colors as you are accustomed to using MD2, play with color variations of your choice and the outcome can look like this:

If as the next step you will decide to adjust this design so it can work under Dynamic Color, the result might be surprising. Your vivid colors are now dark and desaturated, and the final design is pretty far from what you initially designed.

As you see there is really no point in concentrating on specific colors. The most important thing is to map color roles correctly, so your components will look just as you decided no matter the color scheme. It might seem like a limitation but it’s also quite satisfying watching your UI design in so many variations.

Your role is now to check and decide if color relations are proper throughout the app and with different key colors picked. Is a Tertiary as a FAB ok, or should you choose the Tertiary Container to get a more vibrant version of the button? You can use a ready-made component sheet to make your work easier, but only understanding the core rules enable you to design more unique products.

Summary

Dynamic Color is a powerful feature that offers new ways to create beautiful, personalized, and engaging interfaces. With the ability to create custom color schemes, we can create interfaces that feel unique and tailored to the preferences of the users.

It can be challenging at first, but it is worth the effort to understand and try it out within your own designs. By embracing this feature and exploring the new possibilities it offers, we can create interfaces that truly stand out and provide a memorable user experience.

If you want to learn more about good app design practices, read this article.

Originally published at https://fivedottwelve.com on June 14, 2023.