English Français العربية

PickShade color tools

السجل الرسمي أخرى

18 color tools: OKLCH, WCAG and APCA contrast fixes, palettes, gradients, color blindness, tokens.

الشيفرة المصدرية الموقع التوثيق

التثبيت

أضف هذا إلى إعدادات MCP في عميلك (Claude Desktop: claude_desktop_config.json، وCursor: ‏.cursor/mcp.json، ويستخدم VS Code وغيره الصيغة نفسها «mcpServers»).

Remote (streamable-http)
Claude Code 
claude mcp add --transport http pickshade-color-tools 'https://pickshade.com/api/mcp'
إعداد JSON (Claude Desktop وCursor وVS Code) 
{
    "mcpServers": {
        "pickshade-color-tools": {
            "type": "http",
            "url": "https://pickshade.com/api/mcp"
        }
    }
}

التوثيق

مأخوذ من ملف README للمشروع على GitHub ويُحدَّث أسبوعيًا. تفتح الروابط على GitHub.

المحتويات
  1. PickShade MCP server
  2. Use the hosted server
  3. Run locally over stdio
  4. Tools
  5. Prompts
  6. REST API
  7. What is inside
  8. Develop
  9. License

PickShade 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.

ToolWhat it does
parse_colorEvery format, the closest name and Tailwind class, gamut and the better text color for any color
convert_colorHEX, RGB, HSL, HSV, HWB, CMYK, Lab, LCH, OKLab, OKLCH, Display P3, Rec. 2020, XYZ, SwiftUI, Flutter
find_colorsTurns words like "sage" or "dusty rose" into real HEX values
check_contrastWCAG 2 ratio with AA and AAA levels, and APCA Lc with the usage it allows
fix_contrastThe closest color that reaches a contrast target, changing only OKLCH lightness so the hue stays
audit_paletteChecks every text and background pair, color blindness conflicts and out-of-gamut colors in a palette
check_gamutWhether a color fits sRGB, Display P3 and Rec. 2020
nearest_namesClosest named colors, CSS keywords and Tailwind classes by perceptual distance
compare_colorsCIEDE2000 and deltaE OK difference with a plain verdict, lightness, chroma and hue shift
generate_scaleAn 11-step 50–950 scale in OKLCH with even perceived lightness, the shape of Tailwind palettes
tints_shadesTints, shades and tones of a color
harmoniesComplementary, split-complementary, analogous, triadic, tetradic, square and monochromatic in OKLCH
mix_colorsMixes two colors in a chosen space, like CSS color-mix()
make_gradientCSS gradients interpolated in OKLab or OKLCH, without the gray middle
generate_paletteHarmonious palettes in OKLCH, repeatable with a seed
simulate_cvdProtanopia, deuteranopia, tritanopia and achromatopsia, with pairs that become hard to tell apart
export_tokensCSS variables, Tailwind v4 @theme, SCSS, JSON, DTCG tokens, JS arrays or an SVG swatch strip
build_systemA 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 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

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.

What is inside

PackagePurpose
packages/colorColor 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
packages/dataColor names (CSS keywords, common names in 30 languages, an extended list), the Tailwind CSS palette
packages/exportsCode generators: CSS variables, Tailwind v4 @theme, SCSS, JSON, DTCG tokens, SVG
packages/toolsThe 18 tools with their input schemas, shared by the MCP server and the REST API
packages/mcpThe MCP server (@pickshade/mcp)

Develop

pnpm install
pnpm check
pnpm build

The bundled server is written to packages/mcp/dist.

License

MIT. Color names include data from meodai/color-names (MIT); Tailwind palette values are from Tailwind CSS (MIT).

الأسئلة الشائعة

ما هو PickShade color tools؟

18 color tools: OKLCH, WCAG and APCA contrast fixes, palettes, gradients, color blindness, tokens.

كيف أثبّت PickShade color tools؟

يعمل كخادم بعيد. في Claude Code: claude mcp add --transport http pickshade-color-tools 'https://pickshade.com/api/mcp'. وفي العملاء الآخرين، الصق إعداد JSON من هذه الصفحة في إعدادات MCP الخاصة بهم.

هل يحتاج PickShade color tools إلى مفتاح API؟

لا يذكر إدراجه في السجل أي مفتاح أو سر إلزامي. قد تتطلب بعض الميزات حسابًا لدى الخدمة التي يتصل بها.

هل PickShade color tools مفتوح المصدر؟

نعم. شيفرته متاحة على GitHub بترخيص MIT.

من يصون PickShade color tools؟

ينشره tenzo-run. يدرجه AI.tn لكنه لا يصونه ولا يوصي به.

من سجل MCP الرسمي. الإدراج ليس توصية: راجع شيفرة الخادم وصلاحياته قبل منحه الوصول إلى بياناتك.