Material Color Tool Online

How to Generate a Material Design 3 Color Palette

1. Pick or Paste a Source Color: Use the color picker, type a hex like #6366f1, or paste any 6-digit hex. The seed becomes the base hue for the entire scheme — everything else (secondary, tertiary, neutral) is derived from it.
2. See Four Tonal Palettes Generated Live: The tool builds Primary, Secondary, Tertiary, and Neutral palettes from the seed. Tertiary rotates the hue by +60° (Google's M3 default), Secondary keeps the primary hue at reduced saturation, and Neutral nearly desaturates to a tinted gray.
3. Read the 13-Stop Tone Ramp (Optional): Each palette renders thirteen tones — 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100 — the same stops Google's M3 spec exposes. Tone 0 is black, 100 is white; tone 40 is the canonical light-theme Primary, tone 80 the dark-theme Primary.
4. Copy as CSS Custom Properties: Click "Copy" beside any role. The clipboard receives a block like --md-primary-40: #...; for all 13 tones, ready to paste into your :root or @theme block. Runs entirely in your browser — no sign-up, no account, no upload.

Why Use a Material 3 Color Generator?

Material Design 3 (Material You) shipped with Android 12 on October 4, 2021 and reframed Google's design language around dynamic, perceptually-uniform color. Instead of picking three hex codes by eye (M2's approach), M3 derives an entire scheme — five tonal palettes, ~50 color roles, light and dark themes — from a single seed. Doing that math manually is a non-starter; you need a generator. Typical use cases:

• Brand color into a working M3 scheme — Drop in your brand hex and get the full Primary tonal ramp plus a harmonized Tertiary accent (rotated 60° on the hue wheel) without picking the accent by eye.
• Design tokens for a Compose, Flutter, or web app — M3 components on Android (Compose) and Flutter expect ColorScheme.fromSeed() output; this tool gives you the equivalent CSS custom properties for the same seed so a web codebase stays in sync with native.
• Prototype dark-mode pairs without re-picking colors — The standard M3 mapping uses Primary tone 40 in light theme and tone 80 in dark theme. Seeing both tones rendered side-by-side makes swap pairs (tone-40 ↔ tone-80, tone-90 ↔ tone-30 container pairs) obvious at a glance.
• Accessibility checks early — Tone 0/100 anchors and the 10-point stops make it easy to spot pairs that won't clear WCAG AA's 4.5:1 ratio before you wire them into a component library.
• Design-system handoff — Hand a designer the seed and they can reproduce the exact same palette in Figma's Material Theme Builder plugin, because both follow Google's published seed → tonal-palette rules.

Need to translate the resulting hex into RGB, HSL, or OKLCH first? Use the Color Converter before pasting tokens into your stylesheet.

Material 3 vs Material 2 — What Actually Changed

Property	Material 2 (2018)	Material 3 / Material You (2021+)
Color model	Hand-picked Primary, Secondary, Surface hex codes	Algorithmically derived from a single seed color
Color space	sRGB / HSL math	HCT (Hue, Chroma, Tone) — CAM16 hue+chroma with CIELAB L* lightness
Palettes	1 primary + 1 secondary + variants	5 tonal palettes: Primary, Secondary, Tertiary, Neutral, Neutral-variant
Tones per palette	A handful of named shades (light, dark, A100–A700)	13 tones — 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100
Color roles	~10 (primary, primaryVariant, onPrimary, ...)	~30+ (primary, onPrimary, primaryContainer, onPrimaryContainer, ...)
Dynamic color	Not supported	Wallpaper-derived theming on Android 12+ via material-color-utilities
Dark theme	Manually defined inverse colors	Same tonal palettes; roles swap to higher tones (40 → 80, 90 → 30)
Reference library	Material Components for Android (com.google.android.material)	material-color-utilities (TS / Java / Swift / Kotlin / Dart / C++), ~50 KB minified

The Five M3 Palettes — What Each One Is For

Palette	Hue source	Chroma anchor (M3 spec)	Used for
Primary	Seed color	~48	Main brand color — FABs, primary buttons, active states, focus rings
Secondary	Seed color, lower chroma	~16	Less-prominent components — filter chips, secondary buttons, container fills
Tertiary	Seed hue rotated +60°	~24	Contrasting accents — highlights, badges, balance against the Primary hue
Neutral	Seed hue, near-zero chroma	~4	Surfaces, backgrounds, text — almost-gray with a faint seed tint
Neutral Variant	Seed hue, low chroma	~8	Outlines, dividers, surface-variant fills — slightly more colored than Neutral

This tool renders the first four palettes directly. Neutral-variant uses the same hue as Neutral with double the chroma, and Google's official material-color-utilities library is the reference if you need pixel-perfect HCT output (this tool uses a lightweight HSL smoothstep approximation — see the FAQ on accuracy).

M3 Color Roles — Tone Assignments for Light & Dark Themes

The thirteen tones map to named roles via a published table. The same Primary tonal palette is used for both themes; only the tone index changes.

