Tailwind Shades MCP server

This is a small helper that gives your AI the ability to turn one color into a whole Tailwind color palette, from the lightest shade to the darkest. It is made for people who work on websites with Tailwind and want their colors to look right without guessing. If you have ever typed a color into a design tool and wished you had all the matching shades, this is for you.

What this MCP server does

You ask your AI something like add a brand color to my theme. The AI uses this helper, which talks to the Tailwind Shades service. The service takes your color and works out a full set of shades, from 50 to 950, using the same color space Tailwind v4 uses. Then you get back the exact code to paste into your project, already formatted for the Tailwind version you are using.

What you can do with it

• Generate a full Tailwind palette from any color
• Find the closest Tailwind color to a color you have
• Look up Tailwind's own default colors so your AI does not guess them
• List the names of Tailwind's default colors for a version
• Convert any color to oklch, hex or rgb
• Add a brand color to your theme with one request

Try asking your AI

• “Add a brand color #db4d53 to my theme”
• “What is the closest Tailwind color to #db4d53?”
• “Give me the Tailwind slate-500 color exactly as Tailwind defines it”
• “Convert #db4d53 to oklch”

What it gives back to you

You get back the palette code itself, ready to paste into your CSS or config file. For a closest color question, you get a name like red-500 and a note about whether the difference is visible. For a conversion, you get the same color written in oklch, hex and rgb. Everything shows up in the chat as plain text you can copy.

Before you start

Who it's for

Web developers and designers who use Tailwind CSS and want their colors to be consistent without doing the math by hand.

Jobs it suits