Will the ramp match Google's official Material colors?

At your base color's step, yes by construction; elsewhere it approximates, since official ramps are hand-tuned. For standard hues, official palettes exist; for brand colors, derivation is the honest path.

Which step is my primary color?

The step closest to your input — conventionally 500 for mid-tone brands. The swatch preview marks each step so the anchor is visible.

Can I export multiple hues at once?

The tool derives one hue per pass — run each brand color through and combine the snippets in your theme.

Does the output include the class names too?

The preview labels each swatch with its step and class name for reference; the copied snippet is the theme configuration itself.

How do I decide which step a role should use?

Work from the light end for surfaces and the dark end for text on light, then check the pair rather than trusting the number — a step label is a position in the ramp, not a contrast guarantee.

Material UI Color Exporter

Color

bg-brand-50

bg-brand-100

bg-brand-200

bg-brand-300

bg-brand-400

bg-brand-500

bg-brand-600

bg-brand-700

bg-brand-800

bg-brand-900

bg-brand-950

Config

// tailwind.config.js
module.exports = {
  theme: { extend: { colors: { brand: {
      "50": "#a8f5ff",
      "100": "#9be7ff",
      "200": "#81ccff",
      "300": "#62abff",
      "400": "#438bff",
      "500": "#236bdd",
      "600": "#0251c1",
      "700": "#003baa",
      "800": "#001f8f",
      "900": "#00006f",
      "950": "#0a0056",
  }}}}}

You Might Also Need

Chakra UI Color Exporter

Export a palette for Chakra UI

Color CSV Exporter

Export a palette as CSV

Bootstrap Color Exporter

Export a palette as Bootstrap colors

Color Array Generator

Generate a JavaScript color array

The Material UI color exporter derives a full MUI-style shade ramp from one color — 50 through 900 — and emits the theme snippet Material palettes expect.

What is Material UI Color Exporter?

Material Design's palette contract is a shade ramp: one hue expressed as eleven steps named 50 through 900, each with a job — 50 for surfaces, 500 for the primary, 700 and up for text-on-light.
The Material UI color exporter builds that ramp from any single color: set the base hex, and the tool derives the eleven shades in the base's hue, emits the theme snippet Material expects, and previews the ramp as swatches labelled with both their step names and the bg-brand-N classes that consume them.

The derivation respects what makes a Material ramp feel coherent: every step holds the base's hue, so the family is unmistakably one color at eleven lightnesses — the ramp that Material's elevation and state systems assume. The lightness ladder follows the canonical Material spacing, dark steps anchored near the base's depth, light steps opened toward the 50 surface. The result is a Material palette from hex that lands in the theme file without hand-tuning: the mui colors export is the full ramp, formatted as the config snippet the framework consumes.

The tool's honesty is in what it does not claim: a derived ramp is a starting point that matches the base exactly at its anchor and approximates Material's official ramps elsewhere.
Official Pantone-specified Material palettes exist for the standard hues; for a brand color outside that set, derivation is the only honest path, and the ramp it produces is internally consistent even where it differs from Google's hand-tuned steps.
The Tailwind exporter produces the equivalent ramp for Tailwind's naming; the contrast checker verifies which steps may carry text on which surfaces.

Material's palette convention is opinionated in a way that rewards reading before generating. A hue becomes an object of eleven steps carrying textual roles — main, dark, light, contrast text — and the framework's components are written against those names rather than against the numbers. The interesting decision is therefore not which values to include but which value is main: contrast text is derived from it, the other steps are read as directional variations, and the lightest and darkest entries are usually reserved for hover and disabled treatments rather than used as fills. A ramp that gets main wrong produces a theme whose buttons look plausible in isolation and wrong in every state. Generating the ramp from one brand colour gives the eleven steps; choosing which of them carries main is the step an eye still has to make.

As an mui theme palette generator it is deliberately single-hue: one color in, the full eleven-step ramp out, theme-ready. For a whole theme's worth of hues, each brand color takes one pass — the Material palette from hex workflow that turns a brand guideline into a theme file in as many pastes as the brand has colors.

Where the brand supplies more than one hue, each takes its own pass and its own main value, and the theme's coherence comes from the naming rather than from the ramp arithmetic.

How to use Material UI Color Exporter

Set the base color the ramp must derive from.
Review the eleven-step ramp — 50 through 900 — in the swatch preview.
Copy the theme snippet into your Material theme configuration.

When to use Material UI Color Exporter vs related tools

Use this to materialise a brand color as a Material shade ramp. Use the Tailwind exporter for Tailwind naming, the contrast checker for step-role assignment, and the token exporters when the ramp joins a token pipeline instead of a theme file. The framework's own families are laid out in the Material Design color reference for comparison, and a ramp drawn from a brand colour without the theme wrapper is what the Material palette generator produces.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.