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.
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →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
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →