Material You interface and dynamic colors based on your background

  • Material You introduces a dynamic color system that generates complete palettes from a source color extracted from the background, the app, or the brand.
  • The algorithm creates five tonal palettes with 65 colors in total, which are assigned to interface roles ensuring accessibility and consistency in light and dark modes.
  • Designers and brands maintain control through custom themes, design tokens, and tools like Material Theme Builder to combine brand identity and personalization.
  • Support has been extended to multiple manufacturers and Android skins, along with improvements to motion, widgets, and dynamic icons for a unified experience.

Material You interface and dynamic colors based on your background

Android has been committed to Material Design for years, but with Material You it has taken a significant leap towards deep customization based on your wallpapersIt's no longer just about changing a few icons or switching to a dark theme, but about the entire system intelligently adapting to the colors you choose, while maintaining accessibility and a consistent design.

This new design philosophy, present since Android 12 and expanded in Android 13, it combines dynamic colors, fluid movement, and revamped widgetsThe result is a visual experience that feels more human and emotional, but at the same time respects the work of designers, developers, and brands that need to keep their visual identity under control.

What is Material You or Material Design 3?

Material You, also known as Material design 3It's the latest evolution of Google's design system for UX/UI interfaces. It's not just a visual style, but a set of guides, components and algorithms that allow building consistent interfaces on mobile phones, tablets, watches and other Android devices.

Unlike previous versions of Material Design, Material You focuses on the personal expression and adaptation to the userThe idea is that two people with the same mobile phone can have a very different interface, but that both remain usable, accessible and consistent with the Android ecosystem.

Aesthetically, this iteration opts for an approach more minimalist and softFewer harsh shadows, fewer different typographic styles, more rounded shapes, and a cleaner look. All of this is combined with a much more sophisticated color system, capable of generating entire palettes from a single source color.

What's interesting is that Material You isn't limited to the Google PixelDynamic color logic and design guidelines have been extended to many layers of customization such as One UI, OxygenOS, ColorOS, OriginOS or MIUI, with specific support from Google to ensure a consistent experience across most devices running Android 12 and later.

How to create wallpapers with AI on Android
Related article:
How to generate your own AI wallpapers for Android

Emotion, individuality and paradigm shift

Material You also stems from a reflection on how we understand digital design. Google argues that the interface should not only respond to function, but also to... user's feeling, their emotionHence the play on words in “Material You”: the device should be as unique as you, not an identical clone of millions of people.

For years, both iOS and Android have been relatively rigid in terms of real UI customizationBeyond changing the background, adding a widget, or installing a launcher, the options were limited. With Android 12 and Material You, Google partially recaptures the spirit of its old slogan, "Be together, not the same," by focusing on a common ecosystem but with interfaces tailored to each user.

This philosophy contrasts with Apple's strategy, which is more focused on a closed and highly controlled ecosystem where the visual experience varies little between users. Google, on the other hand, allows for much finer customization of the appearance without compromising that the apps function equally well on different brands and models.

Main new features of Material You

Material You introduces several lines of innovation that intertwine to build the complete experience: deep customization, dynamic colors, adaptability, and meaningful movementAll of this is supported by a robust technical system that can be used by manufacturers, designers, and developers alike.

Deep interface customization

One of the biggest changes is that the user can adjust the system's appearance to a much finer degree. Android is capable of rearrange colors, surfaces, buttons, and controls so that they match the palette generated from the wallpaper or a manually chosen color.

This customization extends to status bars, notifications, menus, quick panel, settings, Google's own apps, and, progressively, to third-party apps that integrate Material Design 3. The idea is for the user to perceive a end-to-end consistent visual experience, without abrupt color jumps between the system and the applications.

Adaptability to screens and form factors

Material You also reinforces the adaptability of interfaces to different screen formatsThis includes traditional mobile phones, tablets, smartwatches, and foldable devices. The same logic of color, typography, and spacing is adjusted to ensure the interface is comfortable to use in every context.

In the case of foldable phones, Google has defined specific guidelines on aspects such as reachability of elements, the central hinge, and the most complex layoutsFor example, the top 25% of the open screen is considered difficult to reach, so it is recommended not to place primary actions there, and crucial information should not be placed directly above the hinge.

Movement and tactile feedback

The movement in Material You isn't just for show. Android 12 introduces an effect of Excessive displacement based on elastic stretchingWhen the user tries to scroll past the end of a list, the surface stretches smoothly instead of displaying the typical old-fashioned bounce brightness.

In addition, the ripple animations on tap have been redesigned to offer a more subtle and fluid haptic feedbackGoogle encourages manufacturers to keep these behaviors as close to the standard as possible, so that apps behave predictably regardless of the customization layer.

Dynamic colors: the heart of Material You

