Map Any Color to Google’s Material Palette
Your designer hands you a HEX value (#2563EB) and says “use the closest Material color.” You open the Material Design docs, scroll through 19 color families with 10 shades each (that’s 190 swatches), and start squinting. There’s a faster way.
Enter any color and this tool mathematically finds the closest match across the entire Material Design palette using Euclidean distance in RGB space. You’ll see the best match with its family name and shade level, plus the top 8 alternatives ranked by distance score. A score of 0 means exact match.
The Material Palette in Brief
19 color families, Red, Pink, Purple, Deep Purple, Indigo, Blue, Light Blue, Cyan, Teal, Green, Light Green, Lime, Yellow, Amber, Orange, Deep Orange, Brown, Grey, Blue Grey. Each family has 10 shades: 50 (lightest) through 900 (darkest). The 500 shade is considered the “primary” of each family.
Enter #009688 and you’ll get Teal 500 at distance 0, it’s an exact Material color. Enter a custom blue like #2563EB and you’ll likely get Blue 700 with a small distance, plus nearby options like Indigo 500 and Blue 600.
When You Need This
Building with Material frameworks. Angular Material, Flutter, and MUI all reference colors by their Material names (Blue 700, Teal 500). When a design spec gives you a HEX value, you need to know which Material token to use.
Migrating to Material Design. Your existing app uses custom colors. Which Material equivalents are closest? Map them all here before touching the theme configuration.
Cross-platform consistency. Making sure your Android app, web dashboard, and iOS version all reference the same Material palette entries.
Documentation. Saying “Blue 700” in design docs is clearer than “#1976D2” for anyone familiar with the Material system.
Material Design 3 Note
This tool uses the classic Material Design palette with fixed shade values. Material Design 3 (“Material You”) generates dynamic palettes from a seed color, that’s a different system entirely. For dynamic palette generation, Google’s own tooling handles it. This covers the standard static palette that’s been used in millions of projects.
The Material colors are open-source, by the way. You can use them in non-Google projects without any licensing concerns.
The Tailwind Color Finder matches against Tailwind’s palette if that’s your framework. The Color Name Finder gives you CSS-standard names. Everything runs in your browser.