Material You design was launched with the Android 12 release and expanded with Android 13.
This page focuses on updates to the Material You logic to help you integrate with richer dynamic color support.
Dynamic color tonal palettes
Starting with Android 12, the following dynamic color tonal palettes are supported:
Each of them comprise of a set of 13 colors with defined various luminance
values as described at
R.color
,
but with undefined hue and chroma values that can be dynamically generated by
the Android system at runtime.
Theme styles for dynamic color
Starting with Android 13, six different theme styles are supported with variations on the dynamic color algorithm that maintain developer needs and contrast expectations. These are listed for generating the 65 dynamic color used by apps:
TONAL_SPOT
is a mid-vibrancy palette that uses ansystem_accent3_0
color analogous to thesystem_accent1_0
color (carried over from the Android 12 release and slightly adjusted).VIBRANT
is a high-vibrancy palette that harmoniously blends subtle shift between colors.EXPRESSIVE
is a high-vibrancy palette that pairs unexpected and unique accents colors together.SPRITZ
is a low-vibrancy palette that creates a soft wash between colors.RAINBOW
uses both chromatic accents and neutral surfaces to create a more subtle color experience for users.- This is NOT RECOMMENDED to be used with wallpaper-based color extraction and should instead be used with static color themes.
FRUIT_SALAD
provides two tone colors to give users more expression.- This is NOT RECOMMENDED to be used with wallpaper-based color extraction and should instead be used with static color themes.
The system theme is driven by the same setting as it was in Android 12,
which is Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES
. For Android
13, it requires only one key on its JSON that sends the
source color to generate the 65 color palettes:
{
"android.theme.customization.system_palette":"746BC1"
}
The default theme style is TONAL_SPOT
, but you can optionally specify one of
the other theme styles with an additional key with the JSON above:
{
"android.theme.customization.system_palette":"746BC1"
"android.theme.customization.theme_style":"EXPRESSIVE"
}
Integrating dynamic color
For guidelines on integrating dynamic color, see Integrating Material You Design.
Frequently asked questions (FAQs)
What does the dynamic tonal palette API include?
There are five tonal palettes:
Each tonal palette has 13 color values ending in the indexes 0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 1000.
The resulting API is a combination of the tonal palette name, ending in the index. For example:
R.color#system_accent1_10
How is a dynamic tonal pallet generated?
A dynamic tonal palette must be generated from a single source color that should
be derived from wallpaper using
com.android.systemui.monet.ColorScheme#getSeedColors
, which provides multiple
valid source colors. If none of the provided colors meet the source color
requirement, the single source color should use the value 0xFF1B6EF3
.