Tailwind Shades

Generate a Tailwind palette

generate_palette

Read-onlyIdempotent

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.

Input Schema

TableJSON Schema

Name	Required	Description
`name`	No	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
`color`	Yes	Any CSS color: hex (#db4d53), rgb(), hsl(), oklch() or a named color
`plain`	No	With output live or shopify: a plain :root block instead of @theme, for projects without Tailwind (like the Dawn theme)
`format`	No	Color format. Defaults to oklch for v4 and hex for older versions
`output`	No	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`	No	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`	No	The project's Tailwind CSS major version. Defaults to 4

Output Schema

TableJSON Schema

Name	Required	Description
`code`	Yes	The palette as code, ready to paste
`name`	Yes
`avoid`	No	White text on the input color, when it fails WCAG AA
`format`	Yes
`output`	Yes
`shades`	Yes
`inputShade`	Yes	Shade that holds the input color unchanged, e.g. 500
`readablePairs`	No	Text and background pairs that pass WCAG AA. Use them for text and buttons in this color. Not for live and shopify outputs, whose shades change at runtime
`tailwindVersion`	Yes
`closestTailwindColor`	Yes	Tailwind color whose curve the palette follows
`replacesTailwindColor`	Yes	True when the code replaces a default Tailwind palette (default color name, theme or config output)

Schema Changelog

Changes observed during successful MCP inspections.

Changed2 schema fields changedOct 13, 2026

addedOutput schema / properties / avoid

Added value: +{
+  "additionalProperties": false,
+  "description": "White text on the input color, when it fails WCAG AA",
+  "properties": {
+    "classes": {
+      "type": "string"
+    },
+    "ratio": {
+      "type": "number"
+    }
+  },
+  "required": [
+    "classes",
+    "ratio"
+  ],
+  "type": "object"
+}

addedOutput schema / properties / readablePairs

Added value: +{
+  "description": "Text and background pairs that pass WCAG AA. Use them for text and buttons in this color. Not for live and shopify outputs, whose shades change at runtime",
+  "items": {
+    "additionalProperties": false,
+    "properties": {
+      "classes": {
+        "description": "e.g. \"bg-brand-600 text-white\"",
+        "type": "string"
+      },
+      "level": {
+        "enum": [
+          "AA",
+          "AAA"
+        ],
+        "type": "string"
+      },
+      "ratio": {
+        "description": "WCAG contrast ratio, 4.5 or more",
+        "type": "number"
+      },
+      "use": {
+        "description": "dark: text in dark mode",
+        "enum": [
+          "button",
+          "text",
+          "badge",
+          "dark"
+        ],
+        "type": "string"
+      }
+    },
+    "required": [
+      "use",
+      "classes",
+      "ratio",
+      "level"
+    ],
+    "type": "object"
+  },
+  "type": "array"
+}

Changed4 schema fields changedOct 7, 2026

changedInput schema / properties / output / description

Previous value: -"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. Defaults to theme for v4 and config for older versions"New value: +"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"

changedInput schema / properties / output / enum

Previous value: -[
-  "theme",
-  "config",
-  "css"
-]New value: +[
+  "theme",
+  "config",
+  "css",
+  "live",
+  "shopify"
+]

addedInput schema / properties / plain

Added value: +{
+  "description": "With output live or shopify: a plain :root block instead of @theme, for projects without Tailwind (like the Dawn theme)",
+  "type": "boolean"
+}

addedInput schema / properties / semantic

Added value: +{
+  "description": "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",
+  "type": "boolean"
+}

First observedOct 1, 2026

TDQS

A4.3/5.0

Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations already declare readOnlyHint, idempotentHint and openWorldHint=false, so the safety profile is covered. The description adds a real behavioral guarantee beyond that: the input color is pinned to its best-fit shade and the remaining shades track the closest Tailwind color, producing Tailwind-consistent output. It stops short of describing any limits or edge cases.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Two sentences, zero filler, and the purpose is front-loaded ahead of the usage rule. The behavioral nuance about shade matching is packed into the tail of the second sentence rather than a separate paragraph.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

An output schema exists so return values need no explanation, annotations carry the safety profile, and all 7 parameters are documented in the schema. Purpose, invocation trigger, and output-quality expectation are all present — nothing an agent needs is missing.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, and the parameter descriptions themselves are unusually rich (output modes, defaults, name-replacement caveat). The description adds no parameter-level information of its own, so this sits at the baseline for fully documented schemas.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

States a specific verb and resource with scope: 'Generates a full Tailwind CSS palette (50-950) from one color, ready to paste.' The 'from one color' framing cleanly separates it from get_tailwind_palette (retrieval) and find_closest_tailwind_color (lookup) without needing to name them.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Gives an explicit trigger ('Call it whenever you add a color to a Tailwind theme') with a concrete example, plus a negative case ('instead of writing a single variable or inventing shades'). It does not name the sibling tools that cover the cases this tool is not for, so routing is clear but not complete.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

All Tailwind Shades tools Inspect

Try in Browser

Shareable, User-Owned Context BackendPeople, applications, and agents read, write, and coordinate together in one context lake. Reach it over MCP, a CLI, a Python SDK, or REST.fulcradynamics.comAd

Glama MCP Gateway

Add one secure layer between your agents and this server.