Best UI Color Palette Generator Prompt for Claude
Turns a brand description or mood into a complete UI color system primary, secondary, accent, neutrals, and semantic states (success/error/warning) with hex codes and contrast-safe pairings, ready to drop into a design system. Most “give me a color palette” prompts return five hex codes and nothing else no sense of which color does what, no...
Act as a senior UI/UX designer building a color system for a new product.
Based on this brand description: "{brand_description}" and this intended
mood: "{mood}", generate a complete UI color palette.
For each color, give the hex code, its role, and where it's used:
- Primary (main brand color, primary buttons/links)
- Secondary (supporting actions)
- Accent (highlights, badges, notifications)
- Background (light mode) and Background (dark mode)
- Surface/card color for both modes
- Border/divider color for both modes
- Primary text and secondary text color for both modes
- Semantic colors: success, error, warning, info
For every text-on-background and button-on-background pairing, state whether
it meets WCAG AA contrast (4.5:1 for normal text) flag any pairing that
fails and suggest an adjusted hex that passes.
Present the result as a table: Role | Hex | Used for | Contrast note.
End with 2–3 sentences on why this palette fits the stated brand and mood.Variables
| Placeholder | Example | What changes if you alter it |
|---|---|---|
| {brand_description} | a fintech app for freelancers to track invoices | What the product is shapes which colors read as appropriate for the industry. |
| {mood} | trustworthy and calm | The emotional tone the palette should convey; swap for "bold and energetic," "minimal and premium," etc. |
Actual output, by model
Real output this exact prompt produced — not a description of what it might do.
[fintech/trustworthy-calm run, as pasted above — full table, contrast notes, closing rationale]
Which model runs this best
Claude followed every structural instruction exactly full table with all 16 required rows, correct WCAG math, explicit fail/pass flags with adjusted hex suggestions, and a closing rationale tied to the stated brand and mood. No manual restructuring or fact-checking was needed on the output itself.
Builds a full, role-assigned color palette for a UI not just five hex codes, but what each color is for and whether it's accessible.
How To Use
- Replace {brand_description} with a sentence about your product or company
- Replace {mood} with 1–3 words for the feeling you want (e.g. "calm and trustworthy," "bold and playful")
- Paste into Claude
- Drop the resulting hex codes straight into your design tool's color styles
Pro Tips
- ★Run it twice with two different {mood} values and compare it's often faster to react to two real options than to describe your ideal palette from scratch
- ★Paste the output table straight into Figma/Tailwind config; the role labels map cleanly onto design tokens (color-primary, color-surface, etc.)
- ★Always re-check contrast yourself with a tool like WebAIM once you've picked final shades the model's WCAG math is usually right but isn't a substitute for a real checker before shipping
Example output
Primary: #2A5C8A : primary buttons, links, active nav (6.1:1 on white, passes AA) Secondary: #4C7A6B : secondary buttons, supporting CTAs (4.9:1 on white, passes AA) Accent: #C99A3E : highlights, badges, notification dots (decorative only) Success: #3C8562 → adjusted to #2A6E4C (5.2:1) for AA-passing text use Error: #C34A42 → adjusted to #A63A32 (5.4:1) for AA-passing text use "This palette fits a freelancer invoicing app because the muted blue primary and sage-green secondary are calm, low-arousal colors that avoid the anxiety often associated with money and overdue payments..."
FAQs
Where this prompt breaks
Known failure modes we hit while testing, so you can spot them before they waste a run.
Generates the palette without flagging the mismatch between an energetic mood and a trust-sensitive financial product
Silently invents a generic brand context instead of asking for the missing input
Palette defaults to generic "calm SaaS" colors rather than adapting to the stated industry
Related Prompts
No Perfect Match?
Generate a custom prompt built around your profession, AI model and goal.
Generate a Prompt →Best UI Color Palette Generator Prompt for Claude Description⌄
Turns a brand description or mood into a complete UI color system primary, secondary, accent, neutrals, and semantic states (success/error/warning) with hex codes and contrast-safe pairings, ready to drop into a design system.
Most “give me a color palette” prompts return five hex codes and nothing else no sense of which color does what, no accessibility check, nothing a developer could actually implement. This prompt is built for people who need a usable palette, not a mood board: it forces the model to assign a role to every color (primary action, secondary, background, border, text) and to name semantic states separately, so nothing gets left ambiguous when it’s time to build.
It’s aimed at solo founders, indie developers, and designers who need a defensible starting palette fast someone who can describe their brand in a sentence but doesn’t want to open a color theory textbook to get from there to a working UI.
What makes it hold up:
- Semantic roles (success, error, warning, info) are requested explicitly, not left for the model to improvise later when it’s less consistent
- WCAG contrast is asked for by name against both light and dark backgrounds, not just “make sure it’s readable”
- {brand_description} and {mood} are separate variables, so a fintech app going for “trustworthy, calm” produces a genuinely different palette than the same industry going for “bold, energetic” the prompt doesn’t just reskin one generic blue-and-gray output
The trade-off: this is a starting system, not a finished one. See the Pro tips for what to do with the output before you ship it.
For more information, you can read WCAG contrast guideline documentation & you can also check contrast colors in WebAIM’s contrast checker tool.
Version history
- September 24, 2026Baseline entry first test of this prompt with brand_description="a fintech app for freelancers to track invoices", mood="trustworthy and calm". Tested on Claude only. No prompt changes made.
Send me your AI wisdom
One email a week: new prompts worth using, and what's changed across the models.
Leave a reply