Material Design Color Generator
Generate a 10-shade Material Design tonal palette (50-900) from any base color. Follows the Material 3 tonal-palette lightness curve. Copy as CSS variables, plain HEX, or Material Angular config.
:root {
--brand-50: #F0F1FA;
--brand-100: #D9DDF2;
--brand-200: #B3BBE5;
--brand-300: #8692D5;
--brand-400: #6070C8;
--brand-500: #3F51B6;
--brand-600: #354497;
--brand-700: #2A3679;
--brand-800: #20295B;
--brand-900: #141939;
}About Material Design Color Generator
Material Design 3's tonal palette system generates full color scales from a single base color, mapping each shade to a specific lightness value that produces a consistent tonal range. This tool implements the Material tonal-palette approach: pick a base color, get a 10-step scale from 50 (lightest) to 900 (darkest) that follows the same lightness curve as Material's built-in palettes.
Useful for teams following Material Design guidelines, Angular Material projects, and any design system that wants tonal palettes with a specific perceptual curve. The 500 shade is designed as the main brand color; use 700 or darker for text on white, 300 or lighter for text on dark backgrounds. Output as CSS variables ready to drop into Material's theming system or any framework-agnostic setup.
How to Use
Pick a base color — usually your primary brand color.
The tool generates 10 shades from 50 (lightest) to 900 (darkest) following Material Design's tonal palette curve.
Click any shade to copy its HEX value, or copy the full CSS variables block.
Frequently Asked Questions
What is the difference between Material 2 and Material 3 color?
M2 used a fixed set of 19 named palettes (Red, Pink, Purple, etc.). M3 uses tonal palettes — any base color can generate its own tonal scale. This tool follows M3's approach: derive the full palette from a single base color.
How does this compare to Tailwind's color scale?
Both produce 10-11 shade scales. Material uses 50-900; Tailwind uses 50-950. Material's dark end goes to 15% lightness; Tailwind goes to 12%. Both produce usable results — pick the one that matches your framework.
Do the shades meet WCAG contrast requirements?
The 500 shade is designed as the main brand color. For text-on-white use 700 or darker. For text-on-dark backgrounds use 300 or lighter. Always test specific combinations with a contrast checker.