01 — The problem

Claude defaults to Tailwind blue

You ask Claude Code to build a card component. It gives you bg-blue-500 and text-white. Every time. Because it has no idea what your colors are.

You correct it. You paste hex codes into the chat. It gets the next component right, then forgets again on the next conversation. Your brand colors exist in your head, your Figma file, maybe a CSS file somewhere. But Claude cannot see any of that.

You need a single source of truth that Claude reads automatically. That is what COLORS.md is.

02 — The fix

One file. Automatic context.

Export COLORS.md from Paletter. Drop it in your project root. Claude Code reads project files automatically on every conversation — same way it reads your README.md or CLAUDE.md.

COLORS.md is structured markdown. It contains your full color system: roles, tokens, contrast ratios, and usage rules. Claude does not need to guess. It does not need to be reminded. The file is there. It reads it. Done.

No VS Code extension. No plugin. No API key. A markdown file in your repo. That is the entire integration.

03 — Setup

Three steps. Two minutes.

Generate a palette

Extract from an image, build from color theory, or pick from our inspiration library. Any method gets you a complete color system.

Export as AI Palette

Hit the "AI Palette" export button. Downloads a COLORS.md file with roles, tokens, contrast ratios, and usage rules.

Drop in your project root

Move COLORS.md to your project root. Claude reads it automatically on every conversation. Optionally reference it in your CLAUDE.md.

Pro tip

Add this line to your CLAUDE.md for explicit instruction: Follow the color system defined in COLORS.md for all UI components. Claude will prioritize it as a project-level rule.

04 — What Claude gets

Everything it needs to stay on brand

Roles table

Background, Ink, Accent, Support, Neutral — each mapped to a hex value with a plain-English description of when to use it.

Contrast matrix

Pre-computed WCAG AA/AAA ratios for every meaningful color pair. Claude makes accessible choices without doing math.

CSS variables

A complete :root block with custom properties. Claude drops them into your stylesheet verbatim.

Tailwind tokens

A @theme block ready for Tailwind v4. Or extend config for v3. Copy-paste into your config file.

Usage rules

Explicit constraints. Never use accent on body text. Always maintain 4.5:1 contrast on interactive elements. Claude follows them.

Color formats

Hex, RGB, HSL, and OKLCH for every color. Claude picks the right format for whatever context it is writing.

05 — Before vs after

The difference is immediate

Before — no COLORS.md

<div class="bg-blue-500 text-white p-4">
  <h2 class="text-xl font-bold">Welcome</h2>
  <p class="text-blue-100">
    Get started with our platform.
  </p>
  <button class="bg-white text-blue-500
    px-4 py-2 mt-4">
    Sign up
  </button>
</div>

Generic Tailwind defaults. No connection to your brand.

After — with COLORS.md

<div class="bg-[var(--color-bg)] text-[var(--color-ink)] p-4">
  <h2 class="text-xl font-bold">Welcome</h2>
  <p class="text-[var(--color-support)]">
    Get started with our platform.
  </p>
  <button class="bg-[var(--color-accent)]
    text-[var(--color-bg)] px-4 py-2 mt-4">
    Sign up
  </button>
</div>

Your actual tokens. Correct roles. Accessible contrast.

Generate your Claude Code palette

One file. Every conversation. Your colors, always.

Generate your palette Learn about AI Palette