Token导航 LogoToken导航TokenDH.com
Color MCP logo
开发工具stdio官方级别未说明来源级核验

Color MCP

MCP Server

MCP Color Server 是一个全面的开发者工具服务器,提供高级颜色操作、调色板生成、渐变创建和可视化功能,适用于AI应用。

工具数

11

提示词数

0

GitHub Stars

0

资源数

0
TypeScript开发工具命令行工具

安装说明

本站只整理中文说明和来源信息,不托管安装包,也不代用户安装。

作者 / 组织

keyurgolani

提供方

keyurgolani

最后核验

2026/5/17 20:22

运行时

Docker

快速接入

先看主来源和安装命令,再打开仓库或文档;下面只保留这个条目的关键接入事实。

命令预览

docker run -d \

详细介绍

MCP颜色服务器

一个全面的DeveloperTools服务器和MCP,为人工智能应用程序提供高级颜色操作、调色板生成、渐变创建和可视化功能。

特性

  • 全面的颜色格式支持:在22多种格式之间转换,包括HEX、RGB、HSL、HSV、HWB、CMYK、LAB、XYZ、LCH、OKLAB、OKLCH和命名颜色
  • 框架集成:原生支持CSS变量、SCSS、Tailwind类、Swift UIColor、Android Color和Flutter Color格式
  • 高精度转换:可配置精度高达10位小数,适用于科学和专业应用
  • 调色板生成:基于色彩理论原理创建和谐的调色板
  • 渐变创建:使用高级插值生成线性、径向和二次曲线梯度
  • 无障碍合规性:WCAG 2.1 AA/AAA对比度检查和色盲模拟
  • 双背景可视化:创建具有浅色和深色背景变体的交互式HTML和高质量PNG可视化
  • 导出格式:生成CSS、SCSS、Tailwind CSS和JSON导出,实现无缝集成
  • 主题生成:使用语义颜色映射生成完整的设计系统主题
  • 性能优化:使用智能缓存,所有颜色操作的响应时间均低于1000毫秒

安装

先决条件

  • Node.js 20.0.0或更高版本
  • npm或yarn包管理器

再进行

npm install

开发设置

# Install dependencies
npm install

# Build the project
npm run build

# Run in development mode
npm run dev

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

# Lint code
npm run lint

# Format code
npm run format

用法

作为MCP服务器

颜色服务器实现了模型上下文协议,可以与任何兼容MCP的客户端一起使用。

配置

添加到MCP客户端配置中:

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

可用工具

  • convert_color:在不同格式之间转换颜色
  • analyze_color:分析颜色属性(亮度、对比度、温度)
  • generate_harmony_palette:根据和谐原则创建调色板
  • generate_gradient:使用高级选项创建CSS渐变
  • check_contrast:验证WCAG可访问性合规性
  • create_palette_html:生成交互式HTML可视化
  • create_palette_png:生成高质量的PNG图像
  • export_css:使用自定义属性和实用程序类生成现代CSS
  • export_scss:生成SCSS变量、映射和混合
  • export_tailwind:生成Tailwind CSS配置和实用程序类
  • export_json:生成用于编程使用和API集成的JSON格式

API

MCP协议

服务器实现模型上下文协议(MCP)规范,并提供以下端点:

工具发现

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/list",
  "params": {}
}

工具执行

{
  "jsonrpc": "2.0",
  "id": 2,
  "method": "tools/call",
  "params": {
    "name": "convert_color",
    "arguments": {
      "color": "#FF0000",
      "output_format": "hsl"
    }
  }
}

响应格式

所有工具都以这种标准格式返回响应:

{
  "success": true,
  "data": {
    "converted": "hsl(0, 100%, 50%)",
    "original": "#FF0000"
  },
  "metadata": {
    "execution_time": 15,
    "color_space_used": "sRGB",
    "accessibility_notes": [],
    "recommendations": []
  },
  "visualizations": {
    "html": "...",
    "png_base64": "iVBORw0KGgoAAAANSUhEUgAA..."
  },
  "export_formats": {
    "css": ":root { --color: #FF0000; }",
    "scss": "$color: #FF0000;",
    "tailwind": "{ colors: { custom: '#FF0000' } }",
    "json": { "hex": "#FF0000", "rgb": "rgb(255, 0, 0)" }
  }
}

