Coolors MCP
🏷️ 1.0.0

Appearance

Coolors MCPColor tools for AI assistants

Perceptual color descriptions, WCAG and APCA contrast fixes, Material Design 3 themes on Google's HCT, palettes, color-blindness checks, CSS theme refactoring and DESIGN.md audits — built for Claude Code

Get Started
All 31 Tools
View on GitHub
👁️

Colors an agent can see

describe_color turns a hex code into a name, temperature, lightness, OKLCH/HCT/HSL/RGB values, the best text color and likely UI roles.

♿

Contrast without guessing

WCAG 2.x ratio and APCA Lc side by side. fix_contrast finds the closest same-hue color that meets AA, AAA, UI or APCA targets.

🎭

Material Design 3 on HCT

Light and dark Material 3 schemes, tonal palettes and harmonization, built on Google's CAM16-based HCT from Material Color Utilities.

🎨

Palettes and UI tokens

Light + dark UI token sets, tonal scales, state colors, semantic and color-blind-safe categorical palettes, gradients, and export to CSS, SCSS, Tailwind, W3C tokens or DESIGN.md.

🔍

CSS theme matching

Map hard-coded colors to your theme's custom properties and rewrite stylesheets to use them, with confidence scores.

🧪

Color-blindness, images and DESIGN.md

Simulate 7 color-vision deficiencies, audit palettes for collisions, extract dominant colors from images, and audit DESIGN.md color tokens.

•••

31 read-only tools · runs locally · no API keys

What is Coolors MCP? ​

Coolors MCP is a Model Context Protocol (MCP) server that gives AI assistants such as Claude a set of color tools. A model cannot see a hex code; these tools tell it what a color looks like, whether text on it is readable, and how to fix it. They also build palettes and Material Design 3 themes, check colors for color-blind viewers, and move hard-coded CSS colors onto theme variables.

All 31 tools are read-only and run locally over stdio. There are no API keys, no network requests and no configuration.

Key features ​

  • Perceptual descriptions: names, temperature, lightness and vividness for any color (describe_color).
  • Contrast: WCAG 2.x ratio and APCA Lc (matching apca-w3 0.1.9), with exact same-hue fixes (check_contrast, fix_contrast, audit_ui_colors).
  • Google's HCT: the CAM16-based HCT from @material/material-color-utilities drives themes, tonal palettes, scales, state colors and dislike detection.
  • Material Design 3: light and dark schemes, tonal palettes, harmonization and CSS custom properties.
  • Palettes: color harmonies, locked colors, gradients in 7 color spaces, UI token sets, semantic and categorical palettes, cohesion scoring and export.
  • Color-vision deficiency: simulation of protanopia, deuteranopia, tritanopia and their milder forms (Machado et al. 2009 matrices), plus achromatopsia, and palette collision audits.
  • CSS theme matching: match colors to custom properties and refactor stylesheets.
  • Images: dominant colors via Celebi quantization, and Material themes from images.
  • DESIGN.md: audit the color tokens of a DESIGN.md file.

Why HCT? ​

HCT (hue, chroma, tone) is the color space Google built for Material Design 3. Hue and chroma come from the CAM16 color appearance model, and tone is CIE L*, perceived lightness.

Because tone is L*, the WCAG contrast between two colors depends only on their tones. Tone-40 colors of different hues all land at about the same contrast on white: #016e00 (green) gives 6.50:1, #c00000 (red) 6.48:1, #0052dd (blue) 6.46:1 and #6750a4 (violet) 6.44:1. That makes it possible to pick tones for readable pairs before choosing hues. Read more in HCT.

Quick Start ​

Requires Node.js 20 or newer.

Claude Code ​

bash
claude mcp add coolors -- npx -y @trishchuk/coolors-mcp

Then run /mcp in Claude Code to check that coolors is connected.

Claude Desktop, Cursor and other clients ​

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

More options: Installation.

Things to ask ​

Describe #6366f1 and tell me what text color to put on it
Is #9e9e9e readable on white? Fix it for WCAG AA
Design a light and dark UI palette from #6750a4
Make 6 color-blind-safe chart colors for a dark background
Replace the hard-coded colors in this CSS with my theme variables
Audit the colors in my DESIGN.md

Getting Started walks through these with real results.

Tools by category ​

CategoryTools
Agent toolsdescribe_color, fix_contrast, design_ui_palette, audit_ui_colors, generate_categorical_palette
Color operationsconvert_color, color_distance, check_contrast, adjust_color
Accessibilitysimulate_color_blindness, check_palette_accessibility
Palettesgenerate_palette, generate_palette_with_locks, generate_gradient, export_palette
Visual cohesiongenerate_tonal_scale, generate_state_colors, analyze_palette_consistency, generate_semantic_palette
Material Designgenerate_material_theme, harmonize_colors, generate_tonal_palette
Theme matchingmatch_theme_color, match_theme_colors_batch, refactor_css_with_theme, generate_theme_css
Images and color psychologyextract_image_colors, generate_theme_from_image, analyze_color_likability, fix_disliked_colors_batch
DESIGN.mdaudit_design_md

Documentation ​

Community & Support ​

License ​

This project is licensed under the MIT License. See the LICENSE file for details.

Built with ❤️ on Google's Material Color Utilities

Released under the MIT License.

Copyright © 2026 Coolors MCP Contributors