Material Design palette generator
Pick a base color and instantly get its ten shades, from lightest (50) to darkest (900), in the spirit of the tonal palettes popularized by Material Design. The calculation runs entirely in your browser.
How it works
The tool treats your base color as shade 500, then calculates the lighter shades (50 to 400) by progressively mixing it with white, and the darker shades (600 to 900) by mixing it with black, using increasing proportions the further you get from 500. The result is a consistent tonal palette ready to drop into a design system or component library.
Is this exactly the official Material Design algorithm?
No, Google calculates its official palettes with a more complex proprietary algorithm based on the HCT color space. This tool offers an approximation using linear mixing toward white and black, which gives a visually close, ready-to-use result without claiming to reproduce the official Material palettes pixel for pixel.
How do I use this palette in my project?
Click a shade to copy its HEX code, then use it as a CSS variable or design token (for example --primary-500): light shades are often used for backgrounds and disabled states, shade 500 for the primary color, and dark shades for text or high-contrast active states.
All color calculations happen directly in your browser, with no calls to an external server.