Tailwind Shades

Tailwind palettes from any color

Your color stays exactly as it is. The other shades follow Tailwind's own colors, computed in OKLCH, for Tailwind v4, v3, v2 and v1.

Tailwind
Format
Output
Your palette: brand
  1. 50
  2. 100
  3. 200
  4. 300
  5. 400
  6. 500
  7. 600
  8. 700yours
  9. 800
  10. 900
  11. 950
Tailwind's teal, the curve it follows
  1. 50
  2. 100
  3. 200
  4. 300
  5. 400
  6. 500
  7. 600
  8. 700
  9. 800
  10. 900
  11. 950
@theme {
  --color-brand-50: oklch(98.4% 0.011 190.671);
  --color-brand-100: oklch(95.6% 0.04 190.752);
  --color-brand-200: oklch(91.6% 0.075 190.377);
  --color-brand-300: oklch(86.4% 0.108 191.022);
  --color-brand-400: oklch(79% 0.118 191.863);
  --color-brand-500: oklch(72% 0.109 192.454);
  --color-brand-600: oklch(61.9% 0.092 194.655);
  --color-brand-700: oklch(53.3% 0.075 196.342);
  --color-brand-800: oklch(45.2% 0.061 198.167);
  --color-brand-900: oklch(39.3% 0.049 198.367);
  --color-brand-950: oklch(27.7% 0.036 202.475);
}

Use it where you work

The same engine in your editor, your terminal and your AI agent.

Agents often guess Tailwind shades, or add one --color-brand line instead of a palette. Connect the MCP server and ask: “Add a brand color #db4d53 to my theme.” Nothing to install:

Your agent
claude mcp add --transport http --scope user tailwindshades https://tailwindshades.bourhaouta.com/mcp

Prefer it local? Run npx -y tailwindshades-mcp as a stdio server. It's also in the MCP Registry as io.github.bourhaouta/tailwindshades.