支持的颜色格式

输入格式

MCP颜色服务器接受以下任何格式的颜色:

标准Web格式

  • 十六进制: #FF0000, #F00, FF0000, F00
  • 红绿蓝: rgb(255, 0, 0), 255, 0, 0, 255 0 0, [255, 0, 0]
  • 颜色值: rgba(255, 0, 0, 0.5)
  • 保健实验室: hsl(0, 100%, 50%), 0, 100%, 50%
  • HSLA公司: hsla(0, 100%, 50%, 0.8)
  • HSV/HSB: hsv(0, 100%, 100%), hsb(0, 100%, 100%)
  • 单纯疱疹病毒: hsva(0, 100%, 100%, 0.7)

高级颜色空间

  • HWB: hwb(0, 0%, 0%)
  • CMYK(印刷四分色模式): cmyk(0%, 100%, 100%, 0%)
  • 实验室: lab(53.23, 80.11, 67.22)
  • XYZ公司: xyz(41.24, 21.26, 1.93)
  • LCH: lch(53.23, 104.55, 40.85)
  • OKLAB: oklab(0.628, 0.225, 0.126)
  • OKLCH: oklch(0.628, 0.258, 29.23)

命名的颜色

  • CSS命名颜色: red, blue, forestgreen, lightsteelblue等等。

输出格式

以可配置的精度转换为以下任何格式:

网站开发

{
  "color": "#FF0000",
  "output_format": "hex"
}
// Result: "#ff0000"

{
  "color": "#FF0000",
  "output_format": "rgb"
}
// Result: "rgb(255, 0, 0)"

{
  "color": "#FF0000",
  "output_format": "hsl",
  "precision": 1
}
// Result: "hsl(0.0, 100.0%, 50.0%)"

CSS变量

{
  "color": "#FF0000",
  "output_format": "css-var",
  "variable_name": "primary-color"
}
// Result: "--primary-color: #ff0000;"

{
  "color": "#FF0000",
  "output_format": "scss-var",
  "variable_name": "accent_color"
}
// Result: "$accent_color: #ff0000;"

移动开发

{
  "color": "#FF0000",
  "output_format": "swift",
  "precision": 3
}
// Result: "UIColor(red: 1.000, green: 0.000, blue: 0.000, alpha: 1.000)"

{
  "color": "#FF0000",
  "output_format": "android"
}
// Result: "Color.parseColor(\"#FFFF0000\")"

{
  "color": "#FF0000",
  "output_format": "flutter"
}
// Result: "Color(0xFFFF0000)"

框架集成

{
  "color": "#FF0000",
  "output_format": "tailwind"
}
// Result: "red-500"

科学/专业

{
  "color": "#FF0000",
  "output_format": "lab",
  "precision": 6
}
// Result: "lab(53.230000, 80.110000, 67.220000)"

{
  "color": "#FF0000",
  "output_format": "oklab",
  "precision": 8
}
// Result: "oklab(0.62800000, 0.22500000, 0.12600000)"

使用示例

基本颜色转换

// Convert HEX to RGB
{
  "tool": "convert_color",
  "parameters": {
    "color": "#FF0000",
    "output_format": "rgb"
  }
}

// Convert RGB to HSL with high precision
{
  "tool": "convert_color",
  "parameters": {
    "color": "rgb(255, 128, 64)",
    "output_format": "hsl",
    "precision": 4
  }
}

高级颜色空间转换

// Convert to LAB color space for perceptual uniformity
{
  "tool": "convert_color",
  "parameters": {
    "color": "#FF8040",
    "output_format": "lab",
    "precision": 3
  }
}

