How does the tool decide which Material color is closest?

It converts both your color and every palette token from sRGB into CIE Lab, then measures the straight-line distance (ΔE) between them. Lab space approximates how the human eye perceives color difference, so the nearest token is the one that looks most similar, not just the one with similar numbers.

What does the ΔE number mean?

ΔE is the perceptual distance between two colors. A ΔE under about 2 is barely distinguishable, under 10 is a close match, and large values mean the colors look clearly different. Use it to judge whether the suggested token is close enough to swap in.

Which palette does this match against?

It matches against the well-known Material baseline palette anchors — the 500 and 700 tones of each hue family plus greys, black and white. These are the most commonly referenced Material color tokens in design systems.

Can I enter a shorthand hex like #f80?

Yes. Three-digit hex values are expanded by doubling each digit, so #f80 becomes #ff8800 before matching. Both forms give the same result.

Why match perceptually instead of by RGB distance?

Plain RGB distance overweights some channels and underweights others, so it often picks a token that is numerically near but visually wrong. Lab-based ΔE reflects perceived difference, giving a match that actually looks right on screen.

What is the Material Design Color Lookup?

Match any hex color to the nearest Material Design color token using perceptual CIE Lab distance. Paste a brand or screenshot color and get the closest Material palette name, its official hex, and the ΔE difference. Runs in your browser. It runs free in your browser on Gera Tools, with nothing uploaded.

Material Design Color Lookup

Name: Material Design Color Lookup
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

Designers and developers constantly need to map an arbitrary color — from a logo, a screenshot, or a stakeholder’s PDF — onto the nearest token in a Material Design palette. This tool does that perceptually, so the suggested token is the one that genuinely looks closest, not merely the one with similar hex digits.

How it works

Color difference is measured in CIE Lab space rather than raw RGB, because Lab approximates human vision. The steps are:

1. Parse the hex into 8-bit R, G, B
2. Linearize sRGB (gamma decode)
3. Convert linear RGB to CIE XYZ (D65 white point)
4. Convert XYZ to Lab (L*, a*, b*)
5. For each palette token, compute ΔE = sqrt(dL² + da² + db²)
6. Sort tokens by ΔE; the smallest is the closest match

The reported ΔE lets you judge confidence: a small value means the token is a near-perfect substitute, while a large value warns that no palette color is really close.

Why CIE Lab instead of RGB distance

RGB coordinates were designed for display hardware, not for representing how humans see color. The three axes of RGB space are not perceptually uniform — equal numerical steps in red, green, or blue do not correspond to equally perceived color differences. Lab space was designed specifically to approximate perceptual uniformity: a given ΔE value should correspond to the same visual difference regardless of which region of color space you are in.

The practical consequence is that RGB-based nearest-color tools often return tokens that appear noticeably different on screen, even though the hex digits are close. The Lab-based approach here returns the color that an observer would actually judge as the best match.

Material Design color structure

Material Design organises its baseline palette into named hue 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 with numbered tonal stops from 50 (very light) to 900 (very dark). The most commonly referenced stops are 500 (the primary tone) and the 700/800 range for darker variants. Black, White, and transparent round out the baseline set.

In Material 3 (Material You), these named tokens remain as the raw palette, but the system adds an additional layer of semantic, role-based tokens (Primary, Secondary, Tertiary, Surface, etc.) generated from a single seed color via the tonal palette algorithm. This tool matches against the baseline named-token layer — useful when you have a specific color and need to know which named token it is closest to, regardless of the M3 dynamic color system.

Reading the ΔE result

ΔE range	Interpretation
< 1	Nearly indistinguishable — safe to use as a substitute
1–3	Close match, slight difference visible side by side
3–10	Noticeable difference; evaluate visually before substituting
> 10	Colors are clearly different — a forced match

Example and tips

Pasting #4287f5 returns Blue 500 (#2196F3) as the nearest token with a small ΔE, confirming it is essentially a Material blue. When ΔE is large for every result, your color sits between palette families — consider whether a custom token is warranted rather than forcing the nearest match. Three-digit hex such as #f80 is automatically expanded to #ff8800 before comparison.