Coolors MCP

by x51xxx

362 downloads

Not rated

GitHub

Media

About

Advanced color operations MCP server with Material Design 3 support, CSS theme matching, image color extraction, and accessibility compliance. Features HCT color space for perceptually accurate operations.

Details

Author: x51xxx
Downloads: 362
Categories: Media

- Color space conversions (RGB, HSL, HSV, LAB, XYZ, HCT)
- Perceptual color metrics (Delta E 76/94/2000, HCT distance)
- Material Design 3 theme generation with tonal palettes
- Smart CSS theme matching with context-aware strategies
- Image color extraction via Celebi quantization
- WCAG contrast ratio compliance checking
- Automated CSS refactoring with theme variables
- Palette generation with locked colors and gradient generation
- Dislike analysis for universally disliked colors

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name Coolors MCP

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

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

JSON

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

JSON

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

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

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

JSON

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

JSON

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

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

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

JSON

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

JSON

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

From the repository

Install via NPX (recommended) by adding the server to your Claude Desktop configuration with {"command": "npx", "args": ["-y", "@trishchuk/coolors-mcp"]}. Alternatively, install via NPM (npm install @trishchuk/coolors-mcp) or build from source. Use the server by running node dist/bin/server.js or via MCP Inspector. Configure with Claude Desktop or Claude Code using claude mcp add coolors --npm-package @trishchuk/coolors-mcp.

`convert_color`

Convert colors between different formats (hex, rgb, hsl, lab, hct)

`color_distance`

Calculate perceptual distance between two colors using Delta E 2000

`check_contrast`

Check contrast between two colors. Supports WCAG 2.x luminance ratio (default), APCA Lc (WCAG 3 draft), or both algorithms side-by-side.

`adjust_color`

Adjust a color: lighten, darken, saturate, desaturate, grayscale, invert, or mix with a second color. Amount is 0-100 (percent) for lighten/darken/saturate/desaturate, 0-1 for mix weight.

`generate_palette`

Generate a color palette from a base color

`generate_palette_with_locks`

Generate a color palette while preserving specific locked colors

`generate_gradient`

Generate a smooth gradient between colors with multiple interpolation methods

`export_palette`

Export a list of colors as CSS custom properties, SCSS variables, a Tailwind config snippet, W3C design tokens, or JSON.

`simulate_color_blindness`

Simulate how one or more colors appear to viewers with color vision deficiency (protanopia, deuteranopia, tritanopia, their milder anomaly forms, or achromatopsia).

`check_palette_accessibility`

Audit a color palette for color-blind accessibility. For each pair of colors, reports the perceptual distance (Delta E 2000) under each CVD type and flags pairs that become indistinguishable.

`generate_tonal_scale`

Generate a complete tonal scale (Tailwind-style 50/100/.../900/950) from a seed color. Uses Google's HCT color space so each step is perceptually even — ideal for building shadable design-system colors.

`generate_state_colors`

Generate consistent interaction-state colors (hover / active / pressed / focus / disabled / selected) from a base color. Steps are computed in HCT space so they keep equal perceptual weight regardless of base hue.

`analyze_palette_consistency`

Score how visually cohesive a palette is. Reports tonal step uniformity, chroma spread, hue distribution, and a single 0-100 cohesion score, plus targeted suggestions for tightening it up.

`generate_semantic_palette`

From a single brand color, generate a complete visually-cohesive semantic palette: primary, secondary, tertiary, plus success/warning/error/info status colors. Tone and chroma are normalized in HCT space so every color feels like part of the same family.

`generate_material_theme`

Generate a complete Material Design 3 color theme from a source color

`harmonize_colors`

Harmonize colors to work better together using Material Design algorithms

`generate_tonal_palette`

Generate a Material Design tonal palette from a color

`match_theme_color`

Find the closest matching theme variable for a given color

`refactor_css_with_theme`

