Tailwind Custom Palette Generator

Build a Tailwind colour scale

Tailwind organises colours into numbered scales running from a very light 50 all the way to a dark 900, which means a custom brand colour needs the whole scale to fit the system, not just the one shade you started with. This generator produces a complete Tailwind-style palette from a single base hex colour, giving you every step in the scale ready to drop straight into your theme config. It turns one brand colour into a full, usable colour family in seconds.

Why you need the whole scale

Tailwind’s entire design system assumes each colour exists at every step of the scale, so that you can reach for a light shade as a subtle background and a dark shade as readable text of the very same hue without ever leaving that colour family. Providing only your single base colour leaves the scale incomplete and the resulting design inconsistent. Generating all the steps from one colour keeps the underlying hue consistent throughout while smoothly varying the lightness exactly the way Tailwind expects it to.

Copy into your config

It runs entirely in your browser, so nothing you enter is uploaded and the generated code is yours to paste straight into a project. Because it works client-side, you can iterate freely, regenerating as often as you like without a round trip to any server.

Related tools

• Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
• Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
• Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
• Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.