mcpField
C
color

color

本地服务
github.com/rog0x媒体与设计032 周前更新
代码仓库

关于 color

color 是为 AI Agent 提供颜色与设计工具的 MCP 服务。它可转换和调整颜色、生成调色板与 CSS 渐变，并检查 WCAG 对比度合规性。

主要功能

  1. 01转换 HEX、RGB、HSL、HSV 和 CMYK
  2. 02从基础色生成调色板
  3. 03检查 WCAG 对比度合规性
  4. 04混合和调整颜色
  5. 05生成 CSS 渐变

适用场景

  1. 01转换设计颜色格式
  2. 02根据选定基础色创建调色板
  3. 03检查文本和 UI 的颜色对比度
  4. 04为设计生成渐变 CSS

MCP 相关

向 MCP 客户端提供颜色转换、调色板生成、对比度检查、颜色调整和 CSS 渐变工具。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置
{
  "mcpServers": {
    "rog0x-color": {
      "command": "npx",
      "args": [
        "-y",
        "@rog0x/mcp-color-tools"
      ]
    }
  }
}
启动命令npx -y @rog0x/mcp-color-tools

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包
npm@rog0x/mcp-color-tools1.0.1

工具

5

收录的工具列表 · 更新于 2 周前

参数类型必填说明
colorstring是任意格式的颜色：HEX（#ff0000）、RGB（rgb(255,0,0)）、HSL（hsl(0,100%,50%)）、HSV（hsv(0,100%,100%)）、CMYK（cmyk(0,100,100,0)）

详细介绍

mcp-color-tools

为 AI Agent 提供颜色处理和设计工具的 MCP 服务。

工具

color_convert

在 HEX、RGB、HSL、HSV 和 CMYK 格式之间转换颜色。接受任意格式的输入，并返回所有格式。

{ "color": "#ff6b35" }
{ "color": "rgb(255, 107, 53)" }
{ "color": "hsl(16, 100%, 60%)" }
{ "color": "hsv(16, 79%, 100%)" }
{ "color": "cmyk(0, 58, 79, 0)" }
palette_generate

根据基础颜色生成调色板。

类型： complementary、analogous、triadic、split-complementary、monochromatic

{ "color": "#ff6b35", "type": "triadic" }
contrast_check

检查两种颜色之间的 WCAG 对比度。报告普通文本、大号文本和 UI 组件是否符合 AA/AAA 标准。

{ "color1": "#ffffff", "color2": "#333333" }
color_mix

混合、融合、调亮、调暗、增加饱和度或降低饱和度。

{ "operation": "mix", "colors": ["#ff0000", "#0000ff"], "weights": [2, 1] }
{ "operation": "blend", "colors": ["#ff0000", "#0000ff"], "ratio": 0.3 }
{ "operation": "lighten", "colors": ["#ff6b35"], "amount": 20 }
{ "operation": "darken", "colors": ["#ff6b35"], "amount": 15 }
{ "operation": "saturate", "colors": ["#888888"], "amount": 30 }
{ "operation": "desaturate", "colors": ["#ff6b35"], "amount": 25 }
css_gradient

生成包含方向、色标和浏览器前缀的 CSS 渐变代码。

{
  "type": "linear",
  "colors": ["#ff6b35", "#ffd700", "#00bcd4"],
  "direction": "135deg"
}

{
  "type": "radial",
  "colors": [
    { "color": "#ff6b35", "position": 0 },
    { "color": "#ffd700", "position": 50 },
    { "color": "#00bcd4", "position": 100 }
  ],
  "direction": "circle at center"
}

设置

npm install
npm run build

Claude Desktop 配置

{
  "mcpServers": {
    "color-tools": {
      "command": "node",
      "args": ["path/to/mcp-color-tools/dist/index.js"]
    }
  }
}

许可证

MIT

评论

支持 Markdown

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。