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.

Material Design Color Lookup

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.

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.