Color
Material Color Generator
Generate Material Design color palettes online from a base color. Create tonal color steps for UI themes, surfaces, accents and states.
Tool
Generate Material Design color palettes online from a base color. Create tonal color steps for UI themes, surfaces, accents and states.
This tool runs in your browser. Your input is processed locally and is not uploaded.
About this Tool
Use this free Material color generator to create Material-style color palettes for app interfaces, UI themes and design systems. Start with a base color and generate tonal color steps for primary, secondary, surface, background and state colors.
Examples
- #6750a4
- #006e1c
- #ba1a1a
- #006a6a
Frequently Asked Questions
What is a Material color palette?
A Material color palette is a structured set of tonal colors used for UI elements such as primary buttons, surfaces, backgrounds, outlines and states.
Is this based on Material Design?
The tool can generate Material-style palettes inspired by Material Design color systems. Exact behavior depends on the implemented palette algorithm.
Can I use the colors in an app theme?
Yes, the generated colors can be used as a starting point for app themes, CSS variables, design tokens or component libraries.
Should I still check contrast?
Yes, always check text and background combinations with a contrast checker before using them in production.