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.
「メディアとデザイン」の他のコンテンツ
Sleek
SleekDesign your mobile app UI with AI, then have your coding agent build the real app from it.
EmbedSocial
Connect Claude, ChatGPT, and other AI assistants to your social media content, reviews, and UGC aggregated via EmbedSocial.
Lamina — On-brand product photos, video & try-ons
LaminaGenerate on brand product videos from Claude Code (or any assistant) in one line. Lamina turns a brief + your brand kit into finished product photos, video reels, and campaign banners - no prompt engineering; brand guard
Artlist
ArtlistGenerate images, videos, music, and voice-overs directly from your AI agent. The full Artlist AI creative suite as an MCP server — works with Claude, ChatGPT, and VS Code, with more platforms coming soon.
PostNitro
PostNitro Inc.The PostNitro MCP server lets AI assistants and agents — Claude (Desktop, Code, and Cowork), Cursor, ChatGPT, and any other Model Context Protocol client — create carousels, image posts, and videos, manage brand kits, a
コメント