mcpField
C
color

color

Local
github.com/rog0xMedia & Design0Updated 32w ago
Repository

About color

color is an MCP server offering color and design utilities for AI agents. It converts and transforms colors, generates palettes and CSS gradients, and checks WCAG contrast compliance.

Key features

  1. 01Convert HEX, RGB, HSL, HSV, and CMYK
  2. 02Generate color palettes from a base color
  3. 03Check WCAG contrast compliance
  4. 04Mix and adjust colors
  5. 05Generate CSS gradients

Use cases

  1. 01Convert a design color between formats
  2. 02Create palettes from a chosen base color
  3. 03Check text and UI color contrast
  4. 04Produce gradient CSS for a design

MCP support

Exposes color conversion, palette generation, contrast checking, color adjustment, and CSS gradient tools to MCP clients.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
  "mcpServers": {
    "rog0x-color": {
      "command": "npx",
      "args": [
        "-y",
        "@rog0x/mcp-color-tools"
      ]
    }
  }
}
Run commandnpx -y @rog0x/mcp-color-tools

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npm@rog0x/mcp-color-tools1.0.1

Tools

5

Saved tool list · updated 2w ago

ParameterTypeRequiredDescription
colorstringYesColor in any format: HEX (#ff0000), RGB (rgb(255,0,0)), HSL (hsl(0,100%,50%)), HSV (hsv(0,100%,100%)), CMYK (cmyk(0,100,100,0))

Details

From the project README

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

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.