Material 3 Color Generator

Select a color palette for your app and generate code to import the colors.

1) Select Key Colors

Select the 4 key colors for your app. For each key color, a tonal palette is generated, comprising of similar colors of a different tone. These colors are then used to generate a color palette based on the Material Design 3 guidelines.

Primary

Secondary

Tertiary

Error

Obtain main color from

Selected Color

2) Preview & Modify Colors

Preview and fine-tune the color palette before exporting.

Light

Dark

Primary

#6750A4

On Primary

#FFFFFF

Primary Container

#CBC0E6

On Primary Container

#201933

Secondary

#625B71

On Secondary

#FFFFFF

Secondary Container

#DCD8E6

On Secondary Container

#2C2933

Tertiary

#7D5260

On Tertiary

#FFFFFF

Tertiary Container

#E6CDD5

On Tertiary Container

#332227

Error

#B3261E

On Error

#FFFFFF

Error Container

#E6ACA9

On Error Container

#330B09

Background

#FFFBFE

On Background

#1C1B1F

Surface

#FFFBFE

On Surface

#1C1B1F

Surface Variant

#E7E0EC

On Surface Variant

#49454E

Outline

#79747E

Components Preview

Filled Button

Outlined Button

Filled Button

Outlined Button

Chip

Add New

Filled Button

Outlined Button

Error!

Surface

Outlined Button

3) Export to Code

Select the platform which you are building for and copy and paste the code below into the specified files.

XML

Compose

Flutter

CSS

Manual

Step #1: Replace colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#6750A4</color>
    <color name="onPrimary">#FFFFFF</color>
    <color name="primaryContainer">#CBC0E6</color>
    <color name="onPrimaryContainer">#201933</color>
    <color name="secondary">#625B71</color>
    <color name="onSecondary">#FFFFFF</color>
    <color name="secondaryContainer">#DCD8E6</color>
    <color name="onSecondaryContainer">#2C2933</color>
    <color name="tertiary">#7D5260</color>
    <color name="onTertiary">#FFFFFF</color>
    <color name="tertiaryContainer">#E6CDD5</color>
    <color name="onTertiaryContainer">#332227</color>
    <color name="error">#B3261E</color>
    <color name="onError">#FFFFFF</color>
    <color name="errorContainer">#E6ACA9</color>
    <color name="onErrorContainer">#330B09</color>
    <color name="background">#FFFBFE</color>
    <color name="onBackground">#1C1B1F</color>
    <color name="surface">#FFFBFE</color>
    <color name="onSurface">#1C1B1F</color>
    <color name="surfaceVariant">#E7E0EC</color>
    <color name="onSurfaceVariant">#49454E</color>
    <color name="outline">#79747E</color>
</resources>

Step #2: Replace colors.xml (Night)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#C0B1E6</color>
    <color name="onPrimary">#30254C</color>
    <color name="primaryContainer">#403266</color>
    <color name="onPrimaryContainer">#CBC0E6</color>
    <color name="secondary">#D8D2E6</color>
    <color name="onSecondary">#433E4C</color>
    <color name="secondaryContainer">#595366</color>
    <color name="onSecondaryContainer">#DCD8E6</color>
    <color name="tertiary">#E6C3CE</color>
    <color name="onTertiary">#4C323B</color>
    <color name="tertiaryContainer">#66434F</color>
    <color name="onTertiaryContainer">#E6CDD5</color>
    <color name="error">#E69490</color>
    <color name="onError">#4C100D</color>
    <color name="errorContainer">#661511</color>
    <color name="onErrorContainer">#E6ACA9</color>
    <color name="background">#1C1B1E</color>
    <color name="onBackground">#E6E1E5</color>
    <color name="surface">#1C1B1E</color>
    <color name="onSurface">#E6E1E5</color>
    <color name="surfaceVariant">#49454F</color>
    <color name="onSurfaceVariant">#CAC4CF</color>
    <color name="outline">#948F99</color>
</resources>

Step #3: Add to theme in themes.xml

<item name="colorPrimary">@color/primary</item>
<item name="colorOnPrimary">@color/onPrimary</item>
<item name="colorPrimaryContainer">@color/primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/onPrimaryContainer</item>
<item name="colorSecondary">@color/secondary</item>
<item name="colorOnSecondary">@color/onSecondary</item>
<item name="colorSecondaryContainer">@color/secondaryContainer</item>
<item name="colorOnSecondaryContainer">@color/onSecondaryContainer</item>
<item name="colorTertiary">@color/tertiary</item>
<item name="colorOnTertiary">@color/onTertiary</item>
<item name="colorTertiaryContainer">@color/tertiaryContainer</item>
<item name="colorOnTertiaryContainer">@color/onTertiaryContainer</item>
<item name="colorError">@color/error</item>
<item name="colorOnError">@color/onError</item>
<item name="colorErrorContainer">@color/errorContainer</item>
<item name="colorOnErrorContainer">@color/onErrorContainer</item>
<item name="android:colorBackground">@color/background</item>
<item name="colorOnBackground">@color/onBackground</item>
<item name="colorSurface">@color/surface</item>
<item name="colorOnSurface">@color/onSurface</item>
<item name="colorSurfaceVariant">@color/surfaceVariant</item>
<item name="colorOnSurfaceVariant">@color/onSurfaceVariant</item>
<item name="colorOutline">@color/outline</item>