Tailwind Shades

Measured conclusion: Deep-tested. L2 outcome: tools_ok.

Tailwind CSS palettes (50-950) from any color, the closest Tailwind color, and Tailwind's defaults

Add to your agent

Copy this into your MCP client config:

{
  "mcpServers": {
    "Tailwind Shades": {
      "url": "https://tailwindshades.bourhaouta.com/mcp",
      "transport": "streamable-http"
    }
  }
}

Measured tools (5)

• generate_palette read-only

  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.

  Parameters:

  • color (required) — string — Any CSS color: hex (#db4d53), rgb(), hsl(), oklch() or a named color
  • name — string — Color name used in the code, e.g. "brand". Defaults to the closest Tailwind color, which replaces Tailwind's own palette of that name (e.g. red), so pass a name unless that is what the user wants
  • plain — boolean — With output live or shopify: a plain :root block instead of @theme, for projects without Tailwind (like the Dawn theme)
  • format — string — Color format. Defaults to oklch for v4 and hex for older versions
  • output — string — theme: a v4 @theme block for the main CSS file. config: an object for theme.extend.colors in tailwind.config.js. css: plain CSS variables. live (v4 only): for a color picked at runtime (user, tenant or CMS setting): CSS where every shade follows one variable, --color-<name>, rebuilt in the browser with relative colors, with this palette as the fallback. shopify (v4 only): live, plus a settings_schema.json color setting and the Liquid line for snippets/css-variables.liquid, for Shopify themes where the merchant picks the color in the theme editor. Each part says which file it goes in. Defaults to theme for v4 and config for older versions
  • semantic — boolean — With output live or shopify: also add --color-<name>-foreground for text on the color: white or the darkest shade, whichever contrasts more, following the runtime color
  • tailwindVersion — number — The project's Tailwind CSS major version. Defaults to 4

  Hints: read-only yes · destructive not declared · idempotent yes · open-world no

• find_closest_tailwind_color read-only

  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.

  Parameters:

  • color (required) — string — Any CSS color: hex (#db4d53), rgb(), hsl(), oklch() or a named color
  • tailwindVersion — number — The project's Tailwind CSS major version. Defaults to 4

  Hints: read-only yes · destructive not declared · idempotent yes · open-world no

• get_tailwind_palette read-only

  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.

  Parameters:

  • name (required) — string — A default Tailwind color, like "blue", or one shade of it, like "blue-500"
  • tailwindVersion — number — The project's Tailwind CSS major version. Defaults to 4

  Hints: read-only yes · destructive not declared · idempotent yes · open-world no

• list_tailwind_colors read-only

  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.

  Parameters:

  • tailwindVersion — number — The project's Tailwind CSS major version. Defaults to 4

  Hints: read-only yes · destructive not declared · idempotent yes · open-world no

• convert_color read-only

  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.

  Parameters:

  • color (required) — string — Any CSS color: hex (#db4d53), rgb(), hsl(), oklch() or a named color

  Hints: read-only yes · destructive not declared · idempotent yes · open-world no

Publisher website Repository

Measured by MCPYP probing. Untested fields are omitted, never estimated. Listing is always free; MCPYP never proxies calls or stores user tokens.