Tailwind Shades generates a complete Tailwind CSS palette (11 shades from 50 to 950) from any color, supporting Tailwind v4, v3, v2, and v1. It is available in three forms: a VS Code extension, a command-line tool (CLI), and an MCP server for AI agents, plus a browser-based online demo.
In terms of purpose, it solves the problem of quickly generating custom brand palettes for Tailwind projects, avoiding the unnatural shades that result from simply blending manually from white to black.
Main capabilities include:
- Generate a palette in the editor for any color value (hex, rgb(), hsl(), oklch(), or CSS color name) by placing the cursor on the color or selecting it.
- Automatically suggests the closest built-in Tailwind color name, and also allows custom names (such as brand).
- The palette generation algorithm references the lightness, saturation, and hue variations of Tailwind's own colors, computing in the OKLCH color space to make the shades visually even; the input color is not altered but placed at the most suitable shade (a light color may become 200 rather than 500).
- The Tailwind version can be automatically detected per project (first from package.json dependencies, then from markers such as @import "tailwindcss" and @theme in CSS files, then from tailwind.config.js, etc.), and the corresponding version's default palette is used as reference; if undetected, v4 is used by default.
- Supports Tailwind v4 CSS files (adding only variables if already inside an @theme block) and Tailwind v3 tailwind.config.js.
- The optional readablePairs adds a comment at the beginning of the palette noting readability pairings on the actual shades.
Usage:
- VS Code extension: In the editor, press Cmd+K Cmd+G (macOS) or Ctrl+K Ctrl+G, or run "Tailwind Shades: Generate color palette" from the command palette. If there is no color under the cursor, the extension prompts for input.
- CLI: Output the color palette to stdout via npx tailwindshades-cli <color> -o css, which can be redirected and appended to a file; -o live generates a dynamic palette based on CSS relative color (requires Chrome 119+, Safari 18+, Firefox 128+, with a static fallback); -o shopify generates Shopify theme editor settings.- MCP server: For use by AI coding agents, providing five tools: generate_palette (generates palette code according to the project's Tailwind version), find_closest_tailwind_color (finds the closest Tailwind class, such as #db4d53 corresponding to red-500, and determines whether the difference is visible), get_tailwind_palette (retrieves Tailwind default color definitions), list_tailwind_colors (lists the default color names for a given version), convert_color (converts any color to oklch(), hex, and rgb). There is also an add_brand_color prompt, which appears as a slash command in Claude Code. It can be accessed via https://tailwindshades.bourhaouta.com/mcp remote connection without installation; it can also be run locally as a stdio server via npx -y tailwindshades-mcp. It is registered in the MCP Registry as io.github.bourhaouta/tailwindshades.
- Browser demo: Visit tailwindshades.bourhaouta.com.
Applicable scenarios: front-end developers, design system maintainers, projects using Tailwind CSS, and scenarios where AI coding assistants need to avoid guessing colors and correctly generate brand palettes.
Limitations and notes: The CLI's live output depends on browser support for CSS relative color (Chrome 119+, Safari 18+, Firefox 128+); other browsers use the static fallback. The local MCP method must be run via npx. The project is under the MIT license, and the author is Omar Bourhaouta. More detailed configuration for each agent can be found in the README of the corresponding package.
