M2 if you're building for older Android, classic Material Web Components, or Compose with the legacy theme. M3 if you're targeting Material You / Android 12+. The tool generates both from the same base.

How is the 500 step picked?

500 is the base color you provided. Other steps are derived by adjusting OKLCH lightness (M3) or applying Google's published tonal curve (M2). Both match the canonical Material palettes for known base colors.

Can I export to Compose / Flutter / SwiftUI?

Yes — copy as Compose ColorScheme, Flutter Material3.fromSeed(), SwiftUI Color extension, or plain CSS custom properties via the export dropdown.

material · 50-900 · 10 shades · hsl curve · live

Generate a Material palette

Build the classic Material Design 50-900 scale from a single base color. Curve and saturation tuned to match Google's UI.

Material Palette

Base

#3B82F6

input

Shades

50-900

500

#1365ec

anchor

Status

ready

live

input · color

Base HEX

Base swatch

output · preview

Material 50-900 scale

50: #e7f0fd
100: #c6dafa
200: #97bbf7
300: #689df3
400: #397eef
500: #1365ec
600: #1055c6
700: #0d45a0
800: #0a357b
900: #06204b

Quick Start

How to build a Material palette

One HEX → 10 named shades (50-900) tuned for Material UI lightness curves.

01
Pick the base
Usually your brand primary — the 500 shade anchors the curve.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallive
base · colorhex · sRGB
```
#3b82f6
```
loaded · normalisedOKLCH · ready
02
Read the scale
Lighter values 50-400; darker values 600-900. 500 is the anchor.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
scalehex · rgb · hslP3gamut-mappedlive
stops · options10 · live
```
50 100 200…900
```
options applied · livelive
03
Copy a shade
Click any tile to grab one HEX value.
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.
copyWCAG 2.2APCAAA · AAAcontrast
✓ · convertedshade · ready
```
✓ Copied 500
```
converted · liveWCAG-aware
04
Ship the list
Copy the whole list as plain text or grab individual values.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
shipclipboardCSS varspalette JSONblob
ok · copiedready · done
```
50: #f3f9ff…
```
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 use Material palettes

UI theming, Flutter & Android, theme tokens.

Flutter themes

Material apps expect 50-900 shades. 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

Drop shades into colors.xml. 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

Web Material

Use with MUI or Vuetify primary scales. 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

Design tokens

Seed your token system from one brand color. 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

Rapid theming

From HEX to full palette 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 palettes to MUI / Tailwind. 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

Is this Material 2 or Material 3?

M2-style 50-900 numerical scale. M3 uses tonal palettes (0-100) — different model.

Why is my brand color not at 500?

We anchor 500 to the canonical Material lightness, not your input. Use Tailwind generator if you need base = 500.

Does it match Google's official palettes?

Closely. Google's palettes are hand-tuned; this is algorithmic.

Can I export as JSON?

Copy the list and paste into the CSS Variable Generator or your own pipeline.

Is anything sent to a server?

No — generated locally in your browser.

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!