What is the difference between a tint, a shade and a tone?

A tint is the base colour mixed with white, so it gets lighter and softer. A shade is the base mixed with black, so it gets darker and deeper. A tone is the base mixed with grey, which lowers its saturation and makes it look more muted. This generator builds all three from a single base colour so you can see the whole family at once.

How is the Material 50 to 900 scale built?

The base colour is anchored near the 500 step, then a perceptually spaced lightness curve fans out from a near-white 50 up to a deep 900, while saturation rises slightly through the mid-range and eases at both extremes. This mirrors how Material Design swatch ramps behave, giving you usable surface, accent and text tones in one scale.

Can I export the palette to Tailwind CSS?

Yes. Switch the export panel to TAILWIND and you get a ready-to-paste block for theme.extend.colors, keyed by the 50–900 steps and named after your palette name. There are also CSS custom-property and JSON exports, plus a downloadable SVG swatch sheet.

Why do some swatches show black text and others white?

Each swatch picks its label colour automatically from the relative luminance of the background, so the hex code always stays readable. The tool also reports the base colour's WCAG contrast ratio against pure white and pure black to help you judge accessibility.

Does my colour data get uploaded anywhere?

No. Every calculation happens in your browser using plain colour maths. Your base colour, palette name, step count and saved swatches are stored only in this browser's local storage, and nothing is ever sent to a server.

How many colours should I use from the generated scale?

A common pattern is to use the 50 or 100 tint for backgrounds and surfaces, the 500 step for primary buttons and accents, and the 700 to 900 shades for text, icons and borders. Tones are useful when a colour feels too vivid and you want a calmer, more neutral version without changing the hue.

Material Palette Generator

The Material Palette Generator takes a single base colour and expands it into a complete, production-ready palette: a Material-Design-style 50–900 scale, a run of lighter tints, a run of darker shades, and a set of muted tones. Every swatch shows its hex code, and you can copy any value with one click or export the whole palette as CSS variables, a Tailwind colour block, JSON, or a downloadable SVG swatch sheet. It is built for designers and front-end developers who start from one brand colour and need a consistent, accessible family of shades to build an interface around — without hand-mixing dozens of values in a design tool.

How it works

Pick a base colour with the native colour picker or type any hex value — both 3-digit (#fff) and 6-digit (#2563eb) forms are accepted. The tool converts that colour into the HSL colour space, because lightness and saturation are exactly the levers you need to build a clean ramp. Tints are produced by raising lightness toward 100 percent, shades by lowering lightness toward 0, and tones by reducing saturation toward grey while holding the hue and lightness steady. The Material 50–900 scale is generated from a perceptually spaced lightness curve anchored near the 500 step, with saturation that rises gently through the middle of the range and eases off at the very light and very dark ends — the same shape you see in well-designed Material swatch ramps.

Each swatch automatically chooses black or white label text from its own luminance so the hex code is always legible, and the base colour’s WCAG contrast ratio against white and black is shown so you can judge readability before you commit. Adjust the steps slider to make the tint and shade runs coarser or finer, save frequently used base colours to a swatch tray, and the whole state — base, name, step count and saved swatches — persists locally in your browser between visits.

Example

Start with the brand blue #2563eb. The generator anchors it at the 500 step and produces a scale from a pale #eff4fe-style 50 up to a deep near-navy 900. Set the steps slider to 5 and you get five tints climbing toward white and five shades falling toward black, plus tones that fade the same blue into progressively greyer, calmer variants. Switch the export panel to Tailwind and paste the generated theme.extend.colors block straight into your config; your buttons, surfaces, text and borders now all draw from one coherent brand-50 … brand-900 family. Every figure here is computed in your browser — no colour is uploaded or stored on any server.