What is Monochromatic Palette?

Pick a base color and generate shades (darker) and tints (lighter) from it. Set the number of steps, then export as CSS variables, Tailwind config, or copy individual hex/RGB values.

Pick any HEX or use the color picker, set the count of tints (lighter), tones (gray-mixed), and shades (darker), and the page interpolates each scale in LAB space so the steps read evenly. Each swatch shows HEX, RGB, and HSL with one-click copy, and Copy All grabs the whole scale at once. Filter the view to just tints, tones, or shades, or export the whole scale as CSS custom properties, a Tailwind config snippet, SCSS variables, JSON design tokens, or a PNG swatch sheet.

How to use

1. Pick a base color with the color picker, type a hex code, or pull the dominant color straight out of a logo or photo with From image.
2. Adjust how many tints (lighter), tones (gray-mixed), and shades (darker) you want, then narrow the view with the Show filter if you only need one row.
3. Copy individual color values, hit Copy All to grab every HEX at once, or export the whole palette as CSS custom properties, a Tailwind config object, SCSS variables, JSON design tokens, or an image swatch.

When to use

• Building a UI design system that needs nine consistent steps of one brand colour across components.
• Designing a data viz where every series must come from the same hue (sequential heatmaps, bar charts).
• Picking text and background pairings — pair a -100 background with a -900 text and the contrast ratio is usually safe.

Result

You're building a dashboard and need a blue palette for data visualization. You pick #3B82F6 as the base, generate 9 steps from near-white (#EBF2FE) to near-black (#1A2744). You export as CSS variables and use --color-blue-100 through --color-blue-900 across your charts.

FAQ

What's a monochromatic palette, exactly?

It's a set of colours that share one hue but differ in saturation and lightness. The result reads as one colour family, shades and tints of the same blue, say, and avoids the visual conflict you get from mixing unrelated hues.

How many steps should I generate?

Nine is the common UI convention (Tailwind, Material, IBM Carbon all use ten-step scales numbered 50-900). For data viz you often want 5-7 evenly spaced steps. More than 11 starts to look like a gradient and the adjacent swatches become hard to tell apart.

Which format should I export?

CSS variables drop into any stylesheet. The Tailwind snippet plugs into the theme.extend.colors object so you get bg-brand-500 utilities. SCSS gives you both $brand-500 variables and a Sass map. JSON exports the scale as structured design tokens for a style dictionary. The PNG swatch sheet is for sharing with non-engineers in Figma or a brand doc.

Why do the lightest tints sometimes look washed-out?

At very high lightness, the eye perceives any saturated colour as nearly white. If the -100 step looks identical to white, drop the tint count or move the lightness range cap closer to the base colour, and the shades will read more distinctly.

Are the generated colours accessibility-safe?

Now you can check it right here. Turn on the WCAG contrast badge and each swatch shows whether black or white text clears AA or AAA on it; the Color vision preview recolors the scale the way someone with deuteranopia, protanopia, or tritanopia would see it. As a quick rule, pair a -100/-200 step with a -700/-800 step and you'll usually pass WCAG AA.

Related Tools