DEV Community

Cover image for I gave my coding agent a color palette library, and stopped pasting hex codes
yang7206
yang7206

Posted on

I gave my coding agent a color palette library, and stopped pasting hex codes

#ai #mcp #design #css

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.

What PaletteGet is

PaletteGet is a small site with about 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" }
  }
}
Enter fullscreen mode Exit fullscreen mode

Drop that into Cursor, Claude Desktop, or any client that speaks Streamable HTTP. No API key, no sign-up, no local process.

Four tools, on purpose

I kept the surface small because tool sprawl makes agents worse, not better:

  • 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

That's it. Four tools, read-only.

The conversation that convinced me

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") Ink Blue Night is the closest fit, tagged for finance and analytics apps in dark mode. Background #12161f. Body text #e8ecf4 reads at 15.29:1, AAA. The primary #4c8df6 sits at 5.56:1 against the background: AA for body copy, AAA for large text, so primary-colored links and icons hold up on the page. The amber accent #f2b33d lands at 9.73:1, safe for prices and deltas. One catch: white on the primary measures 3.26:1, enough for large text only, so keep the button fill for big bold labels.

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.

Why not just prompt better

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.

The CSS shortcut

get_css_variables is the tool I use most, because it collapses two steps into one:

/* Ink Blue Night */
:root {
  --color-primary: #4c8df6;
  --color-primary-dark: #2f6bd4;
  --color-primary-light: #1e3a63;
  --color-secondary: #8b7cf6;
  --color-accent: #f2b33d;
  --color-success: #3fbf7f;
  --color-warning: #e8b341;
  --color-danger: #f2685e;
  --color-bg: #12161f;
  --color-text: #e8ecf4;
}
Enter fullscreen mode Exit fullscreen mode

Semantic names, not --blue-500. If I later swap palettes, the components don't change.

What this is not

  • Not a generator. Roughly 90 palettes, curated, and it grows by one or two a day at most. If you want infinite procedural color, this is the wrong tool.
  • Not a design system. It gives you color roles and contrast, not spacing, type scales, or components.
  • Not a hosted service with an SLA. It's a read-only endpoint on a Worker.

Try it

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 want that aren't there.

Top comments (1)

Collapse
 
yang7206 profile image
yang7206 • • Edited

The endpoint:
paletteget-mcp
https://paletteget-mcp.y7206062.workers.dev/mcp

Docs (config for Cursor / Claude Desktop / VS Code):

paletteget.com/docs/