Provides a tool for finding the nearest Tailwind CSS palette colors to any CSS color, with configurable color space comparison and filtering options.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Nearest Tailwind Colors find the 3 closest Tailwind colors to #3b82f6"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
nearest-tailwind-colors-mcpModel Context Protocol (MCP) server that exposes a single tool for finding the nearest Tailwind CSS palette colors to any CSS color.
Requires Node 18+.
Install deps: npm install.
Build the project: npm run build.
Related MCP server: MCP Color Converter
All hosts should point to the built entry: /absolute/path/to/nearest-tailwind-colors-mcp/dist/index.js.
JSON-based hosts (Claude Desktop, Cursor, VS Code MCP extension): add this to the relevant settings.json/claude_desktop_config.json, then restart/reload:
{
"mcpServers": {
"nearest-tailwind-colors": {
"command": "node",
"args": ["/absolute/path/to/nearest-tailwind-colors-mcp/dist/index.js"]
}
}
}Claude Desktop: edit claude_desktop_config.json.
Cursor: Settings → search "Model Context Protocol" → "Edit in settings.json".
VS Code: User/Workspace settings.json with the MCP/Claude extension installed.
ChatGPT Codex (CLI and VS Code extension): add to ~/.codex/config.toml (wrap in your shell if you need nvm/fnm to enforce node >= 18):
[mcp_servers.nearest_tailwind_colors]
command = "node"
args = ["/absolute/path/to/nearest-tailwind-colors-mcp/dist/index.js"]# with nvm
[mcp_servers.nearest_tailwind_colors]
command = "zsh"
args = [
"-lc",
"export NVM_DIR=\"$HOME/.nvm\"; source \"$NVM_DIR/nvm.sh\"; nvm use 20 >/dev/null; node /absolute/path/to/nearest-tailwind-colors-mcp/dist/index.js",
]nearest_tailwind_colors: finds the closest Tailwind colors to a given CSS color.
color (string, required): any CSS color (#fff, #fafafa, rgb(...), hsl(...), named colors, etc.).
n (int, optional): number of colors to return (default 5, max 50).
excludeColors (string[], optional): Tailwind color names to skip (e.g. ["white", "black", "neutral-950"]).
space (enum, optional): comparison color space (cmyk, gl, hcg, hcl, hsi, hsl, hsv, lab, lch, oklab, oklch, rgb; default lab).
Prompt: "What are the 5 tailwind colors closest to the youtube logo?"
Response:
Closest Tailwind matches to YouTube red (`#ff0000`):
- red-600 — `#dc2626`
- orange-600 — `#ea580c`
- red-500 — `#ef4444`
- red-700 — `#b91c1c`
- orange-700 — `#c2410c`Given any CSS color, find the nearest Tailwind CSS palette colors.
| Name | Required | Description | Default |
|---|---|---|---|
| color | Yes | Any CSS color (e.g. #fff, #fafafa, rgb(...), hsl(...), or named color). | |
| n | No | Number of nearest colors to return (default 5 if not provided). | |
| excludeColors | No | List of Tailwind color names to exclude, e.g. ['white', 'black', 'neutral-950'] (default to none if not provided). | |
| space | No | Color space for comparison (default to 'lab' if not provided). 'lab' is recommended for most use cases. |
| Name | Required | Description |
|---|---|---|
| results | Yes |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden of behavioral disclosure but offers minimal information. It doesn't explain what 'nearest' means algorithmically, whether the tool is deterministic, what the output format looks like (though an output schema exists), or any performance characteristics like rate limits or computational cost.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without any redundant information. It's front-loaded and wastes no words, making it easy for an agent to parse quickly.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's moderate complexity (4 parameters, color matching logic) and the presence of both a detailed input schema and an output schema, the description is reasonably complete. It clearly defines the core functionality, though it could benefit from more behavioral context given the lack of annotations.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema description coverage is 100%, so the schema already documents all parameters thoroughly. The description adds no additional parameter semantics beyond what's in the schema, such as explaining why 'lab' is the default color space or how exclusion affects results. This meets the baseline for high schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the specific action ('find the nearest Tailwind CSS palette colors') and the input ('given any CSS color'), making the purpose immediately understandable. It distinguishes this as a color matching tool for the Tailwind CSS framework, which is a well-defined domain.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives or any contextual prerequisites. While there are no sibling tools mentioned, it doesn't address potential use cases or limitations, leaving the agent to infer usage entirely from the tool name and parameters.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.0.0nearest_tailwind_colorsScored across 1 tool
With only one tool, there is no possibility of ambiguity or overlap between tools. The tool has a single, clearly defined purpose.
A single tool inherently has perfect naming consistency. The tool name follows a clear verb_noun pattern (nearest_tailwind_colors).
One tool is too few for the apparent scope of a Tailwind color utility server. A complete surface would likely include tools for listing palettes, searching colors, or converting between formats, making this feel thin and incomplete.
The server's domain appears to be Tailwind color utilities, but with only a nearest-color lookup tool, there are significant gaps. Missing operations might include listing available Tailwind colors, getting color details, or validating color inputs, which limits agent workflows.
Convert colours between hex, RGB, HSL, OKLCH and CMYK, and compute harmonies.
Search Tailwind CSS and React themes, read their tokens and source files, and get download URLs.
Every UK paint colour, matched across brands by ΔE and priced; palettes, planner projects, trends.
Color API MCP — wraps thecolorapi.com (free, no auth)