Material Color Finder
Find the closest Material Design palette color for any HEX value.
Overview
The Material Color Finder takes any hex code and returns the closest swatch from the Material Design 2014 palette — that is, the Red 500, Blue 700, Pink 200 style swatches still widely used in web and Android UIs. The result includes the colour family, shade number and exact hex, ready to drop into your CSS variables or Flutter colour table.
It is a quick way to retrofit a brand palette onto an existing Material-based design system, find the canonical Material name for a screenshot colour, or check whether a custom accent is "close enough" to a stock Material swatch to share its token.
How it works
The full Material Design palette — fourteen colour 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) × fourteen shades (50, 100…900 plus A100, A200, A400, A700) — is stored as a fixed lookup. Each entry is converted to OKLab once at startup.
When you query a hex, it is converted to OKLab and compared to every palette entry by Euclidean distance. The closest one wins. OKLab Delta-E gives a perceptually meaningful "closest" match, which avoids the pitfall of naive RGB-distance returning a colour that is numerically near but visibly different.
Examples
#3f51b5 → Indigo 500 (#3f51b5)
#1976d2 → Blue 700 (#1976d2)
#ff5722 → Deep Orange 500 (#ff5722)
#90caf9 → Blue 200 (#90caf9)
FAQ
Is this Material 2 or Material 3?
It is the Material 2 / 2014 palette — the colour grid most teams recognise. For Material 3's dynamic tonal palettes, use the HCT editor instead.
Are accent (A100/A200/A400/A700) swatches included?
Yes. The accent variants are part of the palette and are returned just like the numbered shades when they happen to be the closest match.
What if my colour is dead between two Material swatches?
The finder returns whichever has the smaller OKLab distance and shows the distance value, so you can see how close the match really is.
Should I use Material colours for non-Material UIs?
The palette was tuned for Android apps and works well in any UI, but you may want more saturation control than the fixed shade ladder offers. Use the Tailwind shade scale tool to build a custom ladder from any seed.