--- url: /styles/color/advanced/adjust-existing-colors.md description: >- Apply, define, or adjust colors to create a fine-tuned, unique color experience --- # Advanced customizations Apply, define, or adjust colors to create a fine-tuned, unique color experience [Overview](overview.md) · [Apply colors](apply-colors.md) · [Define new colors](define-new-colors.md) · **Adjust existing colors** You can control the color algorithm’s output to adjust the appearance of colors within the roles provided by default. ## Define your own baseline scheme You can input colors to define your own baseline scheme. ### Why You may want to define your own baseline scheme so your app’s colors stay static (ie. does not change with dynamic color), such as to reflect your brand colors. By providing your own custom input colors for the primary, secondary, tertiary, and neutral colors in the scheme, Material will provide back the scheme’s regular color roles with values derived from your reference colors. ![Above, a logo of two trees featuring dark green, orange, and pale blue colors. Below, each of those colors is show as a circle, with an arrow pointing from it to a set of chips showing color roles produced from the original color.](/assets/b82e82af-lwt7zkg8-1.Ca3wO-ny.webp) You can input your own colors to produce a static baseline scheme. In this example, colors from the logo are inputted to produce primary, secondary, and tertiary colors. ### How Using 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."), input your own colors for primary, secondary, tertiary, neutral, and neutral variant. The Theme Builder will generate a color scheme with values based on your inputs, and the given color roles can be used in the same manner as those from any other Material scheme. ### Best practices * Conventionally, primary and tertiary colors are the most visually prominent in the scheme, with tertiary appearing complementary to primary by changing its hue. Secondary, neutral variant, and neutral colors match primary in hue but are progressively less chromatic in that order. Input your colors into the appropriate category to maintain similar relationships as designed by Material, and ensure expected and visually pleasing results when those colors are mapped to components. * If the colors provided back from your input color appear differently than expected, you can enable or disable [color fidelity](#cb49eeb4-3bbd-4521-9612-0856c27f91ef). Color fidelity is a feature that adjusts colors’ tones to match that of your input color. * If the 26+ standard color roles do not meet your needs, you may need to [define custom color roles](define-new-colors.md#baed14ce-4be8-46aa-8223-ace5d45af005). ## Define your own dynamic scheme You can define color algorithm rules to produce your own dynamic scheme. ### Why Control the appearance of your app’s colors while respecting dynamic color. For example, you may want your app to match the user’s wallpaper theme, but appear more vibrant than the default dynamic theme colors. ![Thumbnail of a red floral wallpaper with two arrows leading out of it, labeled 1 and 2. Arrow 1 leads to a set of red colors chips produced from the wallpaper. Arrow 2 points to another set of red color chips, which appear more vibrant than the first.](/assets/b066006c-lwt809t2-2.C-zboPTH.webp) You can define your own dynamic scheme to reflect a user's wallpaper but control other aspects such as the colors' vibrancy. 1. Colors produced dynamically from a user's red wallpaper following default specs 2. Colors produced dynamically from the same wallpaper following custom-defined specs ### How * Material generates the color scheme by following hue and chroma values specified for each group of colors (primary, secondary, tertiary, neutral, and neutral variant). For more information, see [how the system works](../system/how-the-system-works.md). To adjust the appearance of these colors and produce your own dynamic scheme, you must provide your own hue and chroma values for each of these color groups. * Once these values are known, you may define your own scheme variant and call [Material Color Utilities (MCU)](https://github.com/material-foundation/material-color-utilities "Material Color Utilities (MCU) are a set of color libraries containing algorithms and utilities that make it easier for you to develop dynamic color themes and schemes in your app.") to dynamically generate the scheme and provide color values for each role in the scheme. ### Best practices * Defining custom color roles should be considered only if you cannot achieve your desired colors with other Material color solutions. * If the colors provided back from your input color appear differently than intended, you can enable or disable [color fidelity](#cb49eeb4-3bbd-4521-9612-0856c27f91ef). Color fidelity is a feature that adjusts colors’ tones to match that of your input color. * If the color roles provided by Material out of the box do not meet your needs, you may need to [define custom color roles](define-new-colors.md#baed14ce-4be8-46aa-8223-ace5d45af005) for greater control over their appearance. ## Use color fidelity You can apply color fidelity to make scheme colors better match your input colors. ### Why Material scheme colors are mapped to tones (lightness or darkness) to achieve visually accessible color pairings with sufficient contrast between foreground and background elements. In some cases, these tones can prevent colors from appearing as intended, such as when a color is too light to appear vibrant. Color fidelity is a feature that adjusts tones in these cases to produce the intended visual results without harming visual contrast.
![Above, a dark purple circle with an arrow labeled 1 pointing to a set of color chips, whose colors appear similarly dark. Below, a dark purple circle with an arrow labeled 2 pointing to a set of color chips, whose colors appear lighter.](/assets/4b33f222-lwt80nic-3.w-gMzZ2N.webp) Color fidelity adjusts tones in color roles to produce the closest match to your input color. In this example, colors are produced from a dark purple input with and without color fidelity. 1. Color roles produced with color fidelity 2. Color roles produced without color fidelity ### How * In 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."), you can toggle the “match color” option on your input color to enable or disable fidelity. By default, fidelity is enabled when you use Theme Builder to [create a custom baseline scheme](#c6810874-a320-4684-8df6-3869887ea49c) or [define static colors](define-new-colors.md#f13116d1-3023-44b9-b0b5-2ee07dc1af5f). * In code, you can flag color roles in your scheme with a boolean which will enable or disable fidelity for those colors. ### Best practices * When producing a custom baseline scheme or defining static colors, you may wish to toggle fidelity on and off to determine which setting better suits your desired design. * Because color fidelity adjusts tones (lightness or darkness of colors), to ensure accessible contrast, remember to pair appropriate [colors roles](../roles.md) together, such as a background color with its corresponding foreground “on” color. ## Harmonize colors In dynamic schemes, you can automatically adjust the hue of static colors so they look better alongside the scheme’s primary color. ### Why [Static colors](../static/baseline.md "Static colors are UI colors that don't change based on the user's wallpaper or in-app content. Once assigned to their respective color roles and UI elements, the colors remain constant.") may visually clash with a  scheme’s dynamically changing colors. To improve visual harmony, Material provides an optional ‘harmonize’ function that slightly adjusts static colors to look better in dynamic schemes. Colors that are closer in [hue](../system/how-the-system-works.md#199a8fa2-6510-4bca-b22a-3387f857a580 "Hue is the perception of a color as red, orange, yellow, green, blue, violet, and so on.") appear more pleasing together than colors with hues farther apart. Based on this principle, harmonization adjusts the hue of static colors, making them closer to the hue of the scheme’s primary color. ![Diagram comparing static colors in an app to harmonized static colors](/assets/5dc0d0f2-lwt814il-4.DulYenRS.webp) 1. In this example, the color scheme has: 1. Green as the primary color 2. Static blue  3. Static orange 2. When harmonized, those static colors change hue, moving closer to the primary color on the color wheel. The resulting colors appear more visually pleasing together because they are closer in hue. To preserve the semantic meaning of static colors (such as a red to communicate errors), harmonization limits the amount that a color’s hue can change. Harmonized colors will become warmer or cooler in hue without appearing like another type of color. ![Diagram showing the limited range of harmonized hues](/assets/6e55405d-lwt81svm-5.xdvYpsbT.webp) To preserve the semantic meaning of colors, harmonization limits the amount that a color’s hue can change. For example, a red color (1) can become cooler (2) or warmer (3) in hue, but will not appear purple or orange. ### How * In 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."), you can toggle harmonization on and off within the overflow menu for each static color you have added to the scheme. * In code, use the ‘Blend’ function from [Material Color Utilities](https://github.com/material-foundation/material-color-utilities) to harmonize colors ### Best practices * Harmonization will adjust a static color differently depending on the scheme’s primary color, so check the results under a variety of schemes to see the range of how they can appear in dynamic color. * Don’t harmonize colors whose appearance should stay absolutely consistent, such as brand colors.