Color Psychology
Each color carries associations that vary across cultures but share broad patterns. When writing prompts, state both the color and its intended role.
Red — #EF4444
Energy, urgency, passion. Draws attention immediately.
Use red (#EF4444) exclusively for destructive actions (delete, remove),
error messages, and required field indicators.
Do not use red for decorative elements.Blue — #3B82F6
Trust, stability, professionalism. The most universally safe choice for primary interfaces.
Use blue (#3B82F6) as the primary action color for buttons, links,
and active navigation states. Conveys reliability for a finance dashboard.Green — #10B981
Growth, success, safety. Signals that something went right.
Use green (#10B981) for success messages, completed states,
positive metrics (revenue up, score increase), and eco-friendly brand elements.Yellow — #F59E0B
Optimism, creativity, caution. Attracts attention without the urgency of red.
Use yellow (#F59E0B) for warning states, highlight badges,
and new feature labels. Pair with dark text (#1F2937) for legibility.Purple — #8B5CF6
Luxury, creativity, mystery. Works well for premium tiers and creative tools.
Use purple (#8B5CF6) as the accent color for the "Pro" plan badge
and upgrade CTAs. Signals premium value.Gray — #6B7280
Neutrality, sophistication, balance. The backbone of most UI color systems.
Use gray (#6B7280) for secondary labels, placeholder text, dividers,
and disabled states. Reserve darker grays (#1F2937) for primary text.Color Harmony Rules
The 60-30-10 Rule
Distribute color in three proportions to create balanced designs without visual chaos.
| Role | Proportion | Example |
|---|---|---|
| Dominant (background, large surfaces) | 60% | White or dark gray |
| Secondary (cards, sidebars, sections) | 30% | Light gray or muted tone |
| Accent (buttons, links, highlights) | 10% | Brand primary color |
Apply the 60-30-10 rule:
60% white (#FFFFFF) for page background and large areas,
30% light gray (#F3F4F6) for card surfaces and sidebars,
10% blue (#3B82F6) for buttons, links, and active states.Complementary Colors
Colors directly opposite on the color wheel. Creates high contrast and visual tension — use sparingly for maximum impact.
Common complementary pairs:
- Blue + Orange
- Purple + Yellow
- Green + Red (avoid for accessibility — use with caution near error states)
Use blue (#3B82F6) as the primary color and orange (#F97316) as a
highlight accent for sale badges and promotional elements.
Apply orange to no more than 5% of the interface.Analogous Colors
Colors adjacent on the color wheel. Creates harmony and cohesion — ideal for gradients and subtle variations.
Common analogous groups:
- Blue, Indigo, Purple
- Green, Teal, Cyan
- Orange, Amber, Yellow
Use an analogous palette of blue (#3B82F6), indigo (#6366F1),
and cyan (#06B6D4) for the hero section gradient and branded backgrounds.Full Color Palette Reference
Primary Colors
| Name | Hex | Best use |
|---|---|---|
| Blue | #3B82F6 | Primary actions, finance, corporate |
| Red | #EF4444 | Errors, destructive actions, warnings |
| Green | #10B981 | Success states, growth, eco |
| Yellow | #F59E0B | Warnings, highlights, attention |
| Purple | #8B5CF6 | Premium, creative, luxury |
| Pink | #EC4899 | Playful, fashion, lifestyle |
| Indigo | #6366F1 | Tech, sophisticated, calm |
| Gray | #6B7280 | Neutral text, borders, disabled |
| Orange | #F97316 | Energy, food, gaming |
| Teal | #14B8A6 | Health, balance, modern |
| Cyan | #06B6D4 | Tech, fresh, airy |
| Emerald | #059669 | Financial gain, nature, eco |
Extended Palette
| Name | Hex | Name | Hex |
|---|---|---|---|
| Lime | #65A30D | Amber | #D97706 |
| Rose | #F43F5E | Violet | #7C3AED |
| Fuchsia | #D946EF | Sky | #0EA5E9 |
| Slate | #64748B | Zinc | #71717A |
| Neutral | #737373 | Stone | #78716C |
⚠️ Color Usage Guidelines
Primary color — Use for main actions, links, and brand elements (5–10% of the interface)
Secondary color — Use for supporting elements and secondary actions (15–20% of the interface)
Neutral colors — Use for text, backgrounds, and borders (70–80% of the interface)
Semantic colors — Reserve red for errors, green for success, yellow for warnings — don’t use them as decorative colors
Pre-built Palette Prompts
Use these when you want a cohesive multi-color system without building one from scratch.
Modern
Use the modern palette:
Primary blue (#3B82F6), supporting gray-100 (#F3F4F6),
gray-800 (#1F2937), and blue-600 (#2563EB).
Clean and professional for SaaS applications.Vibrant
Use the vibrant palette:
Primary purple (#8B5CF6), pink (#EC4899), yellow (#F59E0B),
and green (#10B981). Energetic for creative and youthful brands.Earth
Use the earth palette:
Amber (#D97706), orange (#F97316), green (#10B981),
and stone (#78716C). Warm and natural for food, wellness, and eco brands.Monochrome
Use a monochrome palette:
gray-900 (#111827), gray-700 (#374151), gray-500 (#6B7280),
gray-300 (#D1D5DB), white (#FFFFFF).
Elegant and content-focused for editorial and blog designs.Ocean
Use the ocean palette:
blue-900 (#1E3A5F), blue-700 (#1D4ED8), cyan-500 (#06B6D4),
teal-400 (#2DD4BF). Trustworthy for financial and data-driven interfaces.Sunset
Use the sunset palette:
orange (#F97316), red (#EF4444), pink (#EC4899),
purple (#8B5CF6), yellow (#F59E0B).
Dynamic and energetic for gaming, entertainment, and social platforms.See the references for the external specifications and background sources used on this page.[1][2]
References
- W3C Web Accessibility Initiative, WCAG 2 Overview
- MDN Web Docs, Learn web development