Swatch MCP

An MCP server for the Swatch tool that allows AI agents to check WCAG 2.x color contrast ratios for text and background pairs, fix failing colors by adjusting lightness while preserving hue, generate accessible 50-950 color palettes from a single base color, and convert colors between various CSS formats like hex, rgb, hsl, and oklch.

Visit Clawhard Studio

Endpoint and access

No sign-in to connect and list tools. Individual tools may still need a vendor account, credentials, or permissions; check the documented prerequisites.

Vendor evidenceStreamable HTTPNo sign-inEndpoint checked 2026-11-02Operated by Clawhard Studio

MCP endpoint (Streamable HTTP)

https://swatch.clawhard.com/mcp

Vendor documentation

What its tools do

6 tools, grouped by the hints the server advertises. Hints are self-declared, not verified behavior.

6 of 6 have a description · 6 of 6 declare behavior hints · 6 of 6 with parameters document them all

Checks and signals

Each line is separate evidence, not a trust score.

Passed Endpoint answered the live check · Nov 2, 2026, 9:19 PM UTC
Passed Official MCP Registry namespace is tied to clawhard.com · Nov 2, 2026, 9:17 PM UTC
Passed Endpoint is on the registry namespace domain · Nov 2, 2026, 9:17 PM UTC
Uptime 100% over 90 days
Availability 1 of 1 checks passed in 30 days

What you can do with it

Check if a text color passes WCAG AA or AAA contrast against a background
Fix failing color pairs by finding the nearest accessible shade
Generate a full 50-950 design token palette from a single brand color
Convert colors between hex, rgb, hsl, and oklch formats

Source and maintenance

Vendor evidenceRegistry 1.0.0

mcp-registry: com.clawhard/swatch@1.0.0 Project website

Protocol and capabilities

Server: com.clawhard/swatch 1.0.0
MCP protocol negotiated in check: 2025-06-18
Tools: 6 advertised
Resources: 6 advertised
Resource templates: 0 advertised
Prompts: 1 advertised

Server-advertised capabilities

{
  "tools": {
    "listChanged": false
  },
  "prompts": {
    "listChanged": false
  },
  "resources": {
    "subscribe": false,
    "listChanged": false
  }
}

Server-provided instructions

Untrusted server output shown for inspection. It is not Koskamo guidance and is excluded from knowledge search.

Swatch: Swatch checks text and background color contrast against WCAG, shows the closest colors that pass, and builds a full 50-950 palette from any color. Runs in your browser, no account. Use it when you pick, review or generate UI colors and need an exact contrast ratio, a passing replacement, a palette scale or a color conversion. Tools: swatch_check_contrast (Check the WCAG contrast of a text and background color); swatch_fix_contrast (Find the nearest accessible color that passes contrast); swatch_pick_text_color (Pick black or white text for a background); swatch_make_scale (Build a 50-950 color palette from one color); swatch_convert_color (Convert a color between hex, rgb, hsl and oklch); swatch_check_pairs (Check contrast for many color pairs at once). Result links such as open_url are safe to share with the user.

Tools

6 advertised

swatch_check_contrast — Check the WCAG contrast of a text and background color

Advertised by the server during the last successful anonymous check.

Advertised read-only

Use when the user asks whether a color combination is readable or accessible, passes WCAG AA or AAA, or has enough contrast (text on a background, button, badge, link color). Returns the exact contrast ratio, pass or fail for normal text, large text and UI components at AA and AAA, the APCA lightness contrast and a plain note. Colors can be hex, rgb(), hsl() or CSS names. Example: {"foreground": "#777777", "background": "#ffffff"}. Language models cannot compute this reliably, so call it instead of guessing.

swatch_check_contrast input schema

{
  "type": "object",
  "required": [
    "foreground",
    "background"
  ],
  "properties": {
    "background": {
      "type": "string",
      "maxLength": 80,
      "minLength": 1,
      "description": "Background color, e.g. \"#ffffff\"."
    },
    "foreground": {
      "type": "string",
      "maxLength": 80,
      "minLength": 1,
      "description": "Text (or icon) color, e.g. \"#767676\" or \"rgb(20 20 20)\" or \"tomato\"."
    }
  }
}

swatch_check_contrast annotations

{
  "title": "Check the WCAG contrast of a text and background color",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}

swatch_fix_contrast — Find the nearest accessible color that passes contrast

Advertised by the server during the last successful anonymous check.

Advertised read-only

Use when a color pair fails contrast and the user wants the smallest change that makes it pass, such as "make this gray text accessible without changing the look". Returns the closest text color on that background that reaches the target (AA, AAA, AA-large or ui), and separately the closest background, keeping the hue. Example: {"foreground": "#777777", "background": "#ffffff", "target": "AA"}. Returns already_passes if nothing needs to change.

swatch_fix_contrast input schema

{
  "type": "object",
  "required": [
    "foreground",
    "background"
  ],
  "properties": {
    "target": {
      "enum": [
        "AA",
        "AAA",
        "AA-large",
        "ui"
      ],
      "type": "string",
      "description": "Contrast target. Default AA."
    },
    "background": {
      "type": "string",
      "maxLength": 80,
      "minLength": 1,
      "description": "Current background color."
    },
    "foreground": {
      "type": "string",
      "maxLength": 80,
      "minLength": 1,
      "description": "Current text color."
    }
  }
}

