◎Home
NEW · MCP

Give your AI coding agent a verified color system

Connect Claude Code, Cursor or Codex to ColorwayKit over MCP: one brand hex in, semantic tokens for light & dark out — with measured WCAG/APCA contrast on every pair.

What your agent can do

get_theme

One brand hex → full light & dark semantic theme (23 roles each), per-pair WCAG ratio + APCA Lc, fix suggestions.

Input sample (arguments the agent passes)

{
  "brandHex": "#EA580C"    // Brand color (6-digit hex)
}

Real output sample (brand #EA580C)

{
  "brand": "#ea580c",
  "tokens": {
    "light": {
      "background": "#fafafa",
      "surface": "#ffffff",
      "primary": "#ea580c",
      "primaryForeground": "#270000"
      // … 23 roles in total
    },
    "dark": {
      "background": "#0a0a0a",
      "primary": "#ff8d61"
      // … 23 roles in total
    }
  },
  "contrast_checks": [
    {
      "foreground": "primary",
      "background": "background",
      "wcag_ratio": 8.71,
      "wcag_pass": true,
      "apca": {
        "lc": -57.6
      }
    }
    // … 26 measured pairs; failing ones include a fix
  ]
}

Real engine output — every contrast number is measured, not copied from docs.

Build a theme first

Paste one brand hex into the Brand Theme Engine and export the same verified theme as DESIGN.md, CSS variables, Tailwind config and more.

Open the Brand Theme Engine →

Connect your agent

claude mcp add --transport http colorwaykit https://www.colorwaykit.com/api/mcp --header "Authorization: Bearer ck_YOUR_TOKEN"

Replace ck_YOUR_TOKEN with your token. Run the command inside your project directory.

…

Verify the connection

Then ask your agent:

list the color tokens for #4F46E5

If it replies with named roles — background, surface, primary, on-primary — plus measured contrast numbers, you are connected.

Prefer reading first?

The full workflow — from one brand color to a DESIGN.md your agent follows:

ColorwayKit for Agents — the DESIGN.md workflow →
ColorwayKit MCP — a verified color system for your agent →
Skills templates — DESIGN.md + agent templates →

MCP or files — which one?

MCP (this page)

Always reads the latest engine, works across every project, metered per account — for daily development where the agent pulls your brand tokens on demand.

Files (DESIGN.md + templates)

Zero runtime dependency, versioned with the repo, works offline — for baking your brand system into the codebase for CI and teammates. Templates on GitHub ↗

Quota

MCP access requires a free account: Free gets 5 calls per day, Plus 1,000 calls per month, Pro unlimited. When you hit the limit the agent tells you — upgrade any time. See plans

FAQ

Do I need an account to use the MCP server?

Yes. MCP access requires a free account — generate an agent token on this page after signing in. Free accounts get 5 calls per day; Plus 1,000 calls per month; Pro unlimited.

Which clients are supported?

Any MCP client with Streamable HTTP transport: Claude Code, Cursor, Codex, Gemini CLI and more. Connection configs for each are on this page.

MCP vs the DESIGN.md file — what's the difference?

MCP is a live interface: the agent pulls your current theme and its verification results on demand. DESIGN.md is a file: committed to the repo, versioned, offline-friendly. You can use both.

Are the contrast results actually measured?

Yes. Every token pair is computed server-side with WCAG 2.1 ratio (AA/AAA conclusions) and APCA Lc, plus a fix suggestion when a pair fails.

ColorwayKit is not affiliated with Anthropic, Cursor or Google. MCP is an open protocol; client setup steps may change with your tool's version.