Free Online Tailwind Color Palette Tool

1. Type into the filter to narrow to a single hue family (for example "blue" or "emerald").
2. Hover any swatch to see its Tailwind class name and hex.
3. Click any swatch to copy its hex to your clipboard.
4. Use 50–200 for backgrounds, 500 as the canonical brand color, and 700–950 for body text on light surfaces.

Tailwind v4 ships 22 hue families (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) and 11 shades each, from `-50` (lightest) through `-500` (canonical base) to `-950` (darkest). v4 moved color definitions into the OKLCH-based default theme for more perceptually-uniform steps; the visible hex is the OKLCH value rendered into sRGB.

Front-end engineers use the palette as a ready-made design-token set; designers pair it with their own brand color; technical writers grab specific shades for example screenshots.

Use this page when you need a hex for a context that doesn't speak Tailwind — a CMS, an email template, a Figma file, or a non-Tailwind framework. Filter by hue family to narrow the grid, then click any swatch to copy.