Color Palette MCP - Generate Palettes, Check Contrast & Convert Colors

Color Palette MCP 服务

EN: 通过 AI 助手生成配色方案、检查无障碍对比度并创建 CSS 渐变。 繁中: 透過 AI 助手產生配色方案、檢查無障礙對比度、建立 CSS 漸層。 日本語: AIアシスタントでカラーパレット生成、アクセシビリティコントラスト確認、CSSグラデーション作成ができます。

这是什么？为什么需要它？

• 选择搭配协调的颜色并不像听起来那么简单。 色彩理论的存在自有其道理。此服务运用真正的色彩理论（互补色、三角色、类似色、分裂互补色）生成和谐的配色方案，让你的设计无需设计学位也能显得专业。
• 无障碍访问已不再是可选项。 WCAG 2.1 要求文本颜色和背景颜色之间达到最低对比度。对比度检查工具会立即告诉你颜色组合是否符合 AA 或 AAA 标准，无需访问单独的无障碍测试网站。
• 在 hex、RGB、HSL 和 Tailwind 类之间来回转换很繁琐。 设计师给你 hex 代码，你的 CSS 使用 RGB，你的框架使用 Tailwind 类。此服务可以即时转换所有格式，并为任何颜色找到最接近的 Tailwind 实用类。

快速安装

Cursor（一键安装）

Claude Desktop

添加到你的 MCP 配置文件（claude_desktop_config.json）：

{
  "mcpServers": {
    "color-palette": {
      "url": "https://color-palette-mcp.yagami8095.workers.dev/mcp"
    }
  }
}

Smithery

npx @smithery/cli install @openclaw-ai/color-palette-mcp

工具

工具	功能	示例提示词
generate_palette	使用色彩理论，根据基色创建和谐的配色方案	"Generate a 5-color palette based on #3b82f6 using complementary harmony"
contrast_check	检查两种颜色之间的 WCAG 2.1 对比度（是否通过 AA/AAA）	"Is white text readable on a #3b82f6 blue background?"
color_convert	在 hex、RGB、HSL 和 CSS 命名颜色之间转换	"Convert #ff6b35 to RGB and HSL"
css_gradient	生成可直接粘贴的 CSS 渐变代码（线性、径向、圆锥）	"Create a CSS gradient from ocean blue to sunset orange"
tailwind_colors	为任何 hex 颜色查找最接近的 Tailwind CSS 实用类	"What Tailwind class is closest to #3b82f6?"

复制粘贴示例

示例 1：为新项目生成配色方案

只需对 AI 说：“我正在构建一个 SaaS 仪表盘。请基于 #3b82f6 使用互补色协调方案，生成一个专业的 5 色配色方案，并检查白色文字在每种颜色上是否符合无障碍要求。”

示例 2：检查你的设计是否符合无障碍要求

只需对 AI 说：“检查我的文字颜色 #333333 与背景颜色 #f5f5f5 之间的 WCAG 对比度。是否通过 AA 和 AAA 标准？”

示例 3：获取 CSS 渐变代码

只需对 AI 说：“创建一个从 #667eea 到 #764ba2、从左到右的 CSS 线性渐变，代码要能直接粘贴到我的样式表中。”

方案

方案	费用	调用次数
免费	$0	25/day
Pro	$29/mo	50,000/month

常见问题

问：我需要安装任何东西吗？ 答：不需要。这是运行在 Cloudflare Workers 上的云服务。将 URL 添加到 MCP 配置中即可开始使用。免费套餐无需 API 密钥。

问：支持哪些色彩理论配色方案？ 答：互补色、三角色、类似色、分裂互补色和四角色。这是最适用于实际设计工作的五种配色方案。

问：对比度检查器是否遵循最新的 WCAG 标准？ 答：是。它会根据 WCAG 2.1 标准检查普通文本（AA：4.5:1，AAA：7:1）和大号文本（AA：3:1，AAA：4.5:1）。响应中始终会包含确切的对比度。

链接

• 主仓库
• 全部 9 个服务

许可证

MIT