Material 2 vs Material 3 — which?

M2 has fixed named swatches (Red 500, etc.). M3 generates a tonal palette dynamically from a single source color. The tool returns matches for both so you can pick whichever matches your tooling — Android Compose, Flutter, or Material Web Components.

Does it use HCT (Google's perceptual model)?

Yes for M3 matching — HCT is the perceptual model that powers Material You. M2 uses sRGB distance (since the swatches were defined in sRGB originally).

Can I export the M3 tonal palette?

Yes — copy as Compose ColorScheme, Flutter ColorScheme.fromSeed(), CSS custom properties, or SwiftUI Color extension.

material · 18 palettes · 180 colors · nearest

Find the closest Material color

Given any HEX, return the nearest Material Design palette and shade out of 18 palettes × 10 shades.

Material Color Finder

Input

#3A82E8

hex

Palette

blue

material

Shade

600

level

Distance

28.8

rgb

input · color

HEX value

Your swatch

output · preview

Closest Material color

Your color

#3a82e8

Material

blue 600

#1E88E5

Catalog: 18 palettes × 10 shades = 190 colors.

Quick Start

How to find the closest Material color

Paste a HEX; we'll search the whole Material catalogue and return the nearest palette shade.

01
Paste a HEX
From your design tool or brand guidelines.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallive
in · colorhex · sRGB
```
#3a82e8
```
loaded · normalisedOKLCH · ready
02
Get nearest
Euclidean distance against all Material colors.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
matchhex · rgb · hslP3gamut-mappedlive
out · optionsblue 500 · live
```
blue 500 #2196F3
```
options applied · livelive
03
Compare swatches
Side-by-side preview to validate the match visually.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
compareWCAG 2.2APCAAA · AAAcontrast
swatch · convertedboth · ready
```
yours · material
```
converted · liveWCAG-aware
04
Copy the name
Use the palette + shade in your Material theme.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
copyclipboardCSS varspalette JSONblob
ok · copiedready · done
```
✓ Copied blue 500
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to find Material matches

Flutter, Android, MUI themes.

Flutter theming

Map a brand HEX to the closest MaterialColor. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Android XML

Identify the right md_color resource. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

MUI palette

Pick the closest Material palette key for primary/secondary. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Brand audit

Check whether brand colors are Material-friendly. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Quick reference

Identify named shade for a HEX in seconds. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Cross-tool

Bridge Figma to Material themes. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

Material 2 or Material 3?

Material 2 (50-900 named palettes). M3 uses tonal palettes 0-100 — different model.

How is nearest determined?

Euclidean distance in RGB across all 180 Material colors.

Why isn't there an M3 mode?

M3 tonal palettes are derived from a single key color — try the Material Palette generator.

Can I see the whole catalog?

Open the source file — all 18 palettes are listed. Tool focuses on nearest match for speed.

Is anything sent to a server?

No — the catalog is bundled; matching is local.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!