Generate a Material-style tonal palette — thirteen tones from 0 (black) to 100 (white) — from any source color, approximated in OKLCH. Tone palettes are the backbone of Material theming; this is an honest approximation, clearly labeled as not Google’s official HCT algorithm.
Settings
Generated locally in your browser — your settings and results never leave this page.
Tonal palettes: Material’s central idea
Strip Material theming to its core and one idea remains: express each key color as a fixed ladder of tones — 0 (black) to 100 (white) — and define every UI role as a tone number. Container backgrounds at tone 90, their text at tone 10, primary actions at 40, and so on. The genius is that role definitions become hue-independent: swap the seed color and every relationship survives, because relationships live in the tone arithmetic. This generator produces that ladder from any seed.
An approximation, clearly labeled
Google’s official palettes derive in HCT — a color space built for this purpose, blending CAM16 hue/chroma with Lab-style tone. This tool approximates the same structure in OKLCH: tones map to perceptual lightness, chroma follows a mid-tone-peaked bell (the gamut’s shape forces color to fade toward both extremes). Results are close in spirit and usually close in value to Material Theme Builder’s, but not identical — and the page says so rather than borrowing authority it has not earned. For pixel-parity with Android theming, use Google’s tooling; for the tonal idea anywhere else, this suffices.
The contrast arithmetic of tones
Tone numbers encode approximate contrast: pairs 40 apart generally clear 3:1, 50 apart clear 4.5:1 — which is why Material’s canonical pairings (40 surface with 100 text, 90 container with 10 text) work across every hue. The arithmetic is a planning tool, not a certificate; verify shipping pairs in the Contrast Checker, especially near the yellow region where approximations strain.
Using tonal ladders beyond Material
Nothing about tone-based theming requires Material’s components. Any design system gains from “roles reference tones, tones derive from seeds” — theming, dark mode (roles remap to mirrored tones) and rebrands all become table edits. Tailwind’s 50–950 scale is the same pattern under different numbering; the Tailwind Color Palette Generator here speaks that dialect, and both feed the Semantic Token Generator’s role layer.
Tonal thinking beyond a single palette
The full Material recipe deploys six tonal ladders simultaneously — primary, secondary, tertiary, error, neutral, neutral-variant — with roles drawing from each by tone number. Reproducing that whole architecture starts here one seed at a time, but the deeper takeaway travels lighter: any time two UI elements need a guaranteed contrast relationship, assigning them tone numbers 40+ apart from the same ladder delivers it by construction, in any design system, with no framework attached. That single trick — contrast by tonal arithmetic — is Material’s most exportable idea.
How to use the Material-Style Palette Generator
- Pick the source color and name the palette.
- Thirteen tones from 0 to 100 derive in OKLCH.
- Export as variables, tokens or JSON keyed by tone.
Frequently asked questions
What is a tonal palette in the Material sense?
One hue expressed at thirteen standardized lightness stops – 0 (black) through 10, 20… 90, 95, 99 to 100 (white). Material's theming assigns roles by tone number (container = 90, on-container = 10, and so on), so the ramp is the raw material of the whole system.
Is this the official Material You algorithm?
No, and the page says so prominently: Google's HCT space drives official Material palettes; this generator approximates the tonal concept in OKLCH. Results are close in spirit and usually close in value, but pixel-parity with Material Theme Builder is not claimed – honesty over marketing.
How do tone numbers map to lightness?
Directly: the tone is roughly the perceived lightness percentage. Tone 40 is the classic "primary" (readable with white text), tone 90 the pale container, tone 99 the near-white surface. That semantic stability across hues is the system's genius.
Why does chroma fade toward tones 0 and 100?
Geometry – near black and white the gamut narrows to a point, so color must let go. The generator follows a bell curve peaking mid-tone, which matches how Material ramps behave and keeps every stop displayable.
Which tones pair for accessible text?
The system's rule of thumb: tones ≥40 apart clear 3:1 and ≥50 apart clear 4.5:1 (approximately – verify critical pairs in the Contrast Checker). Hence the canonical 40/100, 90/10, 80/20 pairings.
Can I use tonal palettes outside Material Design?
Absolutely – "one hue, fixed lightness stops, roles by number" is just excellent engineering. Tailwind's 50-950 is the same idea in different clothes; pick the numbering your team already speaks.
How many tonal palettes does a full theme need?
Material's recipe: primary, secondary, tertiary, neutral, neutral-variant and error – six ramps. Generate each here from seed colors (the Brand Palette Generator can propose the seeds), then assign roles per the Material docs or your own scheme.
