Design Toolkit

Live

Colour contrast, hex conversion, px↔rem and social crop sizes.

WCAG contrast for two hex colours, hex↔RGB/HSL, lighten/darken, px↔rem at a 16px root, and pixel sizes for Instagram, stories, YouTube and Open Graph. Photoshop batch export stays a planned local companion.

Start free Tool reference

Server URL

streamable http

https://toolcargo.com/mcp/design-kit

Claude Code

terminal

claude mcp add --transport http --scope user toolcargo-design-kit https://toolcargo.com/mcp/design-kit \
  --header "Authorization: Bearer YOUR_API_KEY"

Create a key in your dashboard. Other clients: setup guides.

What it helps you do

WCAG AA/AAA for a foreground/background pair.
Hex to RGB/HSL and lighten/darken.
Instagram 4:5, story 9:16, YouTube and OG pixel sizes.

Built for: Designers and social teams checking contrast and export sizes in chat.

Example requests

Button contrast

“Contrast of #111111 on #ffffff — does it pass AA?”

Ratio and AA/AAA pass/fail.

Story size

“Pixel size for an Instagram story.”

1080×1920.

px to rem

“24px in rem at root 16.”

1.5rem.

Step-by-step workflows: pre-launch check · fixing link previews

Tools

Tool	What it does	Access
`check_contrast` Check colour contrast	WCAG 2 contrast ratio between two hex colours, with AA and AAA for normal and large text.	Read-only
`convert_color` Convert a colour	#hex or rgb() to hex, RGB and HSL. For contrast, use Colour contrast.	Read-only
`adjust_color` Lighten or darken a colour	Shift HSL lightness of a #hex colour. Positive lightens. For contrast use Colour contrast.	Read-only
`convert_px_rem` px ↔ rem	Convert pixels and rem at a root font size (default 16).	Read-only
`list_social_sizes` List social crop sizes	Pixel sizes for Instagram, Stories, YouTube, LinkedIn, Open Graph and X. Optional closest-match for a width×height.	Read-only

Requirements

• A ToolCargo account with Site Audit activated (free).

Limitations

• Numbers and conversions only — it does not open Photoshop or Figma.
• Single-tool URLs such as /mcp/color-contrast remain available for existing keys.

Supported clients

“Tested” means we connected that client to this endpoint and ran a tool call ourselves. “Documented” means the client supports this setup per its own docs, but we have not tested it yet.

Claude Code	API key header	Tested	Remote HTTP server with an Authorization header. Tested 2026-09-11 (v2.1.268).
Claude (claude.ai)	OAuth sign-in	Tested	Custom connector with OAuth sign-in; tested on claude.ai web 2026-09-11. Desktop and mobile use the same account connectors but were not tested separately.
Cursor	API key header	Documented, not yet tested	mcp.json with url and headers.
VS Code (Copilot agent mode)	API key header	Documented, not yet tested	.vscode/mcp.json with type http and headers.
ChatGPT (developer mode)	OAuth sign-in	Documented, not yet tested	Requires OAuth; API keys cannot be entered.
MCP Inspector	API key header	Tested	CLI mode, tested 2026-09-11. Useful for calling tools directly.

Photoshop Bridge Coming soonBatch resizing and export presets in Photoshop, driven from your assistant.

Pricing

Free

For trying the connector on your own sites.

50 calls/month · 25 links per check

Pro

$12/mo

For freelancers and agencies auditing client sites every week.

2,000 calls/month · 100 links per check

Proposed test price. See the pricing page for checkout status.

Full pricing and billing details