Tailwind Shades

Working · 2.4 s

io.github.bourhaouta/tailwindshadesv1.6.0

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

Developer Tools

Source Website Registry entry

Maintain this server? Claim it

Try it

Call this server's tools from your browser. Nothing to install.

https://tailwindshades.bourhaouta.com/mcp

Requests go through mcptry because browsers can't call most MCP servers directly. Header values are sent to the server for that request only and are never stored or logged.

Tool list from our last check. Connect live to refresh it.

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.

colorstring, required

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

Tools (5)

convert_color

read-only

Argument	Type	Description
color*	string	Any CSS color: hex (#db4d53), rgb(), hsl(), oklch() or a named color

Input schema (JSON)

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "color"
  ],
  "properties": {
    "color": {
      "type": "string",
      "description": "Any CSS color: hex (#db4d53), rgb(), hsl(), oklch() or a named color"
    }
  }
}

find_closest_tailwind_color

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.

read-only

Argument	Type	Description
color*	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

Input schema (JSON)

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "color"
  ],
  "properties": {
    "color": {
      "type": "string",
      "description": "Any CSS color: hex (#db4d53), rgb(), hsl(), oklch() or a named color"
    },
    "tailwindVersion": {
      "enum": [
        4,
        3,
        2,
        1
      ],
      "type": "number",
      "description": "The project's Tailwind CSS major version. Defaults to 4"
    }
  }
}

generate_palette

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.

read-only

Argument	Type	Description
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
color*	string	Any CSS color: hex (#db4d53), rgb(), hsl(), oklch() or a named color
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

get_tailwind_palette

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.

read-only

Argument	Type	Description
name*	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

Input schema (JSON)

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "required": [
    "name"
  ],
  "properties": {
    "name": {
      "type": "string",
      "description": "A default Tailwind color, like \"blue\", or one shade of it, like \"blue-500\""
    },
    "tailwindVersion": {
      "enum": [
        4,
        3,
        2,
        1
      ],
      "type": "number",
      "description": "The project's Tailwind CSS major version. Defaults to 4"
    }
  }
}

list_tailwind_colors

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.

read-only

Argument	Type	Description
tailwindVersion	number	The project's Tailwind CSS major version. Defaults to 4

Input schema (JSON)

{
  "type": "object",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "properties": {
    "tailwindVersion": {
      "enum": [
        4,
        3,
        2,
        1
      ],
      "type": "number",
      "description": "The project's Tailwind CSS major version. Defaults to 4"
    }
  }
}

{ "type": "object", "$schema": "https://json-schema.org/draft/2020-12/schema", "required": [ "color" ], "properties": { "name": { "type": "string", "pattern": "^[a-z][a-z0-9-]*$", "description": "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": { "type": "string", "description": "Any CSS color: hex (#db4d53), rgb(), hsl(), oklch() or a named color" }, "plain": { "type": "boolean", "description": "With output live or shopify: a plain :root block instead of @theme, for projects without Tailwind (like the Dawn theme)" }, "format": { "enum": [ "oklch", "hex", "rgb" ], "type": "string", "description": "Color format. Defaults to oklch for v4 and hex for older versions" }, "output": { "enum": [ "theme", "config", "css", "live", "shopify" ], "type": "string", "description": "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": { "type": "boolean", "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" }, "tailwindVersion": { "enum": [ 4, 3, 2, 1 ], "type": "number", "description": "The project's Tailwind CSS major version. Defaults to 4" } } }