Material Palette Generator

Generate a Material Design colour palette (50 to 900) from any base colour, with CSS variables to copy. Runs entirely in your browser.

How to use Material Palette Generator: Open Material Palette Generator — it runs entirely in your browser with no setup. Paste or type your input into the text area, or upload a file where supported. Set any options you need. The result appears in the output panel — there is no upload step and no waiting on a server. Everything runs inside your browser, so your data never leaves your device.

Base (500)

CSS variables

:root {
  --md-50: #ebfffd;
  --md-100: #ccfffa;
  --md-200: #a3fff6;
  --md-300: #70fff1;
  --md-400: #42ffec;
  --md-500: #009688;
  --md-600: #00fae1;
  --md-700: #00d6c1;
  --md-800: #00b3a1;
  --md-900: #008a7c;
}

Generate a Material Design colour palette (50 to 900) from any base colour, with CSS variables to copy. Runs entirely in your browser. Material Palette Generator is a free, browser-based tool in the Filevane color tools collection — there is nothing to install, no account to create and no watermark on your results. It works on desktop, tablet and mobile, and because the work happens on your own device it stays fast even with large inputs.

How to use Material Palette Generator

Open Material Palette Generator — it runs entirely in your browser with no setup.
Paste or type your input into the text area, or upload a file where supported.
Set any options you need. The result appears in the output panel — there is no upload step and no waiting on a server.
Review the output instantly; large inputs are handled locally without lag.
Copy the result to your clipboard or download it. Your data never leaves the page.

Why use Material Palette Generator?

100% free with no limits, no sign-up and no watermarks.
Private by design — your data are processed in your browser and never uploaded to a server.
Fast and lightweight, with instant results even on a phone or a slow connection.
Works everywhere — any modern browser on Windows, macOS, Linux, Android or iOS.
Part of a full color tools suite, so related material palette tasks are one click away.

What people use Material Palette Generator for

Generating the tonal steps of a brand colour for a design system.
Producing consistent hover, active and disabled states from a single base colour.
Building a light and dark variant set from one input.

Material Palette Generator: limits and things worth knowing

Material's scale runs 50 to 900, where 500 is the base and lower numbers are lighter. The steps are perceptual rather than a linear lightness ramp.
A palette generated by lightening and darkening in sRGB drifts in hue — blues turn purple as they lighten. Perceptual colour spaces avoid this.
Check contrast before shipping: the 500 step of most hues does not reach 4.5:1 against white, so it fails WCAG AA for body text even when it looks fine.

Is it private and secure?

Your privacy is built in. Material Palette Generator runs completely on your device, so whatever you enter stays in your browser and is never transmitted, logged or stored on any server.

Network activity: none. Nothing is sent and nothing is fetched. This tool makes no network request at all once the page has loaded — which is why it keeps working if your connection drops.

You do not have to take that on trust — our privacy proof page publishes the Content-Security-Policy that enforces it, lists every third party it permits, and shows how to verify the whole claim yourself.

Learn more

Why Browser-Based Tools Are Safer for Your Files — Most online converters upload your files to a server. Client-side tools don't. Here's why that difference matters for privacy.

Frequently asked questions

What is a Material Design palette?

Material Design expresses each colour as a tonal scale — 50, 100, 200 through 900 — where 500 is the base and the others are systematically lighter or darker. Components then reference a tone rather than a raw hex value, so a whole theme changes by swapping one colour.

How are the tones generated from one colour?

The lighter tones interpolate the base toward white and the darker toward black, but not linearly — the steps are spaced perceptually so each tone looks like an even step to the eye, which a simple lighten/darken does not achieve.

What are accent colours in a Material palette?

The A100, A200, A400 and A700 values are higher-chroma colours intended for elements that must stand out — floating action buttons, active states, selection highlights — rather than for large surfaces, where their saturation becomes tiring.

Is this Material 2 or Material 3?

This produces the classic Material 2 tonal palette with the 50-900 plus A-series scale, which remains what most component libraries and design tools expect. Material 3 replaces it with HCT-based tonal palettes computed from a seed colour.

See all free color tools or browse the full tool catalogue.