OpenClaw Color Palette v2.0

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

Quick Reference

| Situation | Action | Tool |

|-----------|--------|------|

| Starting a new website or app design | Generate a harmonious palette from a brand color | generate_palette |

| Text looks hard to read on a background | Check WCAG 2.1 AA/AAA contrast ratio | check_contrast |

| Designer gave hex, you need RGB for code | Convert between any color format | convert_color |

| Need to ensure inclusive design | Simulate 8 types of color vision deficiency | color_blindness_sim |

| Client sent a logo, need brand colors | Extract dominant colors with frequency data | extract_palette |

| Building a design system from scratch | Generate palette + check contrast + simulate CVD | All 3 combined |

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.

| Parameter | Type | Default | Description |

|-----------|------|---------|-------------|

| color | string | required | Seed color in any format: hex, RGB, HSL, or CSS name |

| harmony | string | "complementary" | Algorithm: complementary, analogous, triadic, split-complementary, tetradic, monochromatic |

| count | number | 5 | Number of colors to generate (3-8) |

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.

| Parameter | Type | Default | Description |

|-----------|------|---------|-------------|

| foreground | string | required | Text color (any format) |

| background | string | required | Background color (any format) |

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.

| Parameter | Type | Default | Description |

|-----------|------|---------|-------------|

| color | string | required | Color in any recognized format |

| format | string | "all" | Target format: hex, rgb, hsl, hsv, cmyk, all |

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.

| Parameter | Type | Default | Description |

|-----------|------|---------|-------------|

| colors | string[] | required | Array of colors to simulate (any format) |

| types | string[] | ["all"] | CVD types to simulate, or "all" for all 8 |

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.

| Parameter | Type | Default | Description |

|-----------|------|---------|-------------|

| image | string | required | Image URL or base64 data string |

| count | number | 5 | Number of dominant colors to extract (3-10) |

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

| Don't | Why | Do Instead |

|-------|-----|------------|

| Expect print-accurate CMYK values | Mathematical conversion only, no ICC profiles | Use a color management system for print |

| Send images over 5MB | Edge workers have memory limits | Resize or compress images first |

| Use CVD simulation for medical diagnosis | Illustrative only, not clinically calibrated | Refer to ophthalmology resources |

| Rely solely on contrast ratio for accessibility | Color is one aspect of accessibility | Also consider font size, weight, and spacing |

| Input colors with alpha in CMYK conversion | CMYK has no alpha channel concept | Remove alpha or use RGB/HSL output |

Security & Privacy

| What | Status |

|------|--------|

| Reads your color values and images | Yes -- for processing only |

| Stores your data or images | No -- zero persistence, stateless edge processing |

| Sends data to third parties | No -- processed entirely on Cloudflare Workers |

| Logs request content | No -- only anonymous usage counters |

| Downloads images to server | Fetched transiently for extraction, never stored |

| Requires authentication | Free tier: no. Pro: API key header only |

Pricing

| Tier | Calls/Day | Price | What You Get |

|------|-----------|-------|--------------|

| Free | 25 | $0 | All 5 color tools, no signup |

| Pro | 1,000 | $9/mo | All 9 OpenClaw servers (49 tools), priority routing |

| x402 | Pay-per-call | $0.05 USDC | No account needed, crypto-native |

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

The OpenClaw Intelligence Stack

| Server | Tools | Best For |

|--------|-------|----------|

| JSON Toolkit | 6 | Format, validate, diff, query, transform JSON |

| Regex Engine | 5 | Test, extract, replace, explain regex patterns |

| Color Palette | 5 | Generate, convert, harmonize, accessibility-check colors |

| Timestamp Converter | 5 | Parse, format, diff, timezone-convert timestamps |

| Prompt Enhancer | 6 | Optimize, rewrite, score, A/B test AI prompts |

| Market Intelligence | 6 | AI market trends, GitHub stats, competitor analysis |

| Fortune & Tarot | 3 | Daily fortune, tarot readings, I Ching |

| Content Publisher | 8 | MoltBook posts, social content, newsletter |

| AgentForge Compare | 5 | Compare AI tools, frameworks, MCP servers |

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