---
url: /styles/color/dynamic/user-generated-source.md
description: >-
Dynamic color can change a color palette to match user settings, like
wallpapers, or in-product content
---
# Dynamic color schemes
Dynamic color can change a color palette to match user settings, like wallpapers, or in-product content
[Choosing a source](choosing-a-source.md) · **User-generated source** · [Content-based source](content-based-source.md)
**User-generated color** comes from an Android user's personal wallpaper. The wallpaper is digitally analyzed, a single color is selected as the source color, and tones are chosen and assigned to each color role.
**With a dynamic user-generated color scheme, end-users see**
* Their apps and system UI change to a color pulled from their device wallpaper
* A product that looks personalized
Dynamic color in a work app
Dynamic color in a work app
Dynamic color in a work app
## Design with user-generated color
Because the final colors will be dynamically generated on each user's personal device, **it's more important to understand and apply the system's [color roles](../roles.md "Color roles are assigned to UI elements based on emphasis, container type, and relationship with other elements. This ensures proper contrast and usage in any color scheme.") in your designs** rather than use a particular hex value.
The easiest way to do this is by using a color scheme generated by the [Material Theme Builder](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder "Material Theme Builder (MTB) is a Figma plugin that allows markers to emulate the color extraction process for dynamic color and create custom tonal schemes.") and focus on applying the color roles to your designs instead of particular hex values. Then you can use the Material Theme Builder to test how well the design functions across potential user-generated color options.
### Use Material color roles in new design files
**First, get the color roles by creating a new theme with the Material Theme Builder**
1. Open your Figma file. Select the **Resources** button in the Figma toolbar
2. Find the [Material Theme Builder plugin](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder) and select **Run**. This will open a plugin dialog showing the default color scheme, including Core colors and Extended colors.
3. Open the plugin's **Settings** (gear icon at lower right of dialog) and select the checkboxes for both **New theme color diagram** and **Generate State Layers**. This will create a handy visualization of your branded color scheme and also generate state layers essential for designing interactions. [Learn more about state layers](../../../foundations/interaction/states/state-layers.md)
4. Navigate out of settings
5. Open the Current Theme dropdown at the top of the dialog and select **+ ADD NEW THEME**
6. Give your theme a short name (this name will become the prefix of your color roles in Figma)
7. Select **ADD THEME**
8. With **Custom** selected, select **Primary**. This opens a dialog prompting you to select a custom source color.
9. Enter the Hex value for a color and hit **Apply**. This will generate a full color scheme.
10. With the Current Theme dropdown at the top of the dialog, select your theme
11. Select the frames or components in your file and then hit **Swap** in the bottom right of the dialog. This will automatically update the colors for any M3 Design Kit components.
### Apply color roles to an existing file or M3 Design Kit components
**First, get the color roles into your file**
1. Copy your preferred scheme's color diagram from your [Material Theme Builder](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder) file and paste it into your file (this makes the color roles available in the Design panel on the right of the screen as part of your local styles)
**Swap colors in M3 Design Kit components for your preferred colors**
1. Select the **Resources** button in the Figma toolbar.
2. Find the [Material Theme Builder plugin](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder) and select **Run**. This will open a plugin dialog showing the default color scheme, including Core colors and Extended colors.
3. In the Current Theme dropdown at the top of the dialog, select your color scheme
4. Select the frames or M3 Design Kit components in your file that need a color update and then hit **Swap** in the bottom right of the dialog. This will automatically update their colors from baseline colors to your selected scheme colors
**Then, update any remaining non-color-role-based colors**
1. Manually change any hex values or non-color-role-based color styles by selecting all and looking through the Selection colors in the Design panel on the right of the screen
2. Any colors that don't start with your selected scheme name need to be replaced with a corresponding color role
3. Hover on a non-color-role-based color row in the Design panel and select the **Style** icon (four dots). This opens a selection dialog.
4. Search for your scheme name to see the color roles
5. Select the color-role-based color that most closely matches that color's use case (see [Color roles](../roles.md) for more information on what color to use where) and select **Use style** to apply it to the selected objects
6. Repeat until all non-color-role-based colors in the file have been replaced with color roles
### Try out how your designs will look with dynamic color
1. Select the **Resources** button in the Figma toolbar.
2. Find the [Material Theme Builder plugin](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder) and select **Run**. This will open a plugin dialog showing the default color scheme, including Core colors and Extended colors.
3. Select Dynamic
4. Add an image, or select the **Shuffle** icon to get a random source color
5. Select the frames or components in your file that you want to see with dynamic color and then hit **Swap** in the bottom right of the dialog. This will automatically update their colors to the user-generated dynamic colors.
6. Repeat with a range of colors to get a sense of how your product will appear across different users' devices
**Need to make adjustments to the scheme? Check out [Advanced customizations](../advanced/overview.md)**
## Develop with user-generated color
* [Android Views (MDC-Android) – Color docs](https://github.com/material-components/material-components-android/blob/master/docs/theming/Color.md)