Color Picker MCP

What it does

Color Picker MCP renders an interactive color-picking interface inside MCP-capable clients. Users can visually select a color from a full-spectrum picker, and the server returns the chosen color in hex, RGB, and HSL formats — ready to use in design tokens, CSS, or any color-aware workflow.

Key features

• Full-spectrum color picker rendered as a React UI component embedded in the MCP client
• Returns color values in all three common formats: hex (#ff6b35), RGB (rgb(255,107,53)), and HSL (hsl(18,100%,60%))
• HTTP transport via Streamable HTTP — works with VS Code Copilot and any HTTP-capable MCP host
• Easily exposed over the internet via Cloudflare Tunnel for remote use
• Built with React 19, Vite, and the official @modelcontextprotocol/ext-apps SDK

Installation

git clone https://github.com/val-fom/Color-Picker-MCP
cd Color-Picker-MCP
npm install
npm run serve

The server starts at http://localhost:3001/mcp.

Expose publicly with Cloudflare Tunnel:

cloudflared tunnel --url http://localhost:3001

VS Code Copilot — add to .vscode/mcp.json:

{
  "servers": {
    "color-picker": {
      "url": "https://<your-tunnel>.trycloudflare.com/mcp",
      "type": "http"
    }
  }
}

Supported hosts

VS Code Copilot (confirmed in README via HTTP transport).