Provides color conversion and token export for CSS, including CSS variables, gradients, and CSS Color 4 syntaxes such as OKLCH and color-mix().
Converts colors to Flutter-compatible color values.
Builds full color systems with shadcn/ui and Tailwind exports, including light and dark theme roles.
Exports color tokens as an SVG swatch strip.
Supports Tailwind CSS classes and exports Tailwind v4 @theme tokens, and generates Tailwind-style color scales.
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., "@PickShade MCP Server check the contrast of #777 on white and fix it to pass WCAG AA"
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.
Color tools for AI assistants: convert any color, find colors by name, check and fix WCAG 2 and APCA contrast, audit palettes for accessibility and color blindness, build gradients, scales and full design systems, export tokens for CSS, Tailwind v4, SCSS and DTCG.
All math follows CSS Color 4 (OKLCH, OKLab, Display P3, Rec. 2020) and runs locally and deterministically. No API key, no account, no telemetry.
Website and docs: pickshade.com/mcp
No install. Streamable HTTP endpoint:
https://pickshade.com/api/mcpClaude Code:
claude mcp add --transport http pickshade https://pickshade.com/api/mcpCursor, VS Code and other clients that read mcpServers:
{
"mcpServers": {
"pickshade": { "url": "https://pickshade.com/api/mcp" }
}
}Related MCP server: MCP Color Converter
{
"mcpServers": {
"pickshade": { "command": "npx", "args": ["-y", "@pickshade/mcp"] }
}
}Requires Node.js 20 or newer.
Every tool accepts colors as HEX, rgb(), hsl(), oklch(), CSS names like navy, common names like royal blue or бордовый, and Tailwind classes like sky-500.
Tool | What it does |
| Every format, the closest name and Tailwind class, gamut and the better text color for any color |
| HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab, OKLCH, Display P3, Rec. 2020, XYZ, SwiftUI, Flutter |
| Turns words like "sage" or "dusty rose" into real HEX values |
| WCAG 2 ratio with AA and AAA levels, and APCA Lc with the usage it allows |
| The closest color that reaches a contrast target, changing only OKLCH lightness so the hue stays |
| Checks every text and background pair, color blindness conflicts and out-of-gamut colors in a palette |
| Whether a color fits sRGB, Display P3 and Rec. 2020 |
| Closest named colors, CSS keywords and Tailwind classes by perceptual distance |
| CIEDE2000 and deltaE OK difference with a plain verdict, lightness, chroma and hue shift |
| An 11-step 50–950 scale in OKLCH with even perceived lightness, the shape of Tailwind palettes |
| Tints, shades and tones of a color |
| Complementary, split-complementary, analogous, triadic, tetradic, square and monochromatic in OKLCH |
| Mixes two colors in a chosen space, like CSS |
| CSS gradients interpolated in OKLab or OKLCH, without the gray middle |
| Harmonious palettes in OKLCH, repeatable with a seed |
| Protanopia, deuteranopia, tritanopia and achromatopsia, with pairs that become hard to tell apart |
| CSS variables, Tailwind v4 |
| A full color system from one brand color: scales, light and dark roles, shadcn/ui and Tailwind export |
accessible_theme: light and dark themes from a brand color with every text pair checked
audit_colors: readable pairs, color blindness conflicts and gamut for a list of colors
describe_color: a color explained in plain words with its values, name, contrast and matches
The same tools over HTTP, JSON in and out: pickshade.com/api, OpenAPI 3.1 at https://pickshade.com/api/v1/openapi.json.
Package | Purpose |
| Color math: parsing every CSS color syntax, conversions between sRGB, Display P3, Rec. 2020, Lab, LCH, OKLab and OKLCH, gamut mapping, WCAG 2 and APCA contrast, CIEDE2000 and deltaE OK, scales, harmonies and color vision simulation |
| Color names (CSS keywords, common names in 30 languages, an extended list), the Tailwind CSS palette |
| Code generators: CSS variables, Tailwind v4 |
| The 18 tools with their input schemas, shared by the MCP server and the REST API |
| The MCP server ( |
pnpm install
pnpm check
pnpm buildThe bundled server is written to packages/mcp/dist.
MIT. Color names include data from meodai/color-names (MIT); Tailwind palette values are from Tailwind CSS (MIT).
This server cannot be deployed
Convert colours between hex, RGB, HSL, OKLCH and CMYK, and compute harmonies.
Solve, audit and simulate colorblind-safe chart palettes. WCAG contrast, OKLab ΔE. Read-only.
Give your agent a real design system: tokens, measured WCAG contrast, and rules to follow.
AI-agent design tools: fonts, font recognition, palettes, color naming, contrast, code, SVG, CSS.