Color & DesignMaterial

Free Material Design 3 Color Palette Generator

Generate complete Material Design 3 (M3) Material You tonal palettes, 13-tone scales, dynamic UI component previews, 25+ curated source presets, and Jetpack Compose/Flutter export.

Tanbir Ahamed·Founder of ToolWise · Software Engineer

Published July 2026

#1A73E8

Primary Tonal Ramp (13 Tones)

Tones 0–100

Material You UI Mockup (LIGHT)

Live M3 Components

ToolWise M3

Dynamic

Adaptive Material Surfaces

Material 3 uses tonal luminance pairing to ensure text contrast without harsh outlines.

Primary TonalTertiary Accent

Curated Source Colors (25)

Export Material 3 Code

// Jetpack Compose M3 ColorScheme
val LightColorScheme = lightColorScheme(
  primary = Color(0xFF1461C8),
  onPrimary = Color(0xFFFFFFFF),
  primaryContainer = Color(0xFFE9EFF6),
  onPrimaryContainer = Color(0xFF111A28),
  secondary = Color(0xFF494992),
  onSecondary = Color(0xFFFFFFFF),
  surface = Color(0xFFF7F7F8),
  onSurface = Color(0xFF1A1C1E),
)

How to Use

1Pick a source brand color or select from 25+ curated Google/Pixel presets.
2The generator computes Primary, Secondary, Tertiary, and Neutral tonal ramps (Tones 0–100).
3Toggle between Light and Dark mode to view Material 3 components in action.
4Click any tonal swatch to copy its hexadecimal color.
5Export production code for Jetpack Compose, Flutter, Android XML, or CSS.

Features

✓Full Material Design 3 (M3) Tonal Palette Engine (13 tones per ramp)
✓Automatic Secondary, Tertiary, and Neutral ramp derivation
✓25+ curated source presets across 5 themes (Google, Pixel, Sunset, Nature, Cyber)
✓Live Material 3 UI Mockup with FAB, App Bar, Tonal Buttons, and Chips
✓Light and Dark theme instant role mapping
✓🎲 One-click Random Source color generator
✓Export to Jetpack Compose, Flutter, Android XML, CSS Variables, and Tailwind

Comprehensive Guide & Reference

The Material Design 3 (Material You) Color Guide

Discover Google's HCT perceptual color science, dynamic tonal pallets, and guaranteed accessibility roles.

1. Understanding HCT & Perceptual Tones

Material Design 3 replaces traditional RGB/HSL with HCT (Hue, Chroma, Tone). Tone represents human perceptual lightness on a scale of 0 (pure black) to 100 (pure white). Unlike HSL, two colors with Tone 50 will always appear equally bright to the human eye, ensuring predictable contrast.

2. Core Color Roles in M3

Primary / onPrimary: Key action color and its contrasting text/icon overlay.
PrimaryContainer / onPrimaryContainer: Softer emphasis fill for cards and elevated components.
Secondary & Tertiary: Complementary accents derived from shifted hue angles.
Surface & SurfaceVariant: Neutral backgrounds with subtle hue tinting.

Real example

Worked example: a Material 3 tonal palette

Input: Seed: #6750A4 (the Material baseline purple)
Output: →Tonal palette, tones 0–100 · copy any single tone or the full set as CSS variables

Material guidance uses tone 40 for light-theme surfaces and tone 80 for dark — the seed color itself usually lands near tone 40.

Privacy & data handling

This tool runs entirely in your browser. What you enter is processed on your own device using JavaScript and WebAssembly — it is not uploaded to our servers, and there is no account, no signup and no per-use limit. Read our privacy policy.

Frequently Asked Questions

What is Material Design 3 (Material You) tonal palette generation?

Material Design 3 uses algorithmic color extraction to generate 5 tonal palettes (Primary, Secondary, Tertiary, Neutral, Neutral Variant) across 13 fixed perceptual tones (0 to 100). These tones automatically map to UI roles ensuring guaranteed WCAG contrast in both Light and Dark themes.

How do Tone numbers work in Material 3?

Tone 0 represents pure black, while Tone 100 represents pure white. Tone 40 is standard for primary elements in Light theme, and Tone 80 is used in Dark theme for optimal luminance.

Which platforms are supported for code export?

You can export ready-to-use color definitions for Jetpack Compose (Android), Flutter Material 3, Android XML, CSS Variables, and Tailwind CSS.

What is the role of Tertiary colors in Material You?

Tertiary colors provide balancing contrast against the primary brand tone. They are often applied to input highlights, floating action accents, or specific badges to enrich the overall visual rhythm without clashing.

Why does Material Design 3 rely on HCT color space instead of RGB or HSL?

HCT (Hue, Chroma, Tone) accurately matches human visual perception and luminance. Unlike HSL where a yellow at 50% lightness looks vastly brighter than a blue at 50%, HCT tone values guarantee predictable contrast ratios regardless of hue.

Can I generate both Light Theme and Dark Theme tokens automatically?

Yes! The generated tonal palettes provide all required surface, container, and on-color mappings for both light and dark modes according to standard Material 3 specifications.

Related Tools

Color Palette Generator

Color Scheme Generator

Gradient Generator

Mesh Gradient Generator

Tailwind Color Generator

Color Converter

Topical Collection

Explore all tools in Color & CSS

View collection

Free Material Design 3 Color Palette Generator

Generate complete Material Design 3 (M3) Material You tonal palettes, 13-tone scales, dynamic UI component previews, 25+ curated source presets, and Jetpack Compose/Flutter export.

Tanbir Ahamed·Founder of ToolWise · Software Engineer

