I gave my coding agent a color palette library, and stopped pasting hex codes
I 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.
The 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.
So I built the ruler.
PaletteGet 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.
The part that matters here is that it's also an MCP server, so an agent can read it directly:
{
"mcpServers": {
"paletteget": { "url": "https://paletteget-mcp.y7206062.workers.dev/mcp" }
}
}
Drop that into Cursor, Claude Desktop, or any client that speaks Streamable HTTP. No API key, no sign-up, no local process.
I kept the surface small because tool sprawl makes agents worse, not better:
list_palettes filters by platform and tagget_palette returns one palette's role colors, contrast, and the editor notesuggest_palette takes a plain-language query ("dark finance app")get_css_variables returns paste-ready custom properties
That's it. Four tools, read-only.
Here is the exchange, trimmed:
Me: I need a palette for a dark-mode finance app. Numbers need to be legible.
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.
Read 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.
Before, 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.
Two reasons.
First, 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.
Second, 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.
get_css_variables is the tool I use most, because it collapses two steps into one:
:root {
--color-primary: #1f2937;
--color-accent: #38bdf8;
--color-bg: #0f172a;
--color-text: #e2e8f0;
/* ... */
}
Semantic names, not --blue-500. If I later swap palettes, the components don't change.
https://paletteget-mcp.y7206062.workers.dev/mcp
io.github.yang7206/paletteget
If 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.