Hex to Material Design Color
Convert any hex color code to its closest Google Material Design 500-tier color, like Blue 500 or Red 500, using a weighted color-distance formula.
How Hex to Material Design Conversion Works
Google's Material Design system defines a base palette of 19 hues, each with an official 500-tier hex value from m2.material.io — the mid-tone shade most commonly used as the representative color for that hue family. This tool compares your input hex against all 19 using the redmean weighted-Euclidean color-distance formula and returns the closest match with a similarity percentage.
Hex to Material Design Example, Step by Step
#2196F3 = Blue 500
#2196F3 (hex) = Blue 500 (2196F3) — exact match
Compare #2196F3 against all 19 Material Design 500-tier colors Distance to Blue 500 (#2196F3) = 0 -> exact match Distance to every other hue > 0 Result: Blue 500 (2196F3) — exact match
| Step | Description | Result |
|---|---|---|
| Take the input hex | #2196F3 | input color |
| Compare to all 19 hues | redmean distance to each 500-tier color | 19 distances |
| Find the smallest distance | Blue 500 (#2196F3) has distance 0 | Blue 500 |
| Report the match | distance 0 means an exact hit | Blue 500 (2196F3) — exact match |
A non-palette input like #2563EB still resolves to the nearest hue — Blue 500 at 86.5% similar — rather than an exact match, since it only compares against 19 fixed reference points.
Common Mistakes With Hex to Material Design
- Expecting a match against every Material Design tonal shade (50-900) instead of just the 19 base 500-tier hues.
- Treating a "closest match" percentage as an exact palette hit rather than the nearest of 19 fixed options.
- Confusing Material Design 2 (m2) values with the newer Material You dynamic color system, which generates palettes per device rather than using a fixed hex list.
Frequently Asked Questions
What is the Material Design 500-tier palette?
It's Google's official base color set from m2.material.io — 19 hues (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 anchored at their mid-tone "500" shade.
How does this tool find the closest Material Design color?
It compares your hex input against all 19 Material Design 500-tier colors using the redmean weighted-Euclidean color-distance formula and returns the nearest one with a similarity percentage.
What's the hex value of Material Blue 500?
#2196F3 — the official Material Design Blue 500 value.
Why does #2563EB resolve to Blue 500 instead of an exact hex?
#2563EB isn't one of the 19 official 500-tier values, so the tool returns the closest one by color distance — Blue 500 (#2196F3), at 86.5% similar.
Does this cover the full Material Design tonal range (50-900)?
No — this tool only covers the 19 base 500-tier hues, which are the most commonly referenced shade in each Material Design color family, not every lighter or darker tint.