Summary
This is a color manipulation toolkit that gives Claude six operations for design work: converting between HEX, RGB, HSL, HSV, and CMYK formats, generating palettes in five harmony types (complementary, analogous, triadic, split-complementary, monochromatic), checking WCAG contrast ratios with AA and AAA compliance reports, mixing and blending colors with weighted ratios, adjusting lightness and saturation, and generating CSS gradient code with browser prefixes. Reach for it when you need to translate color values between formats, build accessible color schemes that meet contrast requirements, or generate palette variations without leaving your chat. The contrast checker is especially handy for validating UI decisions against accessibility standards in real time.
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
mcp-color-tools
MCP server providing color manipulation and design tools for AI agents.
Tools
color_convert
Convert a color between HEX, RGB, HSL, HSV, and CMYK. Accepts any format as input and returns all formats.
{ "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
Generate a color palette from a base color.
Types: complementary, analogous, triadic, split-complementary, monochromatic
{ "color": "#ff6b35", "type": "triadic" }
contrast_check
Check WCAG contrast ratio between two colors. Reports AA/AAA compliance for normal text, large text, and UI components.
{ "color1": "#ffffff", "color2": "#333333" }
color_mix
Mix, blend, lighten, darken, saturate, or desaturate colors.
{ "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
Generate CSS gradient code with direction, stops, and browser prefixes.
{
"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"
}
Setup
npm install
npm run build
Claude Desktop Configuration
{
"mcpServers": {
"color-tools": {
"command": "node",
"args": ["path/to/mcp-color-tools/dist/index.js"]
}
}
}
License
MIT
Featured
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →