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 2026Updated August 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.

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.

Related Tools

Border Radius Generator

Contrast Checker

10 Free Tools Every Developer Needs in 2026

JSON Formatter Guide: Pretty-Print, Minify & Validate

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 2026Updated August 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.

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.

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

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

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

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

Frequently Asked Questions

Related Tools

Related Guides