This MCP server lets AI agents generate and look up Tailwind CSS color palettes, convert colors, and find closest Tailwind matches.
Generate a full Tailwind palette (50–950) from any CSS color, placing the input color exactly at its best-fit shade.
Output palettes for Tailwind v4, v3, v2, or v1 in formats like @theme, tailwind.config.js, plain CSS variables, runtime ‘live’ CSS, or Shopify theme code.
Find the closest default Tailwind color/shade for a given color, with distance and visibility info.
Retrieve Tailwind’s default colors for any major version, either whole colors or specific shades.
List available default Tailwind color names, shade ranges, and sample values.
Convert any CSS color to oklch(), hex, and rgb formatted like Tailwind.
Use the add_brand_color prompt to guide adding a brand color to a project’s Tailwind theme.
All tools are read-only.
Generates complete Tailwind CSS color palettes (shades 50–950) from any input color, matching the project's Tailwind version (v4, v3, v2, v1). Provides tools to produce ready-to-paste palette code (e.g. a v4 @theme block, a v3 tailwind.config.js entry, or CSS variables) and to find the closest existing Tailwind color class to a given color (e.g. #db4d53 → red-500).
This server has a remotely hosted endpoint. Open its connector listing for connection details, authentication requirements, and setup instructions:
An MCP server that gives AI agents real Tailwind CSS palettes, so they stop guessing shades. Works with Tailwind v4, v3, v2 and v1.
Ask your agent "Add a brand color #db4d53 to my theme", and it writes a full 50 to 950 palette in the project's Tailwind format, with #db4d53 exactly at brand-500. Same engine as the Tailwind Shades editor extension and tailwindshades.bourhaouta.com.
Connect your agent to https://tailwindshades.bourhaouta.com/mcp (Streamable HTTP, no API key).
Claude Code
claude mcp add --transport http --scope user tailwindshades https://tailwindshades.bourhaouta.com/mcpCursor (~/.cursor/mcp.json, or .cursor/mcp.json in a project)
{
"mcpServers": {
"tailwindshades": { "url": "https://tailwindshades.bourhaouta.com/mcp" }
}
}VS Code (.vscode/mcp.json)
{
"servers": {
"tailwindshades": { "type": "http", "url": "https://tailwindshades.bourhaouta.com/mcp" }
}
}Runs on your machine with npx, so nothing leaves it. Needs Node.js 20 or later.
Claude Code
claude mcp add --scope user tailwindshades -- npx -y tailwindshades-mcpCursor (~/.cursor/mcp.json, or .cursor/mcp.json in a project)
{
"mcpServers": {
"tailwindshades": { "command": "npx", "args": ["-y", "tailwindshades-mcp"] }
}
}VS Code (.vscode/mcp.json)
{
"servers": {
"tailwindshades": { "command": "npx", "args": ["-y", "tailwindshades-mcp"] }
}
}Other agents: use the URL above, or run npx -y tailwindshades-mcp as a stdio server. It's also in the MCP Registry as io.github.bourhaouta/tailwindshades.
Related MCP server: MCP Color Converter
All five tools are read-only.
generate_paletteA full palette from one color, ready to paste.
Input | Default |
| required: any CSS color ( |
| the closest Tailwind color, which replaces Tailwind's own palette, so the tool warns |
|
|
|
|
|
|
|
|
live is for colors picked at runtime (a user, a tenant, a CMS setting): CSS where every shade follows one variable, rebuilt in the browser. shopify adds the color setting and Liquid line for Shopify themes, where the merchant picks the color in the theme editor. See Colors picked at runtime.
Returns the code, plus the shades, the shade that holds the input color and the closest Tailwind color as structured data.
The code starts with a comment of readable pairs: text and background classes that pass WCAG AA (4.5:1), tested on the real shades. Agents use them for buttons and text, so a red brand gets bg-brand-600 text-white instead of the failing bg-brand-500 text-white:
/* Readable pairs (WCAG AA, 4.5:1 or more):
button bg-brand-600 text-white 5.09:1
text bg-white text-brand-600 5.09:1
badge bg-brand-100 text-brand-700 5.43:1
dark mode bg-brand-950 text-brand-400 5.33:1
avoid bg-brand-500 text-white 4.03:1 */find_closest_tailwind_colorThe Tailwind shade that looks most like a color, e.g. #db4d53 → red-500, with Tailwind's value, the distance, and whether the difference is visible. Agents use it to pick an existing class instead of an arbitrary value, or to decide a custom palette is needed.
get_tailwind_paletteTailwind's own default colors, exactly as Tailwind defines them: a whole color (blue) or one shade (slate-500), for Tailwind v4, v3, v2 or v1. Values are oklch() in v4 and hex before. Agents use it instead of writing Tailwind's default values from memory.
list_tailwind_colorsThe names of Tailwind's default colors for a version (26 in v4, including mauve, olive, mist and taupe), with the shades they have and each one's 500 value as a sample.
convert_colorAny CSS color as oklch(), hex and rgb, formatted like Tailwind. Handy when a project on Tailwind v4 needs one oklch() value rather than a whole palette.
add_brand_colorArguments: color and an optional name (default brand). It asks the agent to find the project's Tailwind version, call generate_palette, and paste the code into the theme. Clients like Claude Code show it as a slash command.
The package also exports createServer(), a fresh McpServer with all its tools and the prompt. Serve it with the MCP TypeScript SDK, for example over HTTP in any web-standard runtime (this is how the remote server above runs, as a Next.js route):
import { createMcpHandler } from '@modelcontextprotocol/server'
import { createServer } from 'tailwindshades-mcp'
const handler = createMcpHandler(createServer)
export const POST = (request: Request) => handler.fetch(request)tailwindshades-cli: the same palettes from the command line
MIT © Omar Bourhaouta
Converts any CSS color to oklch(), hex and rgb, formatted like Tailwind (oklch() is what Tailwind v4 uses). Colors outside a format are mapped into it: oklch() to Display P3 like Tailwind's palette, hex and rgb to sRGB. Use it for one value; to add a color with all its shades, call generate_palette instead.
Inputs: color (required). Returns: hex, rgb, oklch
Finds the shade in Tailwind's default palette that looks most like a given color, e.g. #db4d53 -> red-500. Use it to pick an existing Tailwind class (bg-red-500) instead of an arbitrary value. If the difference is visible, use generate_palette to add the exact color as a custom palette instead.
Inputs: color (required), tailwindVersion. Returns: name, input, shade, distance, +4 more
Generates a full Tailwind CSS palette (50-950) from one color, ready to paste. Call it whenever you add a color to a Tailwind theme (e.g. "add a brand color #db4d53"), instead of writing a single variable or inventing shades. The input color stays exactly at its best-fit shade, and the other shades follow the closest Tailwind color, so they look like Tailwind's own.
Inputs: color (required), name, plain, format, +3 more. Returns: code, name, avoid, format, +7 more
Looks up Tailwind's own default colors, exactly as Tailwind defines them: a whole color (e.g. "blue", all shades) or one shade (e.g. "slate-500"), for Tailwind v4, v3, v2 or v1. Use it instead of writing default Tailwind color values from memory. Values are oklch() in v4 and hex in older versions.
Inputs: name (required), tailwindVersion. Returns: name, shades, tailwindVersion
Lists the names of Tailwind's default colors for a Tailwind version (e.g. red, slate, mauve in v4), with the shades each one has and its 500 value as a sample. Use it to see which colors exist before calling get_tailwind_palette or picking a utility class.
Inputs: tailwindVersion. Returns: colors, shades, tailwindVersion
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 5 tools
Each tool has a clearly distinct purpose: generate custom palettes, convert individual colors, find nearest default shade, retrieve exact default palette values, and list default color names. The descriptions explicitly differentiate overlapping cases (e.g., convert_color vs. generate_palette, find_closest_tailwind_color vs. get_tailwind_palette).
All tool names use a consistent snake_case verb_noun pattern (generate_palette, convert_color, find_closest_tailwind_color, get_tailwind_palette, list_tailwind_colors). The convention is predictable and easy to scan.
Five tools are well-scoped for a focused Tailwind color utility server. Each tool covers a distinct operation and none feels redundant or excessive.
The surface covers the core lifecycle: listing, retrieving, converting, matching, and generating palettes. Minor gaps exist (e.g., no batch conversion or accessibility/contrast checking), but these are workaroundable and not critical for the stated purpose.
Contrast checks with fixes, OKLCH harmonies, palettes, color-blind previews and code export.
18 color tools: OKLCH, WCAG and APCA contrast fixes, palettes, gradients, color blindness, tokens.
Convert colours between hex, RGB, HSL, OKLCH and CMYK, and compute harmonies.
WCAG color contrast checks, nearest accessible color, CSS color conversion and palette pair checks.