Material You interface and dynamic colors based on your background

The key element of this new stage is the dynamic color system, known internally as MonetStarting with Android 12, the system can extract a dominant color from your wallpaper or a defined base color and automatically generate a complete palette that is applied to the system and compatible apps.

This system relies on a fairly sophisticated technical approach that combines color space CAM16, tonal palettes and color rolesThe goal is to maintain good readability, sufficient contrast, and a polished aesthetic in both light and dark modes, even if the user chooses somewhat complex wallpapers.

How palette generation works in Material You

El creation process The use of dynamic colors can be summarized in several well-defined steps, although there is a lot of color mathematics underneath:

  • Extraction of a seed color based on the wallpaper, app content, or a fixed color chosen by the user or brand.
  • Conversion and analysis in the CAM16 space to obtain tone, chroma, and other perceptual parameters.
  • Generation of five key tonal palettes (accent1, accent2, accent3, neutral1 and neutral2) from the source color and adjustments in chroma and tone.
  • Creation of 13 shades per palette, with different levels of luminance (0, 10, 50, 100, 200, 300… up to 1000), resulting in a total of 65 dynamic colors.
  • Mapping those tones to UI color roles, such as primary, secondary, surface, background, text, containers, etc.
How to test Android 16 before everyone else
Related article:
Android 16 and Material 3 Expressive: the visual rebirth that redefines the mobile experience

Each of the five palettes has a specific behavior: for example, accent1 is usually the main color of the brand or the user's theme, accent2 and accent3 serve as complementary accents, and neutral1/neutral2 are reserved for backgrounds, surfaces and less conspicuous elements.

Theme styles in Android 13

With Android 13 the system takes another step and allows you to choose between six different theme styleswhich vary how that original color is interpreted to generate the final palette:

  • TONAL_SPOT: is the default theme of Material You, with a medium vibration and a balanced treatment of accents.
  • VIBRANT: opt for a more intense palette but with smooth transitions between colors, ideal for more eye-catching interfaces.
  • EXPRESSIVE: generates more unexpected and unique accent color combinations, with high chromatic intensity.
  • SPRITZ: reduces saturation to a minimum, seeking an almost monochromatic and very soft effect.
  • RAINBOW: mixes colorful accents with neutral surfaces to offer a more discreet result, recommended for static schemes rather than extraction from backgrounds.
  • FRUIT SALAD: combines two-tone colors to give more expressiveness, also more suitable for fixed palettes than for dynamic backgrounds.

The system takes a JSON stored in Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES where the source color is specified (for example, "746BC1") and, optionally, the theme style (for example, "EXPRESSIVE"). With that, Android automatically generates the 65 color variations that the apps will then use.

Where do the base colors come from?

Material You considers three main paths to obtain the original color which will serve as the starting point for the algorithm:

  • From the user's wallpaperThis is the most common case. The system analyzes the image using color quantization, extracts several candidates, and selects one that meets minimum chroma criteria (for example, a CAM16 value ≥ 5) to ensure that the result is not too dull.
  • From the content of the app or websiteThe application itself can decide that the main color of the interface is derived from its content, thus maintaining a vibrant aesthetic but aligned with the product.
  • From a manually selected colorThe brand or user selects a specific color, and the system builds the entire palette from it, without needing to depend on the background.

In all cases, the goal is for the single input color to become a complete, accessible, and consistent color schemeavoiding combinations that hinder reading or break the sense of visual unity.

Control for brands, designers, and developers

A logical question for anyone working in digital product design is whether this dynamic system "overrides" brand designs. After all, you spend hours fine-tuning your design system only to have it later Android changes colors based on the user's wallpaper.

The answer is that Material You offers a reasonable balance: as a designer or developer You don't lose control, because you can decide to what extent you want to adopt the dynamic colors.The system is designed to be flexible, not to override the identity of each product.

Custom themes and brand schemes

Material Design 3 incorporates the idea of custom or branded schemesThese colors are not derived from the user's wallpaper, but from colors defined by the application itself. Using tools such as Material Theme Builder In Figma, you can input your brand colors (primary, secondary, tertiary, neutrals) and let the system generate a complete scheme aligned with M3.

These custom themes configure the required colored tokens and allow your app to:

  • It should look consistent with the rest of the Material You ecosystem.
  • Maintain proper accessibility in both light and dark modes.
  • Facilitate future combination with dynamic system colors if you choose to do so.

Also, you can combine brand colors with dynamic colorsThe core scheme can inherit some of the user's customization, while an extended set of colors (e.g., for very specific semantic states or brand accents) remains static.

Design tokens and color roles

Material You strongly promotes the use of design tokensThat is, semantic names that replace direct values ​​like hexadecimal codes. Instead of using "#6200EE" alone, tokens are used, such as colorPrimary, onSurface, primaryContainer, etc.