Published July 2026

#1A73E8

Primary Tonal Ramp (13 Tones)

Tones 0–100

Material You UI Mockup (LIGHT)

Live M3 Components

ToolWise M3

Dynamic

Adaptive Material Surfaces

Material 3 uses tonal luminance pairing to ensure text contrast without harsh outlines.

Primary TonalTertiary Accent

Curated Source Colors (25)

Export Material 3 Code

// Jetpack Compose M3 ColorScheme
val LightColorScheme = lightColorScheme(
  primary = Color(0xFF1461C8),
  onPrimary = Color(0xFFFFFFFF),
  primaryContainer = Color(0xFFE9EFF6),
  onPrimaryContainer = Color(0xFF111A28),
  secondary = Color(0xFF494992),
  onSecondary = Color(0xFFFFFFFF),
  surface = Color(0xFFF7F7F8),
  onSurface = Color(0xFF1A1C1E),
)

How to Use

1Pick a source brand color or select from 25+ curated Google/Pixel presets.
2The generator computes Primary, Secondary, Tertiary, and Neutral tonal ramps (Tones 0–100).
3Toggle between Light and Dark mode to view Material 3 components in action.
4Click any tonal swatch to copy its hexadecimal color.
5Export production code for Jetpack Compose, Flutter, Android XML, or CSS.

Features

✓Full Material Design 3 (M3) Tonal Palette Engine (13 tones per ramp)
✓Automatic Secondary, Tertiary, and Neutral ramp derivation
✓25+ curated source presets across 5 themes (Google, Pixel, Sunset, Nature, Cyber)
✓Live Material 3 UI Mockup with FAB, App Bar, Tonal Buttons, and Chips
✓Light and Dark theme instant role mapping
✓🎲 One-click Random Source color generator
✓Export to Jetpack Compose, Flutter, Android XML, CSS Variables, and Tailwind

Comprehensive Guide & Reference

The Material Design 3 (Material You) Color Guide

Discover Google's HCT perceptual color science, dynamic tonal pallets, and guaranteed accessibility roles.

1. Understanding HCT & Perceptual Tones

2. Core Color Roles in M3

Primary / onPrimary: Key action color and its contrasting text/icon overlay.
PrimaryContainer / onPrimaryContainer: Softer emphasis fill for cards and elevated components.
Secondary & Tertiary: Complementary accents derived from shifted hue angles.
Surface & SurfaceVariant: Neutral backgrounds with subtle hue tinting.

Real example

Worked example: a Material 3 tonal palette

Input: Seed: #6750A4 (the Material baseline purple)
Output: →Tonal palette, tones 0–100 · copy any single tone or the full set as CSS variables

Material guidance uses tone 40 for light-theme surfaces and tone 80 for dark — the seed color itself usually lands near tone 40.

Privacy & data handling

Frequently Asked Questions

What is Material Design 3 (Material You) tonal palette generation?

How do Tone numbers work in Material 3?

Tone 0 represents pure black, while Tone 100 represents pure white. Tone 40 is standard for primary elements in Light theme, and Tone 80 is used in Dark theme for optimal luminance.

Which platforms are supported for code export?

You can export ready-to-use color definitions for Jetpack Compose (Android), Flutter Material 3, Android XML, CSS Variables, and Tailwind CSS.

What is the role of Tertiary colors in Material You?

Why does Material Design 3 rely on HCT color space instead of RGB or HSL?

Can I generate both Light Theme and Dark Theme tokens automatically?

Yes! The generated tonal palettes provide all required surface, container, and on-color mappings for both light and dark modes according to standard Material 3 specifications.

Free Material Design 3 Color Palette Generator

Primary Tonal Ramp (13 Tones)

Material You UI Mockup (LIGHT)

Adaptive Material Surfaces

Curated Source Colors (25)

Export Material 3 Code

How to Use

Features

The Material Design 3 (Material You) Color Guide

1. Understanding HCT & Perceptual Tones

2. Core Color Roles in M3

Real example

Worked example: a Material 3 tonal palette

Privacy & data handling

Frequently Asked Questions

Related Tools

Related Guides

Free Material Design 3 Color Palette Generator

Primary Tonal Ramp (13 Tones)

Material You UI Mockup (LIGHT)

Adaptive Material Surfaces

Curated Source Colors (25)

Export Material 3 Code

How to Use

Features

The Material Design 3 (Material You) Color Guide

1. Understanding HCT & Perceptual Tones

2. Core Color Roles in M3

Real example

Worked example: a Material 3 tonal palette

Privacy & data handling

Frequently Asked Questions

Related Tools

Related Guides

Free Material Design 3 Color Palette Generator

Interactive Tool Workspace

Primary Tonal Ramp (13 Tones)

Material You UI Mockup (LIGHT)

Adaptive Material Surfaces

Curated Source Colors (25)

Export Material 3 Code

How to Use

Features

1. Understanding HCT & Perceptual Tones

2. Core Color Roles in M3

Real example

Worked example: a Material 3 tonal palette

Privacy & data handling

Frequently Asked Questions

Related Tools

Related Guides

Free Material Design 3 Color Palette Generator

Interactive Tool Workspace

Primary Tonal Ramp (13 Tones)

Material You UI Mockup (LIGHT)

Adaptive Material Surfaces

Curated Source Colors (25)

Export Material 3 Code

How to Use

Features

1. Understanding HCT & Perceptual Tones

2. Core Color Roles in M3

Real example

Worked example: a Material 3 tonal palette

Privacy & data handling

Frequently Asked Questions

Related Tools

Related Guides