{"slug": "i-gave-my-coding-agent-a-color-palette-library-and-stopped-pasting-hex-codes", "title": "I gave my coding agent a color palette library, and stopped pasting hex codes", "summary": "A developer built PaletteGet, a site offering 90 hand-picked color palettes for mobile apps, web, and WeChat-style mini programs, each with role colors, measured WCAG contrast ratios, and editor notes. The site also runs as a remote MCP server exposing four read-only tools — list_palettes, get_palette, suggest_palette, and get_css_variables — over Streamable HTTP with no API key or sign-up, letting coding agents like Cursor and Claude Desktop retrieve palettes with computed contrast data instead of guessing hex values. The developer says the contrast numbers let agents state where each color is permitted, such as an accent clearing AA for large text but not body copy.", "body_md": "I gave my coding agent a color palette library, and stopped pasting hex codes\n\nI asked Claude for a color palette for a finance app last month. It gave me six hex codes. They looked right in the chat window. In the actual UI, the body text sat on a primary color at about 2.8:1 contrast, which is unreadable for anyone who isn't 20/20, and the \"dark mode\" surface was a greenish gray that made every card look sick.\n\nThe model wasn't being lazy. It has no ruler. It can produce a hex value that \"looks like\" a dark teal, but it cannot compute that white text on that teal lands at 2.8:1, because nothing in the conversation tells it what the number is. Ask a better question and you get a nicer-looking guess. That's the ceiling.\n\nSo I built the ruler.\n\n[PaletteGet](https://paletteget.com/) is a small site with 90 hand-picked palettes for three surfaces: mobile apps, web, and mini programs (the WeChat-style mini app format). Each palette ships with role colors, measured WCAG contrast for the pairs that matter, and a short editor note about when to use it.\n\nThe part that matters here is that it's also an MCP server, so an agent can read it directly:\n\n```\n{\n  \"mcpServers\": {\n    \"paletteget\": { \"url\": \"https://paletteget-mcp.y7206062.workers.dev/mcp\" }\n  }\n}\n```\n\nDrop that into Cursor, Claude Desktop, or any client that speaks Streamable HTTP. No API key, no sign-up, no local process.\n\nI kept the surface small because tool sprawl makes agents worse, not better:\n\n`list_palettes` filters by platform and tag`get_palette` returns one palette's role colors, contrast, and the editor note`suggest_palette` takes a plain-language query (\"dark finance app\")`get_css_variables` returns paste-ready custom properties\nThat's it. Four tools, read-only.\n\nHere is the exchange, trimmed:\n\n**Me:** I need a palette for a dark-mode finance app. Numbers need to be legible.\n\n**Agent:** *(calls `suggest_palette` with \"dark finance app\")* Here are three. Midnight Ink is the closest fit. Its primary is `#1f2937` on a `#0f172a` canvas, and the accent `#38bdf8` measures 3.2:1 against the canvas, so it clears AA for large text and UI borders but not for body copy. Use `#e2e8f0` for body text (12.4:1) and keep the accent for charts and buttons.\n\nRead that last sentence again. The agent didn't just hand me colors, it told me *where each one is allowed*. That distinction is what a contrast number buys you: the model stops asserting and starts measuring.\n\nBefore, I'd get \"here's a nice palette\" and find out it was wrong after wiring it up. Now the constraint arrives with the proposal.\n\nTwo reasons.\n\nFirst, arithmetic is not what LLMs are good at, and contrast is arithmetic with a specific formula (relative luminance, then a ratio). A model can approximate it and be wrong exactly often enough to hurt.\n\nSecond, the failure is silent. A palette that fails contrast still looks fine to the person choosing it, because contrast failure is a property of *use* (text on a surface at a size), not of the color swatch. You only discover it when a real paragraph lands on it.\n\n`get_css_variables` is the tool I use most, because it collapses two steps into one:\n\n```\n:root {\n  --color-primary: #1f2937;\n  --color-accent: #38bdf8;\n  --color-bg: #0f172a;\n  --color-text: #e2e8f0;\n  /* ... */\n}\n```\n\nSemantic names, not `--blue-500`. If I later swap palettes, the components don't change.\n\n`https://paletteget-mcp.y7206062.workers.dev/mcp`\n`io.github.yang7206/paletteget`\nIf your agent keeps inventing hex values that fall apart in the browser, give it the ruler and see what changes. Feedback welcome, especially palettes you'd want that aren't there.", "url": "https://wpnews.pro/news/i-gave-my-coding-agent-a-color-palette-library-and-stopped-pasting-hex-codes", "canonical_source": "https://dev.to/yang7206/i-gave-my-coding-agent-a-color-palette-library-and-stopped-pasting-hex-codes-2c83", "published_at": "2026-10-22 14:05:41+00:00", "updated_at": "2026-10-22 14:14:31.878158+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "agent-protocols", "developer-tools", "ai-products"], "entities": ["PaletteGet", "Claude", "Cursor", "Claude Desktop", "WeChat"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/i-gave-my-coding-agent-a-color-palette-library-and-stopped-pasting-hex-codes", "markdown": "https://wpnews.pro/news/i-gave-my-coding-agent-a-color-palette-library-and-stopped-pasting-hex-codes.md", "text": "https://wpnews.pro/news/i-gave-my-coding-agent-a-color-palette-library-and-stopped-pasting-hex-codes.txt", "jsonld": "https://wpnews.pro/news/i-gave-my-coding-agent-a-color-palette-library-and-stopped-pasting-hex-codes.jsonld"}}