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:使用自定义属性和实用程序类生成现代CSSexport_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-serverPM2部署
# 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内容进行净化
- 速率限制:为昂贵的操作提供内置的速率限制
- 资源保护:内存限制、处理超时和清理
- 审计日志:记录安全相关事件,不暴露敏感数据
安全最佳实践
- 以最低权限运行:使用专用用户帐户
- 网络安全:使用HTTPS在反向代理后运行
- 资源限制:配置适当的内存和CPU限制
- 定期更新:保持安全补丁的依赖关系更新
- 监控:监控可疑活动和资源使用情况
漏洞报告
私下向以下人员报告安全漏洞: security@mcp-color-server.org
看 docs/security.md 详细的安全策略和报告程序。
路线图
当前版本(0.1.0)
- ✅ 完整的色彩格式转换系统
- ✅ 基于颜色理论算法的调色板生成
- ✅ 渐变创建和可视化
- ✅ 主题生成和语义颜色映射
- ✅ 可访问性合规工具
- ✅ HTML和PNG可视化生成
- ✅ 导出格式(CSS、SCSS、顺风、JSON)
- ✅ 性能优化和缓存
- ✅ 安全强化和输入验证
计划功能(未来版本)
- 🔄 3D颜色空间可视化
- 🔄 颜色动画和过渡
- 🔄 高级图像颜色提取
- 🔄 教育内容和教程
- 🔄 自定义算法的插件架构
- 🔄 RESTful API端点
- 🔄 高级渐变类型(网格、圆锥曲线)
- 🔄 移动框架集成
社区贡献欢迎
- 颜色理论算法的改进
- 新的导出格式支持
- 性能优化
- 文档增强
- 测试覆盖率提高
- 辅助功能
