Tailwind shades
Pick a colour to get a full Tailwind CSS scale from 50 to 950. Your colour keeps its place in the scale; click any shade to copy it.
Tailwind names each shade by number: 50 is nearly white, 500 is the middle, 950 is nearly black. Paste the v4 CSS into your main stylesheet, or the v3 lines into theme.extend.colors in tailwind.config.js, then use classes like bg-brand-500. Check that text shades are readable with the contrast checker.
How to make a Tailwind colour scale
Pick your brand colour and give the scale a name, such as brand or primary. The generator keeps your exact colour at the step whose lightness is closest to it, usually 500 or 600, and works out the lighter steps (50 to 400) and darker steps (700 to 950) around it, keeping the same hue and saturation. Click any shade to copy it, or copy the whole scale.
Adding it to your project
In Tailwind CSS v4, paste the copied @theme block into your main CSS file, below @import "tailwindcss";. In v3, paste the copied lines into theme.extend.colors in tailwind.config.js. Either way you can then write classes like bg-brand-500, text-brand-900 and border-brand-200.
Which shades to use for what
A common pattern: 50 to 100 for page and card backgrounds, 200 to 300 for borders, 500 to 600 for buttons and links, and 700 to 950 for text and hover states. Check that your text shade is readable on your background shade with the contrast checker; on white, steps 600 and darker usually pass.