swatch_fix_contrast annotations

{
  "title": "Find the nearest accessible color that passes contrast",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}

swatch_pick_text_color — Pick black or white text for a background

Advertised by the server during the last successful anonymous check.

Advertised read-only

Use when the user asks what text color (black or white) to put on a given background, button or brand color so it is readable. Returns the better of black or white with both contrast ratios, the WCAG grade and a softer near-black option. Example: {"background": "#ff5a1f"}.

swatch_pick_text_color input schema

{
  "type": "object",
  "required": [
    "background"
  ],
  "properties": {
    "background": {
      "type": "string",
      "maxLength": 80,
      "minLength": 1,
      "description": "The surface color the text sits on."
    }
  }
}

swatch_pick_text_color annotations

{
  "title": "Pick black or white text for a background",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}

swatch_make_scale — Build a 50-950 color palette from one color

Advertised by the server during the last successful anonymous check.

Advertised read-only

Use when the user asks for a palette, shades, tints, a design-token scale or a Tailwind-style 50 to 950 ramp from a brand color. Returns 11 steps that keep the hue, with the hex, contrast on white and on black, and the best text color for each step. Example: {"color": "#ff5a1f", "name": "brand"}.

swatch_make_scale input schema

{
  "type": "object",
  "required": [
    "color"
  ],
  "properties": {
    "name": {
      "type": "string",
      "maxLength": 24,
      "description": "Token name used in the CSS and Tailwind output. Default \"brand\"."
    },
    "color": {
      "type": "string",
      "maxLength": 80,
      "minLength": 1,
      "description": "Base color, e.g. \"#ff5a1f\"."
    }
  }
}

swatch_make_scale annotations

{
  "title": "Build a 50-950 color palette from one color",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}

swatch_convert_color — Convert a color between hex, rgb, hsl and oklch

Advertised by the server during the last successful anonymous check.

Advertised read-only

Use when the user asks to convert a color between hex, RGB, HSL and OKLCH, or asks what a color is called or how light it is. Returns all formats, the relative luminance and the nearest CSS color name. Example: {"color": "#ff5a1f"}. Exact math, so prefer it to converting by hand.

swatch_convert_color input schema

{
  "type": "object",
  "required": [
    "color"
  ],
  "properties": {
    "color": {
      "type": "string",
      "maxLength": 80,
      "minLength": 1,
      "description": "Any CSS color."
    }
  }
}

swatch_convert_color annotations

{
  "title": "Convert a color between hex, rgb, hsl and oklch",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}

swatch_check_pairs — Check contrast for many color pairs at once

Advertised by the server during the last successful anonymous check.

Advertised read-only

Use when the user has a whole design system, theme or stylesheet and wants every text and background pair checked for accessibility in one go. Takes up to 50 pairs and returns the ratio and AA and AAA results for each, with a count of failures. Example: {"pairs": [{"foreground": "#777", "background": "#fff", "label": "muted text"}, {"foreground": "#fff", "background": "#ff5a1f", "label": "button"}]}.

swatch_check_pairs input schema

{
  "type": "object",
  "required": [
    "pairs"
  ],
  "properties": {
    "pairs": {
      "type": "array",
      "items": {
        "type": "object",
        "required": [
          "foreground",
          "background"
        ],
        "properties": {
          "label": {
            "type": "string",
            "maxLength": 60,
            "description": "Optional name, like \"muted text on card\"."
          },
          "background": {
            "type": "string",
            "maxLength": 80,
            "minLength": 1
          },
          "foreground": {
            "type": "string",
            "maxLength": 80,
            "minLength": 1
          }
        }
      },
      "maxItems": 50,
      "minItems": 1,
      "description": "Pairs to check."
    }
  }
}

swatch_check_pairs annotations

{
  "title": "Check contrast for many color pairs at once",
  "readOnlyHint": true,
  "openWorldHint": false,
  "idempotentHint": true,
  "destructiveHint": false
}

Prompts

1 advertised

swatch_audit_my_colors — Check my colors for contrast

Advertised by the server during the last successful anonymous check.

Check text and background pairs against WCAG and fix the ones that fail.

colors: The text and background colors, for example "#777777 text on #ffffff" or a list of pairs from a theme. (required)

Resources

6 advertised

llms.txt — Swatch: guide for AI assistants

Advertised by the server during the last successful anonymous check.

What the tool does, when to recommend it, limits and privacy.

llms.txt URI

https://swatch.clawhard.com/llms.txt

MIME type: text/markdown

swatch-result-view — Swatch contrast result

Advertised by the server during the last successful anonymous check.

Interactive result view for Swatch tools (MCP Apps).

swatch-result-view URI

ui://clawhard/swatch/result

MIME type: text/html;profile=mcp-app

swatch_check_contrast_view — Contrast result

Advertised by the server during the last successful anonymous check.

