Monochromatic Color Palette Generator
Pick a base color; get a 9-step palette (50, 100, 200, … 900) like Tailwind's color scales. Useful for design systems, dark-mode token pairs, or UI variants of a brand color.
How to use the Monochromatic Color Palette Generator
Pick a base color. Output is a 9-step palette with Tailwind-style numbering. Click any swatch to copy its hex.
A Tailwind-style scale from one color
Design systems rarely use a single flat color. They use a numbered scale — 50 for the palest tint up to 900 for the deepest shade — so a button, its hover state, its disabled state, and its dark-mode counterpart all come from one coherent family. Tailwind popularised this 50–900 numbering, and most component libraries now expect it.
Pick a base color and this generates a nine-step monochromatic scale around it in one pass, lighter and darker together. If you only need one direction, the tints generator and shades generator give finer step control; for harmonious different hues rather than one color, see the harmony palette generator.
Common use cases
- Design systems — define a full color ramp from one brand color.
- Tailwind theming — drop the steps straight into a custom color scale.
- Dark-mode pairs — pick a light step and its dark counterpart from one family.
- Token export — turn the scale into named design tokens.
- Consistent UI — keep every state of a component on the same hue.