Color Palette Generator

Create cohesive color palettes with psychological reasoning for any brand or project.

**Brand/Project:** [NAME AND DESCRIPTION]
**Industry/Niche:** [TECHNOLOGY / HEALTHCARE / FINANCE / FOOD / FASHION / EDUCATION]
**Desired Emotional Response:** [TRUST / EXCITEMENT / CALM / URGENCY / LUXURY / PLAYFULNESS]

**Palette Components:**
- Primary color: main brand color with hex code, RGB values, and emotional meaning explanation
- Secondary colors (2-3): supporting colors for accents, CTAs, highlights with specific use case guidance
- Accent color: high-visibility color for notifications, badges, interactive elements
- Neutral palette: background (#FFFFFF to #F5F5F5), surface (#FAFAFA), border (#E0E0E0), text primary (#212121), text secondary (#757575)
- Dark mode variants: all colors with dark mode adjustments (lighter backgrounds, adjusted contrast)

**Accessibility Compliance:**
- WCAG AA contrast ratios for each color pairing (minimum 4.5:1 for normal text, 3:1 for large text)
- WCAG AAA compliance notes where achievable
- Colorblind-safe palette verification (protanopia, deuteranopia, tritanopia simulation notes)
- Not relying on color alone to convey information (patterns, icons as supplements)

**Color Psychology Mapping:**
- Each color's emotional meaning and why it was chosen for this specific brand
- Cultural considerations if the brand operates in multiple regions
- Industry convention analysis (what colors competitors use and how this palette differentiates)

**Gradient Combinations:**
- 3 gradient pairs using palette colors with direction specifications (top-to-bottom, left-to-right, diagonal)
- Gradient usage guidelines (where to apply, when not to use)

**Monochromatic Variations:**
- Light and dark shades of the primary color for hover states, active states, disabled states
- Tint and shade scale (10 steps from lightest tint to darkest shade)

**Export-Ready Specifications:**
- Figma color style definitions (copy-paste ready format)
- Tailwind CSS config object with full palette mapping
- CSS custom properties (--primary: #xxx, --primary-light: #yyy) for easy integration
- SCSS variable file format as alternative

How to Customize It

Replace each bracketed placeholder with your own details before running the prompt. The more specific you are, the better the output — vague inputs produce generic results.

• [NAME AND DESCRIPTION]Swap in your name and description.
• [TECHNOLOGY / HEALTHCARE / FINANCE / FOOD / FASHION / EDUCATION]Swap in your technology or healthcare or finance or food or fashion or education.
• [TRUST / EXCITEMENT / CALM / URGENCY / LUXURY / PLAYFULNESS]Swap in your trust or excitement or calm or urgency or luxury or playfulness.

When to Use It

• Establishing brand colors for a new project with reasoning you can defend to stakeholders.
• Extending an existing brand color into a full UI system — semantic states, hover shades, dark mode.
• Fixing accessibility: rebuilding a palette that fails contrast requirements while preserving its character.

Tips for Better Results

• 1Verify contrast ratios with an actual WCAG checker before shipping — treat the model's contrast claims as drafts. The 4.5:1 text threshold is a hard requirement, not a suggestion.
• 2Test the palette against your industry's convention deliberately: matching reads as trustworthy, breaking reads as distinctive, and which you want is a strategy question.
• 3Ask for usage proportions (60/30/10) and see the palette in a mock layout; colors that harmonize as swatches can fight in real interfaces.