About PickShade color tools
PickShade is an MCP server for AI assistants and designers working with color, from format conversion and accessibility checks to palette creation and design-token export. Its deterministic calculations follow CSS Color 4 and run locally.
Key features
- 01Parse and convert color formats
- 02Check and fix WCAG and APCA contrast
- 03Audit palettes and color-vision conflicts
- 04Generate scales, palettes, and gradients
- 05Build systems and export tokens
Use cases
- 01Check readability of interface text and backgrounds
- 02Create light and dark themes from a brand color
- 03Review palettes for color-vision accessibility
- 04Export color tokens for CSS or Tailwind
MCP support
The MCP server exposes tools for color parsing, conversion, contrast checks, palette generation, and token export, along with related prompts. It can be used through a hosted endpoint or run locally over stdio.
Configuration
Remote servers need no local install. Pick your client, then copy the config or install in one click.
https://pickshade.com/api/mcpclaude mcp add --transport http com-pickshade-pickshade https://pickshade.com/api/mcp{"mcpServers":{"com-pickshade-pickshade":{"type":"http","url":"https://pickshade.com/api/mcp"}}}Open in Cursor{"servers":{"com-pickshade-pickshade":{"type":"http","url":"https://pickshade.com/api/mcp"}}}Open in VS Code{"mcpServers":{"com-pickshade-pickshade":{"type":"http","url":"https://pickshade.com/api/mcp"}}}{"mcpServers":{"com-pickshade-pickshade":{"serverUrl":"https://pickshade.com/api/mcp"}}}Run commands in a terminal; paste JSON into the client’s MCP config and restart. Servers that need sign-in will prompt on first connect.
Tools
18| Parameter | Type | Required | Description |
|---|---|---|---|
| color | string | Yes | Any color: #ff5733, rgb(255 87 51), hsl(11 100% 60%), oklch(68% 0.21 34), a CSS or common name like navy, or a Tailwind class like sky-500 |
| locale | enum | No | Language for color namesen | ru |
Details
From the project READMEPickShade MCP server
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
Use the hosted server
No install. Streamable HTTP endpoint:
https://pickshade.com/api/mcp
Claude Code:
claude mcp add --transport http pickshade https://pickshade.com/api/mcp
Cursor, VS Code and other clients that read mcpServers:
{
"mcpServers": {
"pickshade": { "url": "https://pickshade.com/api/mcp" }
}
}
Run locally over stdio
{
"mcpServers": {
"pickshade": { "command": "npx", "args": ["-y", "@pickshade/mcp"] }
}
}
Requires Node.js 20 or newer.
Tools
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 |
|---|---|
parse_color | Every format, the closest name and Tailwind class, gamut and the better text color for any color |
convert_color | HEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab, OKLCH, Display P3, Rec. 2020, XYZ, SwiftUI, Flutter |
find_colors | Turns words like "sage" or "dusty rose" into real HEX values |
check_contrast | WCAG 2 ratio with AA and AAA levels, and APCA Lc with the usage it allows |
fix_contrast | The closest color that reaches a contrast target, changing only OKLCH lightness so the hue stays |
audit_palette | Checks every text and background pair, color blindness conflicts and out-of-gamut colors in a palette |
check_gamut | Whether a color fits sRGB, Display P3 and Rec. 2020 |
nearest_names | Closest named colors, CSS keywords and Tailwind classes by perceptual distance |
compare_colors | CIEDE2000 and deltaE OK difference with a plain verdict, lightness, chroma and hue shift |
generate_scale | An 11-step 50–950 scale in OKLCH with even perceived lightness, the shape of Tailwind palettes |
tints_shades | Tints, shades and tones of a color |
harmonies | Complementary, split-complementary, analogous, triadic, tetradic, square and monochromatic in OKLCH |
mix_colors | Mixes two colors in a chosen space, like CSS color-mix() |
make_gradient | CSS gradients interpolated in OKLab or OKLCH, without the gray middle |
generate_palette | Harmonious palettes in OKLCH, repeatable with a seed |
simulate_cvd | Protanopia, deuteranopia, tritanopia and achromatopsia, with pairs that become hard to tell apart |
export_tokens | CSS variables, Tailwind v4 @theme, SCSS, JSON, DTCG tokens, JS arrays or an SVG swatch strip |
build_system | A full color system from one brand color: scales, light and dark roles, shadcn/ui and Tailwind export |
Prompts
accessible_theme: light and dark themes from a brand color with every text pair checkedaudit_colors: readable pairs, color blindness conflicts and gamut for a list of colorsdescribe_color: a color explained in plain words with its values, name, contrast and matches
REST API
The same tools over HTTP, JSON in and out: pickshade.com/api, OpenAPI 3.1 at https://pickshade.com/api/v1/openapi.json.
License
MIT. Color names include data from meodai/color-names (MIT); Tailwind palette values are from Tailwind CSS (MIT).
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.