Material Color Generator
Generate a Material-style tonal scale (50→900) from one base color. Everything runs on your device — fast, free, and private.
The result will appear here…
or press Ctrl+Enter
Everything runs in your browser. Your data is never sent to our servers.
728 × 90Ad Space AvailablePlace your ad here
Example
Example Input
#2196f3
Example Output
50 #e9f3fe · 500 #2196f3 · 900 #0a3d73
How to Use
- 1Enter a color or data in the Input field.
- 2Set "More settings" if needed, then click Run (or Ctrl+Enter).
- 3Copy the result — a swatch is shown next to each value.
About Material Color Generator
The Material Color Generator turns one base color into a complete Material Design-style tonal scale (50, 100, … 900) by adjusting lightness at each step.
Useful for building a consistent color system for UI components. For a Tailwind-style scale (50→950), use the Tailwind Color Generator.
FAQ
Is my data sent to a server?
No. Material Color Generator runs entirely in your browser — your data never leaves your device.