Refactor CSS to use theme variables instead of hardcoded colors

`match_theme_colors_batch`

Find theme matches for multiple colors at once

`generate_theme_css`

Generate CSS custom properties for a complete theme from a source color

`extract_image_colors`

Extract dominant colors from an image. Input should be image data as an array of RGBA values.

`generate_theme_from_image`

Generate a complete Material Design 3 theme from an image

`analyze_color_likability`

Check if a color is universally disliked (dark yellow-green associated with biological waste) and get a fixed version if needed

`fix_disliked_colors_batch`

Analyze and fix multiple colors, returning only liked versions

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

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

McpServers

{
    "coolors": {
        "command": "npx",
        "args": [
            "-y",
            "@trishchuk/coolors-mcp"
        ]
    }
}

Coolors MCP

Advanced color operations MCP server with Material Design 3 support, CSS theme matching, image color extraction, and accessibility compliance.

Features

- 🎨 Color Space Conversions - RGB, HSL, HSV, LAB, XYZ, and Google's HCT
- 📏 Perceptual Color Metrics - Delta E (76/94/2000) and HCT-based distance
- 🎭 Material Design 3 - Complete theme generation with tonal palettes
- 🔍 Smart Theme Matching - Find closest CSS variables for any color
- 🖼️ Image Color Extraction - Extract dominant colors using Celebi quantization
- ♿ WCAG Compliance - Automatic contrast ratio checking
- 🔄 CSS Refactoring - Automated legacy color replacement with theme variables
- 🎯 Context-Aware - Different matching strategies for text, background, borders
- 🌈 Advanced Palette Generation - Create palettes with locked colors
- 🎨 Gradient Generation - Smooth gradients with multiple interpolation methods
- 🚫 Dislike Analysis - Detect and fix universally disliked colors

Installation

Method 1: NPX (Recommended)

No installation needed - runs directly:

Claude Desktop Configuration

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

Claude Code Configuration

claude mcp add coolors --npm-package @trishchuk/coolors-mcp

Method 2: NPM Install

npm install @trishchuk/coolors-mcp

Method 3: From Source

git clone https://github.com/x51xxx/coolors-mcp
cd coolors-mcp
npm install
npm run build

Quick Start

Run as MCP Server

```bash

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

convert_color

color_distance

check_contrast

adjust_color

generate_palette

generate_palette_with_locks

generate_gradient

export_palette

simulate_color_blindness

check_palette_accessibility

generate_tonal_scale

generate_state_colors

analyze_palette_consistency

generate_semantic_palette

generate_material_theme

harmonize_colors

generate_tonal_palette

match_theme_color

refactor_css_with_theme

match_theme_colors_batch

generate_theme_css

extract_image_colors

generate_theme_from_image

analyze_color_likability

fix_disliked_colors_batch

Claude Desktop / Cursor

McpServers

Coolors MCP

Features

Installation

Method 1: NPX (Recommended)

Claude Desktop Configuration

Claude Code Configuration

Method 2: NPM Install

Method 3: From Source

Quick Start

Run as MCP Server

Install

More like this

Google Maps

BlenderMCP

AWS MCP Servers

Figma Context (Framelink)

KiCAD-MCP-Server

DaVinci Resolve MCP Server

`convert_color`

`color_distance`

`check_contrast`

`adjust_color`

`generate_palette`

`generate_palette_with_locks`

`generate_gradient`

`export_palette`

`simulate_color_blindness`

`check_palette_accessibility`

`generate_tonal_scale`

`generate_state_colors`

`analyze_palette_consistency`

`generate_semantic_palette`

`generate_material_theme`

`harmonize_colors`

`generate_tonal_palette`

`match_theme_color`

`refactor_css_with_theme`

`match_theme_colors_batch`

`generate_theme_css`

`extract_image_colors`

`generate_theme_from_image`

`analyze_color_likability`

`fix_disliked_colors_batch`