Tailwind shades from one colour.
Pick or paste a hex code. You get eleven matching shades, from almost white to almost black, ready to copy into your Tailwind theme.
Ad
Questions
4- How are the shades made?
- Your colour is placed on the step closest to its own lightness, usually 500 or 600. The other steps keep the same hue and get lighter or darker in the OKLCH colour space, which is what Tailwind v4's own palette uses, so the steps look evenly spaced.
- Which shade should I use for buttons?
- Usually 600 with white text, and 700 on hover. Use 50 or 100 for soft backgrounds and 900 or 950 for dark text. Each swatch shows whether white or black text reads better on it.
- Tailwind v3 or v4?
- Tailwind v4 uses
@themein your CSS. Tailwind v3 usestailwind.config.js. Pick the matching tab above and paste it in. - Need a whole palette, not one colour?
- Make one with the palette generator, then bring each colour back here for its shades. Or build a full brand kit.