Color palettes in your IDE
A free MCP server that gives Cursor, VS Code, Claude, and Codex professional color tools: palette generation, monochromatic scales, contrast checks, and exports to Tailwind, Figma, and more — all in natural language.
What you can do
Generate 5-color palettes
Harmonious palettes with Primary, Secondary, Accent, Neutral, and Background roles. Styles like vibrant, muted, corporate, pastel, dark, and earthy.
Monochromatic scales
Eleven-shade scales (50–950) from any base color — say “generate a blue palette” and get the full ramp.
Export anywhere
Tailwind v4, SCSS, CSS variables, Figma tokens, iOS Swift, Android XML, JSON, or SVG.
Contrast checking
WCAG 2.1 and APCA accessibility scores for any color pair, instantly.
Color conversion
Hex, RGB, HSL, OKLCH, Display P3, HSV, CMYK — convert between any of them.
No account, no API key
Runs locally via npx. Nothing to sign up for, nothing to configure beyond one snippet.
Example prompts
- “Generate a 5-color palette”
- “Give me a vibrant color palette”
- “Create a muted palette based on #3b82f6”
- “Generate a blue monochromatic palette”
- “Export #3b82f6 as Tailwind CSS called primary”
- “Check contrast between white and #1a1a1a”
Setup
Add the server to your client's MCP configuration and restart the editor. In Cursor you can skip this — theAdd to Cursor button above does it in one click.
Cursor.cursor/mcp.json
{
"mcpServers": {
"colorsandfonts": {
"command": "npx",
"args": [
"-y",
"@colorsandfonts/mcp"
]
}
}
}VS Code (GitHub Copilot).vscode/mcp.json
{
"servers": {
"colorsandfonts": {
"command": "npx",
"args": [
"-y",
"@colorsandfonts/mcp"
]
}
}
}Claude Desktop~/Library/Application Support/Claude/claude_desktop_config.json
{
"mcpServers": {
"colorsandfonts": {
"command": "npx",
"args": [
"-y",
"@colorsandfonts/mcp"
]
}
}
}Claude Code.mcp.json in your project
{
"mcpServers": {
"colorsandfonts": {
"command": "npx",
"args": [
"-y",
"@colorsandfonts/mcp"
]
}
}
}Codex~/.codex/config.toml
[mcp_servers.colorsandfonts] command = "npx" args = ["-y", "@colorsandfonts/mcp"]
Available tools
- generate_paletteCreate 5-color palettes with semantic roles
- generate_monochromaticCreate 11-shade scales (50–950) from any color
- generate_random_paletteRandom harmonious color with a full monochromatic ramp
- export_paletteExport to Tailwind, SCSS, CSS, Figma, JSON, Android, iOS, SVG
- check_contrastWCAG 2.1 and APCA accessibility checks
- parse_colorConvert between hex, RGB, HSL, OKLCH, P3, HSV, CMYK
FAQ
What is an MCP server?
MCP (Model Context Protocol) is an open standard that lets AI assistants like Cursor, Claude, and GitHub Copilot call external tools. This server gives your AI assistant professional color tools it can use while you code.
Is it free?
Yes. The MCP server is free and open source, runs locally on your machine via npx, and requires no account or API key.
Which editors and AI clients are supported?
Cursor, VS Code with GitHub Copilot, Claude Desktop, Claude Code, and Codex — plus any other client that implements the Model Context Protocol.
What can I export palettes to?
Tailwind v4, SCSS, CSS variables, Figma tokens, iOS Swift, Android XML, JSON, and SVG.
Does it check accessibility?
Yes — the check_contrast tool returns both WCAG 2.1 ratios and APCA scores for any color pair.