PickShade color tools

com.pickshadev0.2.0更新于 Oct 5, 2026

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

已验证Streamable HTTP可网页运行Developer ToolsMedia & Design

概览

AI 生成的概览

为助手提供 18 项颜色工具：转换、命名、WCAG 与 APCA 对比度检查与修复、调色板审查、渐变、色阶和设计令牌。

功能
PickShade 提供 parse_color、convert_color、find_colors、check_contrast、fix_contrast、audit_palette、generate_scale、harmonies、mix_colors、make_gradient、simulate_cvd、export_tokens 和 build_system 等颜色工具。它接受 HEX、rgb()、hsl()、oklch()、CSS 颜色名、常见名称和 Tailwind 类名，并可输出 HEX、RGB、HSL、Lab、OKLCH、Display P3 和 Rec. 2020 等格式。还提供无障碍主题、颜色审查和颜色文字描述等提示。
适用场景
适合在构建或审查设计系统、检查文字与背景是否达到 WCAG 2 或 APCA 目标、生成调色板、色阶和渐变，或导出 CSS、Tailwind v4、SCSS、DTCG 令牌时使用。适用于需要颜色决策一致且无障碍的设计与前端工作。
运行要求
以远程 streamable HTTP 端点方式托管运行，无需安装；也可通过 npm 包在本地以 stdio 运行，需要 Node.js 20 或更高版本。未声明需要 API 密钥、账户、环境变量或请求头。
安装前请注意
README 说明不需要 API 密钥、账户，也不收集遥测，颜色计算在本地确定性完成。输入中未显示写入、发送或删除数据、付款或凭据等操作。

安装

在 SourceWeft 中

  1. 打开 控制台中的 PickShade color tools，将其添加到工作区。
  2. 为需要使用其工具的对话启用该服务。

Web executable，通过 Streamable HTTP。 远程服务在工作区中配置后即可从网页运行时运行。

其他 MCP 客户端

把它添加到你客户端的 mcpServers 配置中。

{
  "mcpServers": {
    "pickshade": {
      "type": "http",
      "url": "https://pickshade.com/api/mcp"
    }
  }
}

README

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:

bash
claude mcp add --transport http pickshade https://pickshade.com/api/mcp

Cursor, VS Code and other clients that read mcpServers:

json
{    "mcpServers": {        "pickshade": { "url": "https://pickshade.com/api/mcp" }    }}

Run locally over stdio

json
{    "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.

License

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

来源：packages/mcp/README.md，提交 34ad055

工具

0
工具元数据尚未被收录。

版本历史

1
  1. v0.2.0最新Oct 5, 2026