PaletteGet

io.github.yang7206由 GitHub 帳號 yang7206 發布v1.3.0更新於 Oct 24, 2026

Curated app, web and mini program color palettes with WCAG contrast and CSS variables.

已驗證Streamable HTTP可網頁執行開發者工具媒體與設計

概覽

AI 產生的概覽

PaletteGet 為助理提供經 WCAG 檢核的 UI 配色庫，可查角色色值、對比度，並產生可直接貼上的 CSS 或各平台程式碼。

可以做什麼
  • 瀏覽與取得配色：依平台或標籤列出配色，取得某套配色的完整角色色值、對比度結果與搭配建議，或以中英文關鍵字取得推薦。
  • 檢核可讀性：計算任意兩色的 WCAG 對比度並給出正文與大字兩套判定，或為指定背景色傳回依對比度排序的文字色候選。
  • 匯出程式碼：產生 CSS 自訂屬性，以及 Android、iOS、Flutter、小程式、SCSS、Tailwind 片段。
  • 衍生變體：把基準色擴展為 50 到 900 色階，或把淺色配色推導為深色版本並附實測對比度。
適用情境
適合在建置或改版 App、網頁、小程式介面時使用，避免模型憑空編造十六進位色值。需要無障礙配色、深色模式變體或可直接貼進程式碼的設計變數時尤其合適。
執行需求
使用託管端點無需安裝，也不需要 API 金鑰或註冊。本機 stdio 方式可透過 npx 或原始碼執行，需要 Node.js，並從公開資料集取數，可用 PALETTEGET_API、PALETTEGET_API_ZH、PALETTEGET_CACHE_MS、PALETTEGET_PROXY 設定。
安裝前請注意
工具皆為唯讀查詢與產生，不索取任何憑證。本機 stdio 伺服器會從 PaletteGet 公開網站取數，且 PALETTEGET_API 可指向其他位址，請只改為你信任的來源。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 PaletteGet，將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Web executable，透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。

交給代理程式安裝

把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式，或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南，先向你展示發布者、端點和登入方式，經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。

閱讀 https://sourceweft.com/mcp/io.github.yang7206%2Fpaletteget/install.md，並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前，先告訴我它的發布者、端點和登入方式，等我確認。不要把 API 金鑰寫進命令或我會提交的檔案；問我金鑰應從哪裡取得。

檢視代理程式所依據的安裝指南

其他 MCP 客戶端

把它新增到你客戶端的 mcpServers 設定中。

{
  "mcpServers": {
    "paletteget": {
      "type": "http",
      "url": "https://paletteget-mcp.y7206062.workers.dev/mcp"
    }
  }
}

README

paletteget-mcp

[site] [palettes] [license]

An MCP server for the PaletteGet color palette library: 100 palettes across App, Web and Mini App UIs, each organized into 10 design roles and checked against WCAG contrast requirements.

It exists so your AI coding tool stops inventing hex values. Instead of guessing, the model calls a tool and gets the real role colors, the measured contrast ratios, and the pairing advice that ships with the palette.

No API key, no sign-up.

Use the hosted endpoint (nothing to install)

https://paletteget-mcp.y7206062.workers.dev/mcp
json
{  "mcpServers": {    "paletteget": {      "type": "http",      "url": "https://paletteget-mcp.y7206062.workers.dev/mcp"    }  }}

ChatGPT: Settings → Connectors → Add custom connector → paste the URL.

The hosted server embeds the dataset at deploy time, so it never depends on the site being reachable and answers in a few milliseconds.

Or run it locally (stdio)

From npm, no clone

bash
npx -y paletteget-mcp
json
{  "mcpServers": {    "paletteget": {      "command": "npx",      "args": ["-y", "paletteget-mcp"]    }  }}

Behind a proxy, set PALETTEGET_PROXY=http://127.0.0.1:7897 in the server's env block.

From source

bash
git clone https://github.com/yang7206/paletteget-mcp.gitcd paletteget-mcpnpm install
json
{  "mcpServers": {    "paletteget": {      "command": "node",      "args": ["/absolute/path/to/paletteget-mcp/index.mjs"]    }  }}

The stdio server fetches live data from the public JSON endpoints and caches it for 10 minutes.

Tools

ToolWhat it does
list_palettesList palettes, optionally filtered by platform (app / web / miniapp) or tag
get_paletteFull data for one palette: role colors, contrast results, human-written pairing advice
suggest_paletteRecommend palettes from keywords in English or Chinese, and say what matched
get_css_variablesCSS custom properties for a palette, ready to paste
check_contrastWCAG contrast between any two colors, with both the body-text and large-text verdicts
suggest_text_colorReadable text colors for a given background: same-hue tints and shades plus black and white, ranked by contrast
darken_paletteDerive a dark-mode version of a light palette with published rules, and the measured contrast of every pair
get_platform_snippetPaste-ready code for one palette: Android colors.xml, iOS UIColor, Flutter Color, mini program wxss, CSS, SCSS or Tailwind
get_color_scaleExpand one base color into a 50 to 900 scale, with white and black contrast per step; JSON, CSS or Tailwind output

