Material Design Color Reference
Searchable reference of all Material Design 3 (Material You) color tokens — 37 color roles with light and dark theme values, 6 tonal palettes with 13 tone steps each, and CSS variable names for every token. Click any swatch or HEX value to copy it. No signup required.
Searchable reference of all Material Design 3 (Material You) color tokens — dynamic color roles, tonal palettes, and CSS variable names. Click any swatch or HEX value to copy it. Toggle between light and dark theme values.
| Swatch | Token | HEX |
|---|---|---|
Primary High-emphasis elements, key actions, and active states. | ||
On Primary Text and icons on top of Primary. | ||
Primary Container Filled tonal button backgrounds and selected states. | ||
On Primary Container Text and icons on top of Primary Container. | ||
Inverse Primary Primary color in inverse surfaces (e.g. snackbars). | ||
Secondary Less prominent components and alternative actions. | ||
On Secondary Text and icons on top of Secondary. | ||
Secondary Container Tonal button backgrounds for secondary actions. | ||
On Secondary Container Text and icons on top of Secondary Container. | ||
Tertiary Contrasting accents to balance primary and secondary. | ||
On Tertiary Text and icons on top of Tertiary. | ||
Tertiary Container Tonal button backgrounds for tertiary actions. | ||
On Tertiary Container Text and icons on top of Tertiary Container. | ||
Error Error states, destructive actions, and validation failures. | ||
On Error Text and icons on top of Error. | ||
Error Container Background for error banners and input error states. | ||
On Error Container Text and icons on top of Error Container. | ||
Background The app background behind all other surfaces. | ||
On Background Text and icons on top of Background. | ||
Surface Card, sheet, and dialog backgrounds. | ||
On Surface Text and icons on top of Surface. | ||
Surface Variant Alternative surface for chips, input fields, and cards. | ||
On Surface Variant Text and icons on top of Surface Variant. | ||
Surface Tint Tint color applied to elevated surfaces (same as Primary). | ||
Inverse Surface Inverse surface for snackbars and tooltips. | ||
Inverse On Surface Text and icons on top of Inverse Surface. | ||
Surface Dim Dimmed surface for scrim overlays and disabled states. | ||
Surface Bright Brightest surface variant for elevated containers. | ||
Surface Container Lowest Lowest elevation surface container. | ||
Surface Container Low Low elevation surface container. | ||
Surface Container Default surface container. | ||
Surface Container High High elevation surface container. | ||
Surface Container Highest Highest elevation surface container. | ||
Outline Borders for text fields, dividers, and focus rings. | ||
Outline Variant Subtle borders for cards and decorative dividers. | ||
Shadow Drop shadow color for elevated components. | ||
Scrim Overlay color for modal backdrops and drawers. |
Color values shown are the Material Design 3 baseline (default) palette. Dynamic color (Material You) generates custom palettes from user wallpapers at runtime — these baseline values are the fallback when dynamic color is not available. Click any swatch or HEX value to copy it to your clipboard.
Why Use Our Material Design Color Reference?
Complete Material Design 3 Token Reference
All Material Design 3 color roles — primary, secondary, tertiary, error, surface, background, outline, shadow, and scrim — with both light and dark theme values. Includes all 6 tonal palettes with 13 tone steps each.
Instant Search & Role Filtering
Search by token name, CSS variable name, HEX value, or description. Filter by color role to focus on the tokens you need. Results update instantly on every keystroke.
Light & Dark Theme Values
Toggle between light and dark theme values with one click. Every color role shows the correct token value for both themes — essential for building adaptive Material You interfaces.
100% Free — No Signup Required
Completely free with no account, no premium tier, no usage limits, and no ads blocking the interface. Reference Material Design 3 colors as many times as you need.
Common Use Cases for Material Design Color Reference
Android App Development
Android developers use the Material Design color reference to implement the correct color roles in Jetpack Compose and XML layouts. The reference shows both light and dark theme values for every token, eliminating the need to look them up in the official documentation.
Flutter & Cross-Platform Development
Flutter developers use the Material Design color reference to configure ColorScheme in their ThemeData. The tonal palette values map directly to Flutter's Material 3 color system, making it easy to implement custom brand colors.
Web Material Design Implementation
Web developers implementing Material Design 3 with Material Web Components use the CSS variable names from this reference to override the default theme tokens and apply custom brand colors.
Figma Design System Setup
Designers setting up Material Design 3 in Figma use the color reference to populate their color styles and variables. The tonal palette values provide the complete set of swatches needed for a Material You design system.
Material You Dynamic Color
Developers implementing Material You dynamic color use the baseline token values as fallbacks when the user's wallpaper-generated palette is not available. This reference provides all baseline values for both light and dark themes.
Accessibility & Contrast Verification
Accessibility engineers use the Material Design color reference to verify that color role pairs (e.g. Primary + On Primary) meet WCAG contrast requirements. The on-color roles are specifically designed to ensure readable contrast.
Understanding Material Design 3 Colors
What is Material Design 3 (Material You)?
Material Design 3(also called Material You) is Google's latest design system, introduced in 2021 with Android 12. Its color system is built around dynamic color— the ability to generate a complete color palette from the user's wallpaper at runtime. The system defines a set of color roles(semantic tokens like "Primary", "On Primary", "Surface") that map to specific tones from a tonal palette. This separation of roles from values allows the entire UI to adapt to any brand or user-generated color while maintaining consistent contrast and accessibility. Our Material Design color reference provides all baseline token values for both light and dark themes.
How the Material Design 3 Color System Works
- Tonal Palettes: Material Design 3 generates six tonal palettes from a seed color — Primary, Secondary, Tertiary, Error, Neutral, and Neutral Variant. Each palette contains 13 tones from 0 (black) to 100 (white), providing a full range of lightness values.
- Color Roles:Color roles are semantic tokens that map to specific tones from the tonal palettes. For example, "Primary" maps to tone 40 in light theme and tone 80 in dark theme. "On Primary" maps to tone 100 in light and tone 20 in dark.
- Dynamic Color:On Android 12+, Material You generates custom tonal palettes from the user's wallpaper. The color roles then map to the same tone positions in the custom palette, producing a fully personalised UI. The baseline values in this reference are the fallback when dynamic color is not available.
Key Color Role Groups
- Primary / On Primary / Primary Container: The main brand color and its variants. Primary is used for key actions and high-emphasis elements. Primary Container is used for filled tonal buttons and selected states.
- Secondary & Tertiary: Supporting colors for less prominent components and contrasting accents. Secondary is used for chips and alternative actions; Tertiary provides a third accent for visual balance.
- Surface & Background: The neutral colors used for card backgrounds, sheets, dialogs, and the app background. Material Design 3 introduces multiple surface container levels (lowest, low, default, high, highest) for elevation-based tinting.
- Outline & Outline Variant: Border colors for text fields, dividers, and focus rings. Outline is used for prominent borders; Outline Variant for subtle decorative dividers.
CSS Variable Usage
Material Web Components (the official web implementation of Material Design 3) uses CSS custom properties with the prefix --md-sys-color- for all color tokens. You can override any token by setting the CSS variable in your stylesheet: :root { --md-sys-color-primary: #your-color; }. This reference provides the exact CSS variable name for every token, making it easy to copy and paste into your implementation.
Related Tools
Color Picker & Converter
Visual color picker with HEX, RGB, HSL, HSV, CMYK, HWB, and CIE LAB conversion. Bidirectional inputs, WCAG contrast checker, CSS variable output — free online color picker converter.
Color Name Finder
Enter any HEX or RGB color and instantly find the closest named color from 300+ CSS, X11, and Pantone color names. Search by name or browse the full database — free online color name finder.
Color Contrast Checker
Calculate WCAG 2.1 contrast ratio and check AA/AAA compliance for normal text, large text, and UI components — live preview, HEX and RGB input. Free online color contrast checker.
Color Difference Calculator (ΔE 2000)
Calculate the perceptual color difference (ΔE 2000 / CIEDE2000) between any two colors — enter HEX or RGB values and get the Delta-E score with a visual comparison and CIE L*a*b* breakdown. Free online color difference calculator.
Frequently Asked Questions About Material Design Color Reference
Material Design 3 (Material You) is Google's latest design system, introduced with Android 12 in 2021. Its color system is built around dynamic color — generating a complete palette from the user's wallpaper — and semantic color roles that map to specific tones from tonal palettes. This reference provides all baseline token values for both light and dark themes.
A tonal palette is a set of 13 color tones (0–100) generated from a seed color. A color role is a semantic token (like "Primary" or "On Surface") that maps to a specific tone from a tonal palette. For example, "Primary" maps to tone 40 in light theme and tone 80 in dark theme from the Primary tonal palette.
Material Web Components uses CSS custom properties with the prefix --md-sys-color-. For example, the Primary token is --md-sys-color-primary. You can override any token by setting the CSS variable in your stylesheet. This reference shows the exact CSS variable name for every token.
In Flutter, Material Design 3 colors are configured through ColorScheme in ThemeData. You can use ColorScheme.fromSeed() to generate a complete scheme from a seed color, or manually specify each role using ColorScheme(primary: Color(0xFF6750A4), ...). The HEX values in this reference can be converted to Flutter Color objects using Color(0xFF + hex without #).
In Jetpack Compose, Material Design 3 colors are configured through MaterialTheme.colorScheme. You can use dynamicColorScheme() for Material You dynamic color, or create a custom ColorScheme with the token values from this reference. The HEX values can be converted to Compose Color objects using Color(0xFF6750A4).
In Material Design 3, each color role has different tone values for light and dark themes. For example, "Primary" uses tone 40 (darker) in light theme and tone 80 (lighter) in dark theme. This ensures sufficient contrast in both themes. Toggle between light and dark in this reference to see the correct values for each theme.
Dynamic color is a Material You feature available on Android 12+ that generates a custom color palette from the user's wallpaper at runtime. The color roles then map to the same tone positions in the custom palette, producing a personalised UI. The baseline values in this reference are the fallback when dynamic color is not available.
Yes. The color values in this reference are the official Material Design 3 baseline palette as published by Google at m3.material.io. The baseline uses a purple seed color (#6750A4) as the default. Dynamic color replaces these with user-generated values at runtime on supported devices.
Yes. The Material Design color reference is 100% free with no signup required, no premium tier, no usage quotas, and no ads blocking the interface. Reference and copy Material Design 3 colors as many times as you need.