Role	Light theme tone	Dark theme tone	Typical use
Primary	40	80	Filled buttons, FAB, primary text on neutral background
On Primary	100	20	Text/icons drawn on top of Primary
Primary Container	90	30	Tonal button fill, prominent chip background
On Primary Container	10	90	Text/icons on a Primary Container surface
Secondary	40	80	Filter chip selected state, secondary accents
Tertiary	40	80	Contrasting accents — input cursor, decorative highlights
Surface	99	10	App background
On Surface	10	90	Body text on Surface
Surface Variant	90	30	Card fills, panel separators
Outline	50	60	Borders, decorative dividers

Frequently Asked Questions

What is HCT, and how is it different from HSL or OKLCH?

HCT (Hue, Chroma, Tone) is the color space Google published with Material You in 2021. It borrows hue and chroma from CAM16 — a perceptually-accurate color appearance model standardized by the CIE — and uses L* lightness from CIELAB for the tone axis. HSL is sRGB-based and not perceptually uniform: two HSL colors with the same L can look very different in brightness. OKLCH (used by Tailwind v4 and CSS Color 4) is closer to HCT in spirit — both are perceptually uniform — but OKLCH is based on Oklab while HCT is built on CAM16-UCS. For Material 3 specifically, HCT is the canonical model; for general CSS work, OKLCH is more portable.

How does the algorithm derive secondary, tertiary, and neutral from one seed?

Google's material-color-utilities follows a published recipe: take the seed color's hue, then build each palette by holding hue constant (or rotating it) and clamping chroma to a fixed value. Primary keeps the seed hue at chroma 48; Secondary keeps the hue at chroma 16 (a desaturated version); Tertiary rotates the hue by +60° at chroma 24 (a complementary-but-not-opposite accent); Neutral keeps the hue at chroma 4 (nearly gray with a hint of the seed); Neutral-variant keeps the hue at chroma 8. Each palette is then sampled at the 13 standard tones via the HCT-to-sRGB conversion.

Why does this generator look slightly different from Google's official Material Theme Builder?

This tool runs entirely in your browser and uses a lightweight HSL smoothstep approximation of the tone ramp — fast, no external library, no upload. Google's official tool uses the full material-color-utilities package (~50 KB minified, with proper CAM16 / CIELAB / HCT math). For quick scheme exploration and copy-paste CSS variables the approximation is close enough; for production design tokens that need to match Compose, Flutter, or Jetpack components exactly, generate via the official package server-side. The component's UI notes this trade-off explicitly.

What's the practical difference between tone 40 and tone 80?

Tone 40 is the canonical light-theme Primary color — dark enough to act as a strong accent on white surfaces and to clear WCAG AA 4.5:1 contrast against tone 100 (white). Tone 80 is its dark-theme counterpart — light enough to read on the dark tone-10 surface that Material 3's dark theme uses as the background. The "swap pair" pattern is foundational to M3: every role that uses tone 40 in light theme uses tone 80 in dark theme; every "Container" role swaps tone 90 ↔ tone 30; "On" roles swap tone 100 ↔ tone 20 and tone 10 ↔ tone 90.

What is dynamic color, and do I need it?

Dynamic color is the Android 12+ feature where the OS extracts a seed color from the user's wallpaper and re-themes Material You apps in real time. Under the hood Android calls into material-color-utilities with the wallpaper-derived seed and produces the same five tonal palettes a generator like this one shows. If you're building a Compose or Jetpack app you opt in with dynamicColor = true in your Theme() composable; if you're shipping a web app, you don't get OS wallpaper data — you'd ask the user to paste a seed (which is exactly what this tool does).

Can I export to Tailwind, Figma, or Android XML?

This tool exports CSS custom properties (--md-primary-40: #...; style) for each role — paste them into a :root block or Tailwind v4's @theme block and reference them via var(--md-primary-40) or bg-[var(--md-primary-40)]. For native Android XML (<color name="md_primary_40">#...</color>) or Figma plugin import, use Google's official Material Theme Builder — it exports straight to those formats. For a brand-tinted utility ramp keyed to Tailwind's 50–950 stops instead of HCT tones, generate that separately and reference both palettes from the same design tokens file.

How many tones are in a Material 3 tonal palette, and why those specific numbers?

Thirteen: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100. The 10-stop spacing comes from CIELAB lightness intervals — perceptually roughly equal steps on the way from black to white. The extra 95 and 99 stops exist because Material's surface roles need very-near-white tones that the 90 → 100 jump skips over: Surface is tone 99 in light theme and tone 6/10 in dark theme, so without 95 and 99 you'd lose those subtle gradations between "almost white" and "white."

Does this work for my Compose / Flutter / web codebase out of the box?

The exported CSS variables drop straight into any web codebase — Tailwind v3/v4, vanilla CSS, CSS-in-JS, you name it. For Compose, use ColorScheme.fromSeed(seedColor = Color(0xFF6366F1)) with the same seed in your MaterialTheme {} — Google's runtime computes the same palettes. For Flutter, ColorScheme.fromSeed(seedColor: Color(0xff6366f1)) does the same. The seed is the portable contract — once you have one you like, every M3-aware platform produces matching schemes from it.

Is my color data uploaded anywhere?

No. Every computation runs in your browser session — the seed you pick, the derived palettes, the copy-to-clipboard CSS — none of it leaves the page. No account, no sign-up, no watermark, no usage cap.