← All toolsFree — no signup

Tailwind Color Scale Generator

Enter a base hex to generate a Tailwind-style colour scale object with swatches.

Tailwind Color Scale Generator

Base color

Scale name

Color scale

100

200

300

400

500

600

700

800

900

Output

const brand = {
  50: '#edfdf9',
  100: '#d5fbf1',
  200: '#acf6e4',
  300: '#75f0d1',
  400: '#3debbf',
  500: '#16d4a5',
  600: '#11a681',
  700: '#0d7d61',
  800: '#095340',
  900: '#052e24',
};

Loading tool…

How it works

Enter your base hex colour

See the 50-900 Tailwind-style object

Copy the object into your config

Need a custom tool built into your product?

We build calculators, estimators, and AI-powered tools that convert visitors into leads.

Start a project