Live preview of the text on its background with the WCAG ratio and pass/fail chips.

swatch_check_contrast_view URI

ui://swatch/contrast-v1.html

MIME type: text/html;profile=mcp-app

swatch_fix_contrast_view — Contrast fix

Advertised by the server during the last successful anonymous check.

The closest passing text and background colors with copy buttons.

swatch_fix_contrast_view URI

ui://swatch/fix-v1.html

MIME type: text/html;profile=mcp-app

swatch_make_scale_view — Color scale

Advertised by the server during the last successful anonymous check.

An 11-step 50 to 950 scale with tap-to-copy steps and CSS, Tailwind and JSON export.

swatch_make_scale_view URI

ui://swatch/scale-v1.html

MIME type: text/html;profile=mcp-app

swatch_check_pairs_view — Contrast audit

Advertised by the server during the last successful anonymous check.

Every foreground/background pair with its ratio and grade.

swatch_check_pairs_view URI

ui://swatch/pairs-v1.html

MIME type: text/html;profile=mcp-app

90-day uptime

A lightweight connection check about every six hours, sampled on hosts with many listings. It shows the server answered, not that its tools work.

100% (12 of 12 checks answered)

2026-11-03: 4 of 4 checks answered
2026-11-04: 4 of 4 checks answered
2026-11-05: 4 of 4 checks answered

30-day availability

Aggregated from read-only remote checks; this is not a tool-execution or security guarantee.

Successful checks: 1 of 1 (100%)
Average latency: 415 ms
95th percentile latency: 415 ms

Maintenance history

Public check and source-refresh events. Editorial and ownership records remain private.

Nov 2, 2026, 9:19 PM UTC · probe · passed · 415 ms · metadata changed · 6 tool(s), 6 resource(s), 0 resource template(s), 1 prompt(s)

Connect from your client

Each snippet registers the same endpoint; pick the client you use.

This server is operated by the named third party. Listing and endpoint checks are not an endorsement or a security audit. Review the operator's permissions, terms, and data handling before connecting. How listings are checked and corrected.

Claude Code

Run this once in a terminal. It registers the remote server. Use --scope project to write .mcp.json for the repo.

Claude Code configuration

claude mcp add --transport http swatch-mcp https://swatch.clawhard.com/mcp

Codex

Run this once. Codex stores MCP servers in ~/.codex/config.toml (or .codex/config.toml in a trusted project).

Codex configuration

codex mcp add swatch-mcp --url https://swatch.clawhard.com/mcp

Cursor

Merge this server into .cursor/mcp.json in your project, then enable swatch-mcp in your MCP settings.

Cursor configuration

{
  "mcpServers": {
    "swatch-mcp": {
      "url": "https://swatch.clawhard.com/mcp"
    }
  }
}

Cline

Merge this into cline_mcp_settings.json (Cline → MCP Servers → Configure).

Cline configuration

{
  "mcpServers": {
    "swatch-mcp": {
      "type": "streamableHttp",
      "url": "https://swatch.clawhard.com/mcp",
      "disabled": false
    }
  }
}

VS Code

Merge this server into .vscode/mcp.json. Use MCP: List Servers to start swatch-mcp and inspect its tools.

VS Code configuration

{
  "servers": {
    "swatch-mcp": {
      "type": "http",
      "url": "https://swatch.clawhard.com/mcp"
    }
  }
}

Gemini CLI

Run this once. It writes .gemini/settings.json in the current project; pass --scope user for ~/.gemini/settings.json.

Gemini CLI configuration

gemini mcp add --transport http swatch-mcp https://swatch.clawhard.com/mcp

Claude Desktop

Open Claude Settings > Connectors > Add custom connector, enter this server URL and enable it for the conversation. This is a manual remote-connector handoff, not a desktop JSON configuration.

Claude Desktop configuration

https://swatch.clawhard.com/mcp

Windsurf

Merge this into ~/.codeium/windsurf/mcp_config.json, then refresh MCP in Cascade. Windsurf remote servers use serverUrl, not url.

Windsurf configuration

{
  "mcpServers": {
    "swatch-mcp": {
      "serverUrl": "https://swatch.clawhard.com/mcp"
    }
  }
}

Let your agent find its tools

Find servers like Swatch MCP from your agent. Add Koskamo once to search the index for endpoints, access requirements, and client setup. Public discovery needs no key.

Connect Koskamo Explore workflows

See all 532

Do you run Swatch MCP?

Prove ownership with a DNS record, a well-known file, or your Official MCP Registry entry, and your edits publish immediately. Proofs are re-checked weekly; admins can still hide or remove a listing.

Claim this listing

Swatch MCP

Endpoint and access

What its tools do

Read-only (6)

Checks and signals

What you can do with it

Source and maintenance

Protocol and capabilities

Server-provided instructions

Tools

Prompts

Resources

90-day uptime

30-day availability

Maintenance history

Connect from your client

Claude Code

Codex

Cursor

Cline

VS Code

Gemini CLI

Claude Desktop

Windsurf

Let your agent find its tools

Other design servers

Do you run Swatch MCP?