| 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?)
