What color spaces does Coolors MCP support?
It supports RGB, HSL, HSV, LAB, XYZ, and Google's HCT color space.
C
Coolors MCP Server
@x51xxx
基本信息
关于 Coolors MCP Server
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.
Coolors MCP Server 配置
使用下面的配置,将此服务器添加到你的 MCP 客户端。
{
"mcpServers": {
"coolors": {
"command": "npx",
"args": [
"-y",
"@trishchuk/coolors-mcp"
]
}
}
}Coolors MCP Server 工具
25Convert colors between different formats (hex, rgb, hsl, lab, hct)
Calculate perceptual distance between two colors using Delta E 2000
Check contrast between two colors. Supports WCAG 2.x luminance ratio (default), APCA Lc (WCAG 3 draft), or both algorithms side-by-side.
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 a color palette from a base color
Generate a color palette while preserving specific locked colors
Generate a smooth gradient between colors with multiple interpolation methods
Export a list of colors as CSS custom properties, SCSS variables, a Tailwind config snippet, W3C design tokens, or JSON.
Simulate how one or more colors appear to viewers with color vision deficiency (protanopia, deuteranopia, tritanopia, their milder anomaly forms, or achromatopsia).
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 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 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.
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.
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 a complete Material Design 3 color theme from a source color
Harmonize colors to work better together using Material Design algorithms
Generate a Material Design tonal palette from a color
Find the closest matching theme variable for a given color
Refactor CSS to use theme variables instead of hardcoded colors
Find theme matches for multiple colors at once
Generate CSS custom properties for a complete theme from a source color
Extract dominant colors from an image. Input should be image data as an array of RGBA values.
Generate a complete Material Design 3 theme from an image
Check if a color is universally disliked (dark yellow-green associated with biological waste) and get a fixed version if needed
Analyze and fix multiple colors, returning only liked versions
概览
What is Coolors MCP?
Coolors MCP is an advanced color operations MCP server with Material Design 3 support, CSS theme matching, image color extraction, and accessibility compliance. It is designed for developers and designers who need programmatic color manipulation, theme generation, and WCAG contrast checking within MCP-compatible environments like Claude.
How to use Coolors MCP?
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.
Key features of Coolors MCP
- 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
Use cases of Coolors MCP
- Convert hardcoded colors to CSS variables with confidence scores
- Ensure all color combinations meet WCAG AA/AAA standards
- Generate complete Material Design 3 themes with tonal palettes
- Create cohesive palettes that harmonize brand colors
- Extract colors from logos or photos to generate matching themes
常见问题
How does the HCT color space work for accessibility?
HCT tone difference of 40 guarantees a 3:1 contrast ratio; tone difference of 50 guarantees 4.5:1, making it perceptually uniform for UI design.
Can Coolors MCP extract colors from images?
Yes, it uses the Celebi quantization algorithm to extract dominant colors from RGBA pixel data, and can generate Material Design themes from those colors.
Is Coolors MCP free and open-source?
Yes, it is released under the MIT license and built with the MCP SDK and Google’s Material Color Utilities.
Does it support custom CSS variable generation?
Yes, tools like `generate_theme_css` output CSS custom properties for complete themes, and `refactor_css_with_theme` automatically replaces legacy colors with theme variables.
媒体与设计 分类下的更多 MCP 服务器
PopNow MCP Server
PopNowHosted MCP server for AI image, video, music and voice generation. Lets ChatGPT, Claude, Cursor and any MCP client create with Kling, Seedance, Nano Banana, Suno and more using PopNow credits. OAuth 2.1 sign-in, nothing
Ultimaps
ultimaps.comTurn your data into map images of countries, states, counties and ZIP codes with Ultimaps MCP server. Each map comes with a link to Ultimaps Studio, where you can keep editing it, export it, or publish an interactive ver
QR Planet QR Code MCP Server
qrplanetQR Planet QR Code MCP Server - Hosted MCP server for QR Planet. Connect AI agents and MCP-compatible clients to create, update, design, route, and analyze dynamic QR Codes using your QR Planet API key.
1
CampaignStack
Run LinkedIn and email outreach from Claude, safely. Made for lead gen agencies, founders and medium-large companies. Every account gets enforced daily limits, its own proxy, and a review queue before anything sends.
Shotstack
Shotstack's official MCP server gives AI assistants direct access to the Shotstack video editing API, so you can produce video from a conversation instead of writing Edit JSON by hand. Available tools cover rendering vid
评论