Colors

Material Design Color Palette Generator

Material Design color palettes follow Google's design system with 10 shades ranging from ultra-light (50) to ultra-dark (900). This Material Design palette generator lets you pick any hue and saturation to create a complete, production-ready color scale. Whether you're building a Flutter app, an Angular Material UI, or a web project that follows Google's design language, having a full tonal range ensures accessible contrast ratios and a cohesive visual hierarchy across your entire interface.

Use Cases

  • •Flutter and Android app theming
  • •Angular Material UI projects
  • •React component libraries
  • •Design system documentation
  • •Accessible UI color scales

FAQ

What are Material Design color shades?

Material Design defines 10 tonal shades (50–900) for each color, from lightest to darkest, ensuring consistent visual hierarchy.

How do I use a Material Design palette in Flutter?

Paste the hex values into a MaterialColor swatch map in your Flutter theme configuration.

How do I pick a good base hue for my palette?

Start with your brand color's hue value. Adjust saturation to taste — 60–80% works well for most interfaces.

Are these colors WCAG accessible?

Shades 700–900 typically pass WCAG AA contrast on white. Always verify contrast ratios for your specific text sizes.