| name | color-selection |
| description | Select optimal color palettes for websites using brand colors and color theory. Use when users need to define their website's color scheme, generate complementary palettes, ensure accessibility compliance, or refine existing colors for better visual impact and industry alignment. |
Color Selection for Websites
Transform brand colors into cohesive, psychologically-optimized website color palettes that look intentional, professional, and industry-authentic.
When to Use This Skill
✅ User provides primary brand colors (hex, RGB, or description)
✅ Designing a new website color system
✅ Refining existing colors for better contrast or accessibility
✅ Need complementary accent colors for CTAs, alerts, or secondary elements
✅ Building color tokens for Tailwind config or design system
✅ Ensuring WCAG accessibility compliance (4.5:1 contrast ratio)
Core Workflow
1. Assess Brand Colors
Ask for the user's brand colors. Accept:
- Hex codes (e.g.,
#3B82F6)
- RGB values (e.g.,
rgb(59, 130, 246))
- Color descriptions (e.g., "deep ocean blue" → convert to hex)
- Visual examples (inspect color from uploaded image or screenshot)
Typically users provide 1-3 primary colors. If only one provided, generate complementary palette from it. If multiple provided, evaluate harmony.
2. Analyze Color Context
Determine:
- Industry/sector (healthcare, e-commerce, finance, creative, education, etc.)
- Tone (corporate/conservative, modern/tech, friendly/approachable, luxe/premium)
- Target audience (millennials, professionals, children, enterprise clients)
- Existing brand associations (does primary color already represent something in their industry?)
Reference: See references/color-psychology.md for industry-specific color guidance and psychological associations.
3. Generate Palette Using Color Theory
Select the most appropriate color scheme based on harmony principles:
- Monochromatic — variations of one color (cohesive, safe)
- Analogous — adjacent colors on wheel (harmonious, balanced)
- Complementary — opposite colors on wheel (high contrast, dynamic)
- Split-Complementary — primary + two neighbors of complement (balanced contrast)
- Triadic — three evenly-spaced colors (vibrant, playful)
- Tetradic — four colors in two complementary pairs (complex, rich)
- Achromatic — grays, blacks, whites (timeless, minimalist)
Reference: See references/color-schemes.md for detailed explanations, HSL adjustments, and scheme-specific guidance.
4. Apply 60-30-10 Rule
Distribute colors by visual weight:
- 60% — Primary color (backgrounds, large surfaces)
- 30% — Secondary color (supporting elements, sections)
- 10% — Accent color (CTAs, highlights, alerts)
Example:
--color-primary: #3B82F6;
--color-secondary: #F3F4F6;
--color-accent: #DC2626;
5. Build Complete System
Generate 5-7 color tokens:
- Primary — primary brand color
- Secondary — supporting color
- Accent — CTA and high-emphasis elements
- Success — positive feedback (green-ish)
- Warning — cautionary feedback (amber-ish)
- Error — destructive/alert feedback (red-ish)
- Neutral — text, borders, backgrounds (grays)
All must meet WCAG AA standards (4.5:1 contrast for text, 3:1 for UI components).
Reference: See references/accessibility-contrast.md for contrast ratio calculation and verification.
6. Verify Accessibility
Test each color pair that will be used together:
- Text on background: Must be 4.5:1 (normal) or 3:1 (large 18pt+)
- UI components: Must be 3:1 (borders, icons, outlines)
Use formula: (lighter color luminance + 0.05) / (darker color luminance + 0.05)
Flag any combinations failing WCAG AA. Suggest adjustments (lighten/darken) to achieve compliance.
7. Output as Configuration
Provide color tokens as:
- Tailwind CSS variables (for
tailwind.config.mjs)
- CSS custom properties (for
global.css)
- Design tokens JSON (for reference)
Example Tailwind:
colors: {
primary: '#3B82F6',
secondary: '#F3F4F6',
accent: '#DC2626',
success: '#10B981',
warning: '#F59E0B',
error: '#EF4444',
neutral: '#6B7280'
}
Industry-Specific Guidance
Before finalizing palette, reference references/industry-color-psychology.md for sector-specific expectations:
- Healthcare/Wellness — trust blues, calming greens, avoid alarming reds
- E-Commerce — action-oriented reds/oranges, trust blues, warm accents
- Finance/Corporate — authoritative blues/grays, minimal accent, high contrast
- Creative/Design — bold, unexpected colors, high saturation
- Education — welcoming blues/greens, accessible contrast
- Food/Hospitality — appetite-stimulating warm tones, welcoming accents
Common Mistakes to Avoid
❌ Too many colors — Use no more than 7 token colors; limit primary palette to 3
❌ Insufficient contrast — Always test; low contrast fails accessibility and looks cheap
❌ Color psychology mismatch — Red for healthcare trust, blue for energy drinks, etc.
❌ Saturated text — Never use pure saturated colors for body text; use neutral grays
❌ Ignoring cultural context — White = pure in West, mourning in Asia; red = luck in China, alert in US
❌ No dark mode consideration — Provide both light and dark palette variants
❌ Trend-only selection — Balance 2026 trends with timeless choices for primary colors
Testing Your Palette
- Contrast check: Use WebAIM Contrast Checker
- Accessibility test: Run palette through WCAG Color Contrast Checker
- Real application: Apply to actual website mockup — does it feel right?
- Mobile preview: Colors appear different on different screens; test on actual devices
- Colorblind simulation: Use Coblis to see how ~8% of users perceive colors
Integration with Design System
Once color palette is finalized:
- Add to
design-tokens.md (in project)
- Generate
tailwind.config.mjs using Design System skill
- Apply to
src/styles/global.css
- Preview on actual pages to verify harmony across all elements
Reference Files
references/color-theory-fundamentals.md — HSL model, color wheel, temperature, harmony principles
references/color-psychology.md — Color associations, cultural context, emotional impact (80+ associations)
references/color-schemes.md — 7 color schemes with formulas, HSL adjustments, when to use each
references/industry-color-psychology.md — Sector-specific expectations and recommendations
references/accessibility-contrast.md — WCAG standards, contrast calculations, verification tools
references/practical-application.md — Applying palettes to web components, light/dark modes, common UI patterns
references/tools-resources.md — Color picker tools, generators, accessibility checkers
Next Step: Share your brand colors (hex, RGB, or description) and I'll generate your complete color palette with accessibility verification.