关键词

颜色转换调色板生成无障碍设计颜色分析UI设计工具

项目简介

'mcp-color-convert' 是一个基于 Model Context Protocol (MCP) 构建的服务器，旨在为AI编码代理和助手提供一套完整的颜色处理工具集。它能够实现多种颜色格式之间的转换、颜色的精细调整、深入分析、生成和谐的配色方案，以及进行重要的无障碍合规性检查。通过标准化的 JSON-RPC 协议，'mcp-color-convert' 允许大型语言模型（LLM）客户端无缝集成这些强大的颜色功能，极大地提升了设计系统、网页开发和数据可视化等领域的AI辅助能力。

主要功能点

  • 颜色转换: 支持HEX、RGB、RGBA、HSL、HSLA、OkLCH、OkLab和命名颜色等多种主流颜色格式之间的双向转换。它能够准确处理并保留颜色的透明度（Alpha值），在不支持透明度的格式间转换时也会进行智能处理。
  • 颜色操作: 提供灵活的颜色调整功能，包括：
    • 提亮/变暗: 增加或减少颜色的亮度，用于创建不同状态（如悬停、激活）的颜色变体。
    • 饱和/去饱和: 增强或减弱颜色的鲜艳度，用于控制视觉冲击力。
    • 反转: 生成颜色的精确互补色。
    • 色相旋转: 围绕色轮旋转颜色色相，用于创建和谐配色或系统性颜色变化。
  • 颜色分析: 深入分析颜色属性，包括：
    • 亮度: 计算WCAG相对亮度（0-1），评估颜色的明暗程度。
    • 色度: 获取颜色的强度或纯度（0-1），了解其鲜艳程度。
    • 不透明度: 从支持透明度的颜色格式中提取Alpha值。
    • 命名: 尝试识别颜色的常见名称，或返回其十六进制代码。
  • 颜色生成: 帮助用户创建复杂的颜色方案：
    • 调色板: 从一个基色生成6种和谐的颜色，支持默认（彩虹式）和单色（相同色相，不同亮度）类型。
    • 配色方案: 生成基于经典色彩理论的配色方案，如互补色、三元色、四元色、类似色和分离互补色。
    • 色板: 根据基色生成一个包含11个深浅度（50-950）的设计系统标准色板，适用于创建完整的设计主题。
    • 随机颜色: 生成指定格式的随机颜色，用于原型设计或灵感发现。
  • 无障碍工具: 确保颜色组合符合WCAG标准，提高可访问性：
    • 对比度: 计算两种颜色之间的WCAG对比度（1-21），评估可读性。
    • 合规性分析: 提供全面的WCAG可访问性分析，包括AA/AAA级别合规性判断及建议。
    • 最佳文本颜色: 根据背景色自动判断并推荐最佳文本颜色（黑色或白色），以实现最大可读性。
  • 实用工具:
    • 颜色验证: 检查给定的颜色字符串是否为有效且可解析的颜色。

安装步骤

本MCP服务器通常无需手动“安装”，因为它设计为通过您的MCP客户端配置来按需运行。当MCP客户端首次启动或需要该服务时，它会使用 'npx' 命令自动下载并执行最新版本的 'mcp-color-convert'。您只需在MCP客户端中进行相应的配置即可。

服务器配置

MCP服务器通过MCP客户端进行连接和管理。以下是配置 'mcp-color-convert' 服务器到您的MCP客户端的示例JSON配置：

{
  "mcpServers": {
    "color-converter": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-color-convert@latest"
      ]
    }
  }
}
  • '"color-converter"': 这是您在MCP客户端中为该服务器实例定义的唯一名称，您可以根据需要自定义。
  • '"command": "npx"': 指定启动MCP服务器的命令行工具是 'npx'。
  • '"args": ["-y", "mcp-color-convert@latest"]': 'npx' 命令的参数。
    • '-y'：表示在安装过程中自动确认提示。
    • 'mcp-color-convert@latest'：指示 'npx' 运行 npm 仓库中最新版本的 'mcp-color-convert' 包。

请根据您使用的MCP客户端的具体文档，将上述配置添加到其服务器配置部分。配置更改后，通常需要重启您的MCP客户端才能生效。

基本使用方法

一旦MCP客户端配置并连接了 'mcp-color-convert' 服务器，您就可以通过自然语言指令直接调用其提供的各种颜色工具。以下是一些示例：

  • 颜色转换:

    • "将颜色 '#FF0000' 转换为 'oklch' 格式。"
    • "请将 'rgb(0, 0, 255)' 转换为 'hsl'。"
    • "把 'rgba(255, 0, 0, 0.5)' 转换为 'hex' 格式。" (注意：'hex' 格式不支持透明度，透明信息将被移除)
    • "将 'rgba(255, 0, 0, 0.5)' 转换为 'oklch' 格式。" (透明度将保留)

  • 颜色操作:

    • "将 '#FF0000' 提亮20%。"
    • "将 'rgb(100, 150, 200)' 饱和度降低15%。"
    • "反转颜色 '#336699'。"

  • 颜色分析:

    • "获取颜色 '#FFCC00' 的亮度。"
    • "颜色 'forestgreen' 的名称是什么？"
    • "请提取 'rgba(0,0,0,0.7)' 的不透明度。"

  • 颜色生成:

    • "为蓝色生成一个和谐的调色板。"
    • "从颜色 '#663399' 生成一个设计系统色板。"
    • "为红色生成一个互补色方案。"
    • "随机生成一个 'oklch' 格式的颜色。"

  • 无障碍工具:

    • "计算前景色 '#000000' 和背景色 '#FFFFFF' 的WCAG对比度。"
    • "分析前景色 '#FF0000' 在背景色 '#FFFF00' 上的WCAG合规性。"
    • "为背景色 '#FF5733' 推荐最佳文本颜色。"

信息

分类

AI与计算

访问项目