Example call and result:

suggest_palette { "query": "dark finance dashboard", "limit": 2 }
- Ink Blue Night / 墨蓝夜（app，分 94）  slug: mo-lan-ye　主色: #4c8df6  场景: Finance & analytics apps (dark mode)  命中: 标签:dark, 场景:finance

Environment variables (stdio server)

VariableDefaultPurpose
PALETTEGET_APIhttps://paletteget.com/api/index.jsonOverride the dataset URL
PALETTEGET_API_ZHderived (/zh/api/index.json)Override the Chinese dataset URL
PALETTEGET_CACHE_MS600000Cache lifetime in milliseconds
PALETTEGET_PROXYnoneRoute requests through a proxy, e.g. http://127.0.0.1:7897. Also honours HTTPS_PROXY.

Behind a firewall, Node's built-in fetch ignores the usual proxy variables, so set PALETTEGET_PROXY explicitly.

Test

bash
npm run smoke

The smoke test speaks the MCP stdio protocol directly and exercises every tool against a local fixture, so it runs offline. Point PALETTEGET_API at the live site to test against production.

Maintaining the hosted worker

The worker (worker.mjs) is a hand-written, stateless subset of MCP Streamable HTTP (initialize, tools/list, tools/call, ping) with no SDK dependency, which keeps it small and Workers-native.

bash
# 1. Regenerate the embedded dataset (run both locales)SITE_URL=https://paletteget.com SITE_LOCALE=zh node --import ./alias-loader.mjs build-data.mjsSITE_URL=https://paletteget.com SITE_LOCALE=en node --import ./alias-loader.mjs build-data.mjs
# 2. Local checknpx wrangler dev          # POST JSON-RPC to http://127.0.0.1:8787/mcp
# 3. Deploy (needs CLOUDFLARE_API_TOKEN with Workers Scripts:Edit)npx wrangler deploy

build-data.mjs reuses the site's own i18n modules through alias-hooks.mjs, so names, scenes and advice stay identical to the published site. data/ is generated at build time and never committed.

Data and license

Code is MIT (see LICENSE). Palette data comes from paletteget.com and may be reused freely in personal and commercial projects; a credit link is appreciated.

Machine-readable forms of the same data, if you would rather skip MCP entirely:

  • Full dataset: https://paletteget.com/api/index.json
  • One palette: https://paletteget.com/palette-list/{platform}/{slug}/index.json
  • CSS variables: https://paletteget.com/palette-list/{platform}/{slug}/index.css
  • Agent guide: https://paletteget.com/llms.txt

來源：README.md，提交 cf70d2b

工具

9

list_palettes

列出配色库中的配色，可按平台（app / web / miniapp）与标签过滤。返回名称、slug、主色、场景与标签。

輸入參數taglimitplatform

get_palette

取某一套配色的完整数据：角色色值（主色 / 功能色 / 中性色）、对比度、人工搭配建议。

輸入參數slug必填platform

suggest_palette

按自然语言关键词推荐配色（中英文均可），例如「护眼的深色记账 App」「清新博客」。会说明每个结果命中了什么。

輸入參數limitquery必填platform

get_css_variables

取一套配色的 CSS 自定义属性（可直接粘进项目），含语义化变量名。

輸入參數slug必填platform

check_contrast

算两个颜色之间的 WCAG 对比度，并同时给出正文级（4.5 / 7）与大字级（3 / 4.5）两套判定。适合在把配色写进代码前先验一遍。

輸入參數background必填foreground必填

suggest_text_color

给一个背景色，返回一组可读的文字色候选（同色相的极浅与极深版 + 纯黑白参照），按对比度降序，标出推荐项与 AA / AAA 判定。

輸入參數limitbackground必填

get_platform_snippet

取一套配色的可直接粘贴代码片段，按目标平台生成：Android colors.xml、iOS UIColor、Flutter Color、小程序 wxss、CSS 变量、SCSS 变量、Tailwind 配置。

輸入參數langslug必填target必填platform

get_color_scale

从一个基准色生成 50 到 900 的 10 级色阶（500 等于基准色本身），每阶附白字与黑字的实测对比度；format 可取 list / json / css / tailwind。

輸入參數color必填format

darken_palette

把一套浅色配色推导成深色版本：按固定规则重排明度与饱和度，并返回每对颜色的实测对比度。可用 slug 取库里配色，也可直接传 roles。

輸入參數slugrolesplatform

版本歷史

2
  1. v1.3.0最新Oct 24, 2026
  2. v1.0.0Oct 21, 2026

評分

已滿足適用檢查項的 90%

該評分衡量此收錄條目的完整程度，依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價，也不表示伺服器安全或目前可用：可連通性是帶日期的檢查結果，評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通必需25 分
  • 已宣告認證方式必需10 分
  • 已列出工具必需15 分
  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分

    請在儲存庫或註冊中心條目中宣告授權條款。