Tailwind Shades
Generate full, perceptually balanced Tailwind CSS color palettes from any color with automatic version detection and OKLCH color spacing.
Tailwind Shades produces complete 50–950 color palettes from any input color, matching Tailwind's native shade progressions rather than relying on simple tinting with black and white. Powered by OKLCH color calculations, it ensures your exact color is preserved at its optimal shade while adapting to Tailwind versions 1 through 4. Available as an editor extension, command-line utility, and an MCP server, it equips developers and AI coding agents with tools to generate theme tokens, discover the closest default Tailwind colors, and identify accessible WCAG AA contrast pairs.
主な機能
01Generates complete 50–950 color scales in OKLCH, hex, or RGB formats while preserving the exact input color
02Calculates lightness, chroma, and hue steps based on Tailwind's native palette dynamics using OKLCH math
03Provides MCP server tools allowing AI agents to query palettes, convert color formats, and find closest Tailwind matches
04Automatically detects Tailwind CSS versions (v1 through v4) and outputs valid @theme blocks, config objects, or CSS variables
05Calculates WCAG AA compliant text and background contrast combinations automatically
0678 GitHub stars
ユースケース
01Integrating custom brand colors into Tailwind CSS v3 or v4 projects without manual color stepping
02Enabling AI coding assistants to reliably generate accurate Tailwind color tokens instead of guessing hex codes
03Auditing and selecting accessible background and foreground color pairings for UI design