openclaw-color-palette（OpenClaw color palette 开发）

OpenClaw Color Palette v2.0

Design-grade color tools -- 5 tools for palettes, accessibility, conversion, simulation, and extraction.

Quick Reference

What's New in v2.0

• :art: HarmonyEngine -- 6 color theory algorithms: complementary, analogous, triadic, split-complementary, tetradic, monochromatic. Mathematically precise palette generation from any seed color.
• :shield: AccessGuard Protocol -- Full WCAG 2.1 AA and AAA checking for normal and large text. When contrast fails, auto-suggests the nearest accessible color pair with minimal visual change.
• :eye: VisionSim 8-Type -- Simulate protanopia, deuteranopia, tritanopia, achromatopsia, protanomaly, deuteranomaly, tritanomaly, and achromatomaly. Warns when palette colors become indistinguishable.
• :dropper: ChromaExtract -- K-means clustering extracts 5-10 dominant colors from any image URL or base64 data, sorted by area percentage.

MCP Quick Start

{
  "openclaw-colors": {
    "type": "streamable-http",
    "url": "https://color-palette-mcp.yagami8095.workers.dev/mcp"
  }
}

Add to Claude Desktop, Cursor, Windsurf, VS Code, or any MCP-compatible client. No API key needed for Free tier. Works immediately.

Detection Triggers

This skill activates when you say:

• "generate a color palette" / "color scheme for my website" / "give me colors for"
• "check contrast" / "is this readable" / "WCAG accessibility" / "contrast ratio"
• "convert hex to RGB" / "convert color" / "what is #FF5733 in HSL" / "hex to CMYK"
• "simulate color blindness" / "how do colorblind users see this" / "protanopia simulation"
• "extract colors from image" / "pull palette from logo" / "brand colors from screenshot"
• "complementary colors" / "analogous palette" / "triadic" / "split-complementary" / "monochromatic"

Tools (5)

generate_palette -- Harmony-Based Palettes (HarmonyEngine)

Generate mathematically harmonious color palettes from any seed color using 6 color theory algorithms.

Output: Array of colors, each with hex, rgb, hsl, name (nearest CSS name), plus ready-to-paste CSS custom properties (--color-primary, --color-secondary, etc.).

WRONG vs RIGHT

WRONG -- Picking colors by gut feeling in a color picker:

User: I need a color palette for my SaaS dashboard
Agent: *suggests random colors* "#3498db, #e74c3c, #2ecc71" — no harmony, no theory, may clash

RIGHT -- Use generate_palette:

User: I need a color palette based on #3498db
Agent: calls generate_palette with triadic harmony → returns 5 mathematically balanced colors with hex/RGB/HSL, CSS variables, and named descriptors

check_contrast -- WCAG Accessibility Checker (AccessGuard Protocol)

Check foreground/background color contrast ratio against WCAG 2.1 standards for both AA and AAA levels, normal and large text.

Output: { ratio: "4.5:1", AA_normal: "pass", AA_large: "pass", AAA_normal: "fail", AAA_large: "pass", suggestion: { foreground: "#...", background: "#..." } }

When contrast fails, suggestion provides the nearest accessible color pair that passes with minimal visual change from the original colors.

WRONG vs RIGHT

WRONG -- Eyeballing if light gray text on white is readable:

User: Is #999999 text readable on white?
Agent: *guesses* "It looks okay to me" — fails WCAG AA at 2.85:1 (needs 4.5:1)

RIGHT -- Use check_contrast:

User: Is #999999 text readable on white?
Agent: calls check_contrast → "Ratio 2.85:1 — FAILS AA normal text (needs 4.5:1). Suggestion: darken to #767676 for AA pass at 4.54:1"

convert_color -- Universal Format Conversion (ChromaBridge)

Convert any color between hex, RGB, HSL, HSV, CMYK, and all 140 CSS named colors. Auto-detects input format.

Auto-detected inputs: #FF5733, #F53, rgb(255,87,51), rgba(255,87,51,0.8), hsl(11,100%,60%), hsv(11,80%,100%), cmyk(0,66,80,0), tomato, rebeccapurple.

Output: All formats simultaneously plus nearestCssName, luminance, isLight (boolean for text color selection).

color_blindness_sim -- Vision Deficiency Simulation (VisionSim 8-Type)

Simulate how any color or full palette appears to users with 8 different types of color vision deficiency.

8 types:

• Protanopia -- no red cones (1% of males)
• Deuteranopia -- no green cones (1% of males)
• Tritanopia -- no blue cones (0.003% of population)
• Achromatopsia -- complete color blindness (rare)
• Protanomaly -- weak red cones (1% of males)
• Deuteranomaly -- weak green cones (5% of males, most common CVD)
• Tritanomaly -- weak blue cones (very rare)
• Achromatomaly -- weak all cones (rare)

Output: For each color, simulated hex values for each CVD type plus warnings[] where palette colors become indistinguishable (Delta E < 5).

extract_palette -- Image Color Extraction (ChromaExtract)

Extract dominant colors from an image URL or base64 data using k-means clustering algorithm.

Output: Array of colors sorted by area percentage, each with hex, rgb, percentage, name (nearest CSS name). Total coverage percentage included.

Use for: Brand color analysis, design inspiration, mood board creation, logo color extraction, competitive design analysis.

What NOT to Do

Security & Privacy

Pricing

Get Pro Key: https://buy.stripe.com/4gw5na5U19SP9TW288

The OpenClaw Intelligence Stack

All 9 servers share one Pro key. $9/mo = 49 tools.