# Audit and fix the color palette in my app or website

Reviews how color is used across your interface, then gives a consistent palette, color tokens, contrast fixes, and dark-mode adjustments.

- Topic: Product & UX Design
- Framework: Few-Shot
- Level: Advanced
- Tags: Analyze, Fill-in Template
- Source: https://www.thinkwithprompt.com/prompts/audit-and-fix-the-color-palette-in-my-app-or-website

## Prompt

```text
Help me audit and fix the colors used across my app or website.

**Product and audience:** [WHAT IT IS, who uses it, business domain]
**Primary and secondary brand colors:** [HEX CODES]
**Colors currently in use:** [paste the CSS variables, design tokens, or a list of hex codes and where they appear, or describe screenshots]
**Dark mode:** [yes / no / planned]
**Known problems:** [e.g. "too many grays", "buttons look different on each page", "low contrast text"]

Deliver:
1. **Audit findings:** near-duplicate colors to merge, inconsistent uses (the same meaning shown in different colors), colors that clash with the brand, and text or controls that fail WCAG contrast (4.5:1 for normal text, 3:1 for large text and UI components).
2. **Recommended palette:** primary and secondary scales (e.g. 50-900), a neutral scale, and semantic colors for success, warning, error, and info, all in harmony with my brand colors.
3. **Color tokens:** a token table (Token | Light value | Dark value | Use) mapping colors to roles such as background, surface, text, border, primary action, and focus, so components use roles rather than raw hex codes.
4. **Dark mode adjustments:** avoid pure black, reduce saturation, keep contrast, and check states like hover, disabled, and focus.
5. **Before and after mapping:** which current colors become which tokens.
6. **Accessibility checks:** never use color alone to convey meaning; consider common color vision deficiencies.

Give the tokens as CSS custom properties I can paste in. Flag any contrast ratio you have estimated rather than calculated as [CHECK WITH A CONTRAST TOOL].
```

## What to fill in

- WHAT IT IS, who uses it, business domain
- HEX CODES
- yes / no / planned
- CHECK WITH A CONTRAST TOOL

Free to copy and use. From ThinkWithPrompt (https://www.thinkwithprompt.com/), a library of 2,663 curated AI prompts.