These tokens connect with the dynamic tonal palettes (system_accent1_600, system_neutral1_10, etc.) so that the app can update its appearance without rewriting all the code. The Design Kit and the Figma plugin generate these tokens and map them to styles within the design files, making the transfer to development much more straightforward.

Visual hierarchy and accessibility

When applying color roles to your UI, it remains key to respect the hierarchy of importanceThe most saturated colors should be reserved for calls to action and priority elements; neutrals and softer variations are reserved for backgrounds and secondary content.

Material You guarantees that, based on the colors you provide, the system will generate variations with appropriate contrasts for text and iconsin both light and dark modes. Even so, it is recommended to test the combinations in real-world contexts, especially if you introduce very vibrant secondary or tertiary colors that might compete with the primary color.

Dynamic color in the Android ecosystem

Initially, the dynamic color system wasn't part of AOSP, which raised doubts about whether it would be exclusive to Pixel phones. Over time, Google has been integrating palette extraction and generation logic in Android 12 and 13offering patches and documentation to help OEMs adopt it consistently.

Brands like Samsung, OnePlus, Oppo, Vivo, realme or Xiaomi They have already announced support for dynamic colors in their Android 12+ based layers, so that apps like Gmail can adjust their appearance while respecting the same palette on different devices.

Requirements for manufacturers (OEM)

To offer a alignment with Material YouAndroid partners must:

  • Leverage the same color extraction logic as AOSP to obtain the original color of the wallpaper.
  • Expand that color in the 65 APIs of color official (accent and neutral palettes with 13 shades each).
  • Apply these palettes both in the system UI as in its own appsso that third-party developers have consistent behavior.
  • To provide an experience of theme and wallpaper selector where the user can view and choose color combinations based on the background or basic colors.

Furthermore, if a device does not support background color extraction (due to technical limitations or design decisions), an alternative option can be chosen. static palette, default Material type, maintaining a certain visual coherence even though the dynamic part is lost.

Wallpapers, ThemePicker and static palettes

The standard dynamic color flow starts from wallpaper or theme selectorWhen the user changes the background or chooses a set of colors, the system:

  1. Calculate the dominant background colors (or read the chosen base color).
  2. Filter those colors based on their chroma and other rules to select a valid one.
  3. Generate the five tonal palettes and fill the 65 color APIs.
  4. Update the system UI and expose those colors for apps to use.

For fixed basic colors, manufacturers can define Stub APK with arrays of colors and descriptive names (for example, Blue, Red, Yellow, Green), which appear in the selector as predefined options. Each entry includes primary and secondary values ​​that the system will use as a starting point for the tonal palettes.

Tools for designers: Material Theme Builder and Design Kits

To facilitate the adoption of Material You in the design world, Google has created several specific tools, primarily focused on Figma. The most important is the Material Theme Builder pluginwhich allows you to generate dynamic and branded color schemes without having to wrestle with the mathematics of color.

With this tool you can:

  • load a reference topic or create one from scratch.
  • Define key colors (primary, secondary, tertiary, neutral) and see how they spread throughout the UI.
  • Apply the generated schemes to Material Design kit components included in the Figma file.
  • Extend the scheme with additional custom colors (Custom0, Custom1…) for specific branding or semantic needs.

The plugin automatically generates Figma styles that act as color tokens, and these are link to the modelsIn this way, changing the theme (for example, from a neutral one to a branded one) consists practically of pressing a button and assigning the new set of styles.

Beyond mobile: widgets, icons and launchers

The impact of Material You doesn't stop at system apps. Android 12 widgets They have been updated to respect the new APIs for size, rounded corners, and color, and developers are encouraged to update their own widgets to take advantage of these capabilities.

On the other hand, the launcher and icon pack community has also taken note. There are dynamic icon packs that They change color depending on the wallpaper or system accent.and they adapt to both light and dark modes. To make them work, you need to use compatible launchers (Nova Launcher, Lawnchair, Hyperion, Niagara, Smart Launcher, etc.) and, after changing the background or theme, reapply the icon pack to regenerate the palette.

What is Google Material 3 Expressive?
Related article:
Material 3 Expressive: A visual and personal revolution in the Google experience

Material You has transformed Android into a platform where color and form intelligently adapt to each user, without leaving designers, brands, or developers behind. Thanks to the system of dynamic colors, tonal palettes, and design tokensIt's possible to have a highly personalized yet coherent, accessible, and technically predictable interface. Whether you use a Pixel, a Samsung, or a Xiaomi, the idea is for your phone to reflect your personality, while still functioning and looking as millions of people across the Android ecosystem expect. Share the information so that more users can learn about the topic.