// Convert to OKLCH for modern color workflows
{
  "tool": "convert_color",
  "parameters": {
    "color": "hsl(25, 100%, 69%)",
    "output_format": "oklch",
    "precision": 5
  }
}

框架特定产出

// Generate Swift UIColor
{
  "tool": "convert_color",
  "parameters": {
    "color": "#2563eb",
    "output_format": "swift",
    "precision": 3
  }
}

// Generate Tailwind CSS class
{
  "tool": "convert_color",
  "parameters": {
    "color": "#ef4444",
    "output_format": "tailwind"
  }
}

// Generate CSS custom property
{
  "tool": "convert_color",
  "parameters": {
    "color": "#10b981",
    "output_format": "css-var",
    "variable_name": "success-color"
  }
}

导出格式生成

生成完整的样式表和配置文件:

// Generate CSS with custom properties
{
  "tool": "export_css",
  "parameters": {
    "colors": ["#2563eb", "#ef4444", "#10b981"],
    "format": "both",
    "semantic_names": ["primary", "error", "success"],
    "include_rgb_hsl": true
  }
}

// Generate SCSS with mixins
{
  "tool": "export_scss",
  "parameters": {
    "colors": ["#2563eb", "#ef4444"],
    "format": "all",
    "include_functions": true,
    "namespace": "theme"
  }
}

// Generate Tailwind config
{
  "tool": "export_tailwind",
  "parameters": {
    "colors": ["#2563eb"],
    "include_shades": true,
    "semantic_names": ["primary"]
  }
}

// Generate JSON with metadata
{
  "tool": "export_json",
  "parameters": {
    "colors": ["#2563eb", "#ef4444"],
    "format": "detailed",
    "include_accessibility": true,
    "group_name": "Brand Colors"
  }
}

性能特征

  • 单次转换:响应时间\<100ms
  • 批量操作:每次转换平均\<20ms
  • 高精度:最多10位小数,不会影响性能
  • 内存效率高:针对并发操作进行了优化
  • 缓存:对频繁转换的颜色进行智能缓存

直接使用

import { ColorServer } from './src/server.js';

const server = new ColorServer();
// Server usage examples will be added as implementation progresses

发展

项目结构

mcp-color-server/
├── src/                    # Source code
│   ├── server.ts          # Main MCP server implementation
│   ├── tools/             # Tool implementations
│   ├── validation/        # Input validation schemas
│   ├── types/             # TypeScript type definitions
│   └── utils/             # Utility functions
├── tests/                 # Test files
├── docs/                  # Documentation
├── examples/              # Usage examples
└── dist/                  # Compiled output

代码质量

该项目通过自动化Git挂钩保持高代码质量标准:

  • 预提交钩子:对暂存文件进行自动换行、格式化和类型检查
  • 预推挂钩:具有90%以上覆盖率要求和构建验证的完整测试套件
  • 提交消息验证:强制执行常规提交格式
  • 零缺陷政策:不允许出现TypeScript错误、ESLint警告或测试失败

Husky安装文档 有关Git钩子的详细信息。

  • TypeScript:启用了严格模式,并进行了全面的类型检查
  • 埃斯林特:强制执行代码风格并发现潜在问题
  • 更漂亮:自动代码格式化
  • 测试:全面的测试套件,覆盖率要求超过90%
  • 持续集成:自动化测试和质量检查

贡献

请阅读 docs/contributing.md 有关我们的行为准则和提交pull请求流程的详细信息。

测试

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage report
npm run test:coverage

# Run specific test file
npm test -- server.test.ts

建筑

# Clean previous build
npm run clean

# Build for production
npm run build

# Type check without building
npm run type-check

许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

贡献

我们欢迎捐款!请看 docs/contributing.md 作为指导方针。

行为准则

该项目遵循 行为准则。通过参与,您将遵守此准则。

支持

  • 问题:
  • 讨论:
  • 文档: docs/

- 导出格式指南 - 色彩理论指南 - 无障碍指南

生产部署

系统要求

  • Node.js:20.0.0或更高
  • 记忆:最低512MB,建议2GB
  • 中央处理器:最低1芯,建议高负载时使用2+芯
  • 存储:100MB用于应用程序,额外的空间用于日志和缓存

性能特征

  • 响应时间:颜色转换小于100ms,复杂可视化小于2s
  • 吞吐量:支持50多个并发请求
  • 内存使用:每个请求\<100MB,智能缓存和清理
  • 可靠性:通过适当的部署和监控,正常运行时间达到99.9%

部署选项

Docker部署

# Build Docker image
docker build -t mcp-color-server .

# Run container
docker run -d \
  --name mcp-color-server \
  -e NODE_ENV=production \
  -e LOG_LEVEL=info \
  -p 3000:3000 \
  mcp-color-server

PM2部署

# Install PM2 globally
npm install -g pm2

# Start with PM2
pm2 start ecosystem.config.js

# Save PM2 configuration
pm2 save
pm2 startup

系统化服务

# Copy service file
sudo cp mcp-color-server.service /etc/systemd/system/

# Enable and start service
sudo systemctl enable mcp-color-server
sudo systemctl start mcp-color-server

监控与维护

  • 健康检查:内置健康端点位于 /health
  • 指标:性能指标和资源使用跟踪
  • 日志记录:具有可配置级别的结构化JSON日志记录
  • 警报:内存使用情况、响应时间和错误率监控

安全

安全特性

  • 输入验证:对所有颜色格式和参数进行全面验证
  • XSS预防:对生成的HTML、CSS和SVG内容进行净化
  • 速率限制:为昂贵的操作提供内置的速率限制
  • 资源保护:内存限制、处理超时和清理
  • 审计日志:记录安全相关事件,不暴露敏感数据

安全最佳实践

  1. 以最低权限运行:使用专用用户帐户
  2. 网络安全:使用HTTPS在反向代理后运行
  3. 资源限制:配置适当的内存和CPU限制
  4. 定期更新:保持安全补丁的依赖关系更新
  5. 监控:监控可疑活动和资源使用情况

漏洞报告

私下向以下人员报告安全漏洞: security@mcp-color-server.org

docs/security.md 详细的安全策略和报告程序。

路线图

当前版本(0.1.0)

  • ✅ 完整的色彩格式转换系统
  • ✅ 基于颜色理论算法的调色板生成
  • ✅ 渐变创建和可视化
  • ✅ 主题生成和语义颜色映射
  • ✅ 可访问性合规工具
  • ✅ HTML和PNG可视化生成
  • ✅ 导出格式(CSS、SCSS、顺风、JSON)
  • ✅ 性能优化和缓存
  • ✅ 安全强化和输入验证

计划功能(未来版本)

  • 🔄 3D颜色空间可视化
  • 🔄 颜色动画和过渡
  • 🔄 高级图像颜色提取
  • 🔄 教育内容和教程
  • 🔄 自定义算法的插件架构
  • 🔄 RESTful API端点
  • 🔄 高级渐变类型(网格、圆锥曲线)
  • 🔄 移动框架集成

社区贡献欢迎

  • 颜色理论算法的改进
  • 新的导出格式支持
  • 性能优化
  • 文档增强
  • 测试覆盖率提高
  • 辅助功能

目录标签

目录标签

TypeScript开发工具命令行工具颜色转换本地部署调色板生成渐变创建可视化工具开发者工具

接入字段

传输方式(transport,传输协议)

stdio

鉴权方式(authType,认证方式)

none

运行时(runtime,运行环境)

Docker

部署方式(deploymentType,部署类型)

remote-capable

工具数量(toolCount,工具数)

11

资源数量(resourceCount,资源数)

0

提示词数量(promptCount,提示词数)

0

权限和风险

stdiononeremote-capable

接入前请确认传输方式、认证方式和部署位置,并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限;先核对安装命令和配置内容。

来源信息

继续浏览同类 MCP