Color Palette MCP - Generate Palettes, Check Contrast & Convert Colors

Color Palette MCP Server

EN: Generate color palettes, check accessibility contrast, and create CSS gradients through your AI assistant. 繁中: 透過 AI 助手產生配色方案、檢查無障礙對比度、建立 CSS 漸層。 日本語: AIアシスタントでカラーパレット生成、アクセシビリティコントラスト確認、CSSグラデーション作成ができます。

What is this? Why do I need it?

• Choosing colors that look good together is harder than it sounds. Color theory exists for a reason. This server generates harmonious palettes using real color theory (complementary, triadic, analogous, split-complementary) so your designs look professional without a design degree.
• Accessibility is not optional anymore. WCAG 2.1 requires minimum contrast ratios between text and background colors. The contrast checker instantly tells you if your color combination passes AA or AAA standards -- no need to visit a separate accessibility testing site.
• Switching between hex, RGB, HSL, and Tailwind classes is tedious. Designers give you hex codes, your CSS uses RGB, your framework uses Tailwind classes. This server converts between all formats instantly and finds the closest Tailwind utility class for any color.

Quick Install

Cursor (One Click)

Claude Desktop

Add to your MCP config file (claude_desktop_config.json):

{
  "mcpServers": {
    "color-palette": {
      "url": "https://color-palette-mcp.yagami8095.workers.dev/mcp"
    }
  }
}

Smithery

npx @smithery/cli install @openclaw-ai/color-palette-mcp

Tools

Tool	What it does	Example prompt
generate_palette	Create a harmonious color palette from a base color using color theory	"Generate a 5-color palette based on #3b82f6 using complementary harmony"
contrast_check	Check WCAG 2.1 contrast ratio between two colors (AA/AAA pass/fail)	"Is white text readable on a #3b82f6 blue background?"
color_convert	Convert between hex, RGB, HSL, and CSS named colors	"Convert #ff6b35 to RGB and HSL"
css_gradient	Generate ready-to-paste CSS gradient code (linear, radial, conic)	"Create a CSS gradient from ocean blue to sunset orange"
tailwind_colors	Find the closest Tailwind CSS utility class for any hex color	"What Tailwind class is closest to #3b82f6?"

Copy-Paste Examples

Example 1: Generate a palette for a new project

Just say to your AI: "I'm building a SaaS dashboard. Generate a professional 5-color palette based on #3b82f6 with complementary harmony, and check if white text is accessible on each color."

Example 2: Check if your design is accessible

Just say to your AI: "Check the WCAG contrast ratio between my text color #333333 and background color #f5f5f5. Does it pass AA and AAA?"

Example 3: Get CSS gradient code

Just say to your AI: "Create a CSS linear gradient from #667eea to #764ba2 going left to right, ready to paste into my stylesheet"

Plans

Plan	Cost	Calls
Free	$0	25/day
Pro	$29/mo	50,000/month

よくある質問

Q: 何かをインストールする必要がありますか？ A: いいえ。Cloudflare Workers 上のクラウドサービスです。URL を MCP の設定に追加すれば、すぐに使用できます。無料プランでは API キーは不要です。

Q: どのような色彩調和に対応していますか？ A: 補色、三色配色、類似色、分裂補色、四色配色に対応しています。これらは、実際のデザイン作業で特に役立つ 5 つの色彩調和です。

Q: コントラストチェッカーは最新の WCAG 基準に準拠していますか？ A: はい。通常のテキスト（AA：4.5:1、AAA：7:1）と大きなテキスト（AA：3:1、AAA：4.5:1）の両方について、WCAG 2.1 の基準に照らしてチェックします。正確なコントラスト比は、常に応答に含まれます。

リンク

• メインリポジトリ
• 全 9 サーバー

ライセンス

MIT