MCP.so
ログイン
C

Coolors MCP

@x51xxx

リポジトリ

Coolors MCP について

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.

#color#material-design#css#accessibility

基本情報

カテゴリ

メディアとデザイン

トランスポート

stdio

公開者

x51xxx

投稿者

Тарас Тріщук

設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

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

ツール

17

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

Calculate perceptual distance between two colors using Delta E 2000

Check WCAG contrast ratio between two colors

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

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

FAQ from Coolors MCP

What color spaces does Coolors MCP support?

It supports RGB, HSL, HSV, LAB, XYZ, and Google's HCT color space.

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.

コメント

「メディアとデザイン」の他のコンテンツ

Spotify MCP Server

marcelmarais

Lightweight MCP server for Spotify

384

RustChain MCP

Scottcjn

MCP server for RustChain blockchain and BoTTube video platform — AI agent tools for earning RTC tokens. Built on createkr's RustChain SDK.

99

Vibe Design System

mondaycom

🎨 Vibe Design System - Official monday.com UI resources for application development in React.js

657

MiniMax MCP

MiniMax-AI

Official MiniMax Model Context Protocol (MCP) server that enables interaction with powerful Text to Speech, image generation and video generation APIs.

1.5K

Photoshop MCP Server

loonghao

A Model Context Protocol (MCP) server that interfaces with Adobe Photoshop's Python API. Enables LLMs to execute image editing operations, automate workflows, and manage Photoshop tasks through structured commands and context-aware interactions.

275