Colorsandfonts MCP Server

An MCP (Model Context Protocol) server that enables AI assistants like Claude, GitHub Copilot, and others to generate professional color palettes directly in your IDE.

Now with MCP Apps support — see interactive color swatches directly in the conversation on clients that support it (claude.ai, Claude Desktop, Goose, and more).

Free to use — no license key required.

Features

• Generate 5-Color Palettes: Create harmonious palettes with Primary, Secondary, Accent, Neutral, and Background colors
• Generate Monochromatic Palettes: Create 11-shade color scales from any base color
• Multiple Palette Styles: Corporate, vibrant, muted, dark, earthy, pastel, mono, high contrast
• Multiple Export Formats: Tailwind CSS v4, SCSS, CSS, Figma tokens, JSON, Android XML, iOS Swift, SVG
• Contrast Checking: WCAG 2.1 and APCA accessibility validation
• Color Conversion: Convert between hex, RGB, HSL, OKLCH, Display P3, HSV, and CMYK
• Interactive UI: MCP Apps support — see color swatches rendered in the conversation

Configuration

Add the MCP to your AI IDE.

Cursor

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "colorsandfonts": {
      "command": "npx",
      "args": ["-y", "@colorsandfonts/mcp"]
    }
  }
}

VS Code (GitHub Copilot)

Add to .vscode/mcp.json:

{
  "servers": {
    "colorsandfonts": {
      "command": "npx",
      "args": ["-y", "@colorsandfonts/mcp"]
    }
  }
}

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json (macOS):

{
  "mcpServers": {
    "colorsandfonts": {
      "command": "npx",
      "args": ["-y", "@colorsandfonts/mcp"]
    }
  }
}

Codex

Add to ~/.codex/config.toml:

[mcp_servers.colorsandfonts]
command = "npx"
args = ["-y", "@colorsandfonts/mcp"]

Available Tools

generate_palette

Generate a harmonious 5-color palette with Primary, Secondary, Accent, Neutral, and Background colors.

Parameters:

• style (string, optional): One of corporate, vibrant, muted, dark, earthy, pastel, mono, highContrast
• baseColor (string, optional): Base color to build from (hex, RGB, HSL)

Example prompts:

• "Generate a 5-color palette"
• "Give me a vibrant color palette"
• "Create a muted palette based on #3b82f6"
• "Generate a corporate color scheme"
• "Make a pastel palette for a friendly app"
• "Create a dark mode palette"

generate_monochromatic

Generate an 11-shade monochromatic palette from any color.

Parameters:

• color (string, required): Base color in any format (hex, RGB, HSL, OKLCH)
• name (string, optional): Name for the palette (e.g., "primary", "brand")

Example prompts:

• "Generate a blue monochromatic palette"
• "Create a palette from #3b82f6 called primary"
• "Make a teal color scale from rgb(20, 184, 166)"

generate_random_palette

Generate a random harmonious color with its full monochromatic palette.

Parameters: None

Example prompts:

• "Give me a random monochromatic palette"
• "Generate a random color scale for inspiration"

export_palette

Export a palette in various formats.

Parameters:

• color (string, required): Base color in any format
• name (string, optional): Name for the variables
• format (string, required): One of tailwind, scss, css, figma, json, android, ios, svg
• colorFormat (string, optional): Value format - hex, rgb, hsl, oklch, p3

Example prompts:

• "Export a coral palette as Tailwind CSS"
• "Give me SCSS variables for #6366f1 called indigo"
• "Generate iOS Swift colors from purple"
• "Export #059669 as Android XML colors"

check_contrast

Check accessibility contrast between two colors.

Parameters:

• foreground (string, required): Text/foreground color
• background (string, required): Background color

Example prompts:

• "Check contrast between white and #1a1a1a"
• "Is #3b82f6 accessible on white?"
• "Test if rgb(0, 0, 0) works on #f5f5f5"

parse_color

Convert any color to all other formats.

Parameters:

• color (string, required): Color in any supported format

Example prompts:

• "Convert #3b82f6 to all formats"
• "What is rgb(59, 130, 246) in OKLCH?"
• "Parse hsl(217, 91%, 60%)"

Supported Color Formats

Input formats:

• Hex: #3b82f6 or 3b82f6 or #38f
• RGB: rgb(59, 130, 246)
• HSL: hsl(217, 91%, 60%)
• OKLCH: oklch(62.3% 0.214 259.1)
• Display P3: color(display-p3 0.231 0.510 0.965)

Output formats:

• Hex, RGB, HSL, OKLCH, Display P3, HSV/HSB, CMYK

License

MIT - Free to use.

Links

• Website: colorsandfonts.com
• Documentation: colorsandfonts.com/mcp
• Author: Michael Andreuzza