tailwindshades-mcp

Find the closest Tailwind color

find_closest_tailwind_color

Read-onlyIdempotent

Finds the Tailwind default palette shade matching any CSS color, so you can use a standard class like bg-red-500 instead of an arbitrary value. If visibly different, create a custom palette.

Instructions

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.

Input Schema

TableJSON Schema

Name	Required	Description	Default
`color`	Yes	Any CSS color: hex (#db4d53), rgb(), hsl(), oklch() or a named color
`tailwindVersion`	No	The project's Tailwind CSS major version. Defaults to 4

Output Schema

TableJSON Schema

Name	Required	Description
`name`	Yes	Tailwind color name, e.g. "red"
`input`	Yes	The input color
`shade`	Yes	Closest shade, e.g. 500
`distance`	Yes	OKLab distance: 0 is identical, under 0.02 is hard to see
`className`	Yes	Color part of a utility class, e.g. "red-400" for bg-red-400
`tailwindValue`	Yes	Tailwind's value for that shade
`tailwindVersion`	Yes
`visiblyDifferent`	Yes	True when the Tailwind shade looks different from the input

Schema Changelog

Changes observed during successful MCP inspections.

AddedOct 1, 2026

TDQS

A4.5/5.0

Behavior4/5

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

Annotations already declare readOnly/idempotent/closed-world, and the description adds the key behavioral nuance that this is an approximate nearest-match (not an exact lookup), plus the practical consequence that a visible difference should route to generate_palette. It doesn't discuss tolerance thresholds or return shape, but the output schema covers the latter.

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?

Three short sentences: purpose+example first, then the preferred use, then the fallback. Every sentence carries distinct decision-relevant information with no filler.

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?

With an output schema present, return values need not be described. For a two-parameter lookup tool, the description supplies purpose, example, and the sibling routing rule, leaving nothing an agent needs to invoke it correctly.

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%, so both parameters (color formats, tailwindVersion default 4) are already documented in the schema. The description's example illustrates the color input but adds no syntax or version-selection guidance beyond the schema. Baseline 3 applies.

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 ('finds the shade in Tailwind's default palette most like a given color') and grounds it with a concrete input→output example (#db4d53 -> red-500). This clearly separates it from generate_palette, which creates new colors rather than matching existing ones.

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

Usage Guidelines5/5

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

Explicitly states when to use it ('to pick an existing Tailwind class instead of an arbitrary value') and when to prefer the alternative ('if the difference is visible, use generate_palette to add the exact color'). The switching condition is concrete, not implied.

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

Deploy Server