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