How to give Claude Code your brand colors

You open Claude Code. You ask it to build a hero section. It gives you bg-blue-600 and text-white. Your brand is warm terracotta and cream. Not even close.

This happens because Claude Code has zero knowledge of your palette. It starts every conversation from scratch. No memory of your brand. No access to your Figma tokens. It defaults to whatever Tailwind colors are most common in its training data.

The fix takes three minutes. You give Claude a file it already knows how to read.

What is COLORS.md

COLORS.md is a plain markdown file that lives in your project root. Same convention as README.md or CLAUDE.md. It describes your palette in a format AI tools understand: roles, hex values, contrast ratios, CSS variables, and explicit rules for how to use each color.

Claude Code reads your project files automatically at the start of every conversation. When it finds COLORS.md, it treats it as authoritative design context. Your colors, your rules, every time.

No plugins. No extensions. No configuration. Just a file in a directory.

Why Claude reads it

Claude Code indexes project files to understand your codebase. It reads your package.json to know your dependencies. It reads your tsconfig to know your TypeScript setup. It reads your CLAUDE.md for project-specific instructions.

COLORS.md works the same way. Claude sees it, parses the roles and tokens, and applies them when generating components. You don't need to remind it. You don't need to paste hex codes into every prompt. The context is always there.

You can also reference COLORS.md from your CLAUDE.md file for even stronger enforcement. Add a line like "Always use the palette defined in COLORS.md" and Claude will treat your colors as hard constraints, not suggestions.

The 3-step setup

Step 1: Generate your palette on Paletter

Head to Paletter and upload a photo of your brand material — a book cover, a logo, packaging, anything that represents your visual identity. Paletter extracts five curated colors and assigns each a role: background, ink, accent, support, and neutral.

Already have hex codes? You can build a palette from scratch and assign roles manually. The point is to get a structured palette, not just a list of colors.

Step 2: Export COLORS.md

Once your palette is ready, hit the AI Palette export. Paletter generates a complete COLORS.md file with everything Claude needs:

• A visual SVG banner showing your palette at a glance
• Each color with its role, hex value, RGB, and usage description
• Pre-computed WCAG contrast ratios for every meaningful pair
• Ready-to-paste CSS custom properties and Tailwind v4 tokens
• Explicit rules: which combinations work, which to avoid

Step 3: Drop it in your project root

Download the file. Move it to your project root, right next to your package.json. That's it. Next time you open Claude Code, it picks up the file automatically.

Want to be explicit? Add this to your CLAUDE.md:

• Always reference COLORS.md for brand palette decisions
• Never invent new colors outside the defined palette
• Use semantic CSS variables, not raw hex values

What happens next

Before COLORS.md, every Claude Code conversation starts like this:

• "Build me a card component" — you get bg-white, text-gray-900, border-blue-500
• "No, use my brand colors" — "What are your brand colors?"
• You paste hex codes — Claude uses them but guesses wrong on roles
• Three rounds of corrections later, you have something usable

After COLORS.md:

• "Build me a card component" — you get bg-[var(--color-bg)], text-[var(--color-text)], border-[var(--color-accent)]
• Correct colors. Correct roles. Correct contrast. First try.

Claude doesn't just use the right hex values. It understands which color is the background, which is for text, which is the accent. It knows the contrast ratios. It follows your rules about what not to do. The difference is night and day.

Pro tips

Reference it in CLAUDE.md. Adding a line about COLORS.md to your project instructions makes it a hard requirement, not just available context. Claude will proactively check it before generating any styled component.

Keep it updated. When your palette changes, regenerate the file. Old tokens in COLORS.md mean Claude uses old colors. Paletter makes regeneration a one-click operation.

Works with other tools too. The same COLORS.md file works with Cursor, Windsurf, and GitHub Copilot. One file, every AI tool. No vendor lock-in.

Commit it to version control. COLORS.md belongs in your repo. Your whole team gets the same palette context. Every developer's AI assistant uses the same colors. Consistency without meetings about it.

Beyond hex codes

The real power of COLORS.md isn't the color values. It's the structure. Random hex codes tell Claude nothing about intent. A structured palette with roles, contrast data, and rules tells Claude everything it needs to make correct design decisions.

That's the difference between "here are some colors" and "here is a design system." Claude Code is smart enough to use a design system correctly. You just have to give it one.

Read more about how AI palettes work or check the Claude Code integration guide for advanced configuration.