Your AI doesn't know your colors. Fix that.
You spend hours building a color system. You pick the background, the ink, the accent. You check contrast ratios. You assign roles. You export tokens.
Then you open Claude Code and say "build me a card component" and it gives you bg-blue-500 and text-white.
Your colors are gone. The AI has no idea they exist.
The problem is context, not capability
AI coding tools are good at writing code. They know Tailwind, they know CSS variables, they know design tokens. What they don't know is your palette.
Every time you start a conversation, the AI starts from zero. No memory of your brand colors. No knowledge of which hex goes where. It defaults to whatever's in its training data — usually Tailwind's default palette or generic grays.
You end up correcting it. Every. Single. Time.
- "No, use #583819 for text, not black"
- "The accent is #FC6911, not blue"
- "Don't use that as body text, the contrast ratio is terrible"
This is fixable. The solution is embarrassingly simple.
The COLORS.md pattern
AI coding tools like Claude Code, Cursor, and Windsurf read your project files for context. They look at your codebase to understand how things work. So give them a file that explains your colors.
Drop a COLORS.md in your project root. Same convention as README.md or CLAUDE.md. The AI reads it, understands your palette, and uses the right colors from the first prompt.
No corrections. No reminding. It just works.
What goes in it
A hex list isn't enough. The AI needs to understand roles, relationships, and rules. A good COLORS.md contains:
1. Roles, not just values
Five named roles: background, ink, accent, support, neutral. Each with a hex value, RGB equivalent, and a description of where to use it. The AI needs to know that #F5DBC1 isn't just "some beige" — it's the background, the default surface for everything.
2. Contrast ratios
Pre-computed WCAG contrast ratios for every meaningful pair. Ink on background, accent on background, ink on accent. With explicit AA/AAA pass/fail status. The AI can then make accessibility-correct decisions without calculating anything.
3. CSS variables and Tailwind tokens
Ready-to-use code blocks. Semantic CSS custom properties (--color-bg, --color-text, --color-primary) and a Tailwind v4 @theme block. The AI copies these directly into your code — no translation needed.
4. Explicit rules
This is the part most people miss. You need to tell the AI what not to do:
- Never use accent as body text on the background
- Always place ink-colored text on accent buttons, not white
- Maintain 4.5:1 minimum contrast for normal text
- Do not invent new colors — reference this palette only
Without these rules, the AI will make "reasonable" decisions that break your system. With them, it stays on brand.
How Paletter generates it
You could write this file by hand. But you won't. You'll forget the contrast calculations, skip the Tailwind block, and leave out the rules.
Paletter generates a complete COLORS.md in one click. Extract a palette from any image or build one from scratch, then hit the AI Palette button. See the full AI Palette breakdown. You get:
- A visual SVG banner that renders in GitHub and markdown previews
- The full palette table with roles, hex, RGB, and usage guidance
- Pre-computed contrast ratios with WCAG AA/AAA status
- Copy-paste CSS variables and Tailwind v4 tokens
- Explicit rules that keep AI tools on brand
Download. Drop in project root. Done.
Works everywhere
Claude Code reads project files automatically. A COLORS.md in your root is picked up on every conversation. It can also be referenced in your CLAUDE.md instructions file.
Cursor indexes your workspace files. The palette becomes part of the codebase context it draws from when generating components.
Windsurf reads project files for context. Same principle — your colors are always available.
GitHub Copilot uses open files and workspace context. Keep COLORS.md open or reference it in prompts.
The format is plain markdown. Any tool that reads your project files will pick it up. No plugins, no configuration, no API keys.
Stop correcting your AI
Generate a COLORS.md from any palette. One click. Works with every AI coding tool.
Generate your AI palette