菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Ensures every website element — layout, messaging, navigation, imagery, CTAs — reflects the client's brand identity and speaks clearly to their ideal customer. Use before and during page building to validate that the site feels intentional, cohesive, and trustworthy.
Builds multi-language Astro site, verifies output for all language versions, generates deployment scripts and Nginx configuration with root redirect and language-aware routing. Supports English, French, Kiswahili. Use after all pages are built, as the final step.
Analyses up to 5 reference websites provided by the client, visits each one, and generates a structured design guide (docs/design-reference.md) that captures the patterns, features, and qualities the client admires. Use when the client provides URLs of websites they like. Run before design-system.
Establishes the visual foundation for a website — fonts, colors, spacing, animations, and aesthetic direction. Use before building any pages. Reads docs/style-brief.md for brand direction.
Language and tone standard for all written content. Enforces authentic East African English as used in Uganda, Kenya, and Tanzania — formal, clear, respectful, British-influenced, and professionally courteous. Apply to every piece of text generated for the website.
Secure email sending from static websites using PHP + PHPMailer on Apache/WAMP. Self-hosted contact form handler with 4-layer spam prevention (honeypot, timing, content scan, rate limiting), stateless CSRF, beautiful branded HTML emails, and bilingual support. No external services required.
| 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. |
Transform brand colors into cohesive, psychologically-optimized website color palettes that look intentional, professional, and industry-authentic.
✅ 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)
Ask for the user's brand colors. Accept:
#3B82F6)rgb(59, 130, 246))Typically users provide 1-3 primary colors. If only one provided, generate complementary palette from it. If multiple provided, evaluate harmony.
Determine:
Reference: See references/color-psychology.md for industry-specific color guidance and psychological associations.
Select the most appropriate color scheme based on harmony principles:
Reference: See references/color-schemes.md for detailed explanations, HSL adjustments, and scheme-specific guidance.
Distribute colors by visual weight:
Example:
--color-primary: #3B82F6; /* 60% */
--color-secondary: #F3F4F6; /* 30% */
--color-accent: #DC2626; /* 10% */
Generate 5-7 color tokens:
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.
Test each color pair that will be used together:
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.
Provide color tokens as:
tailwind.config.mjs)global.css)Example Tailwind:
colors: {
primary: '#3B82F6',
secondary: '#F3F4F6',
accent: '#DC2626',
success: '#10B981',
warning: '#F59E0B',
error: '#EF4444',
neutral: '#6B7280'
}
Before finalizing palette, reference references/industry-color-psychology.md for sector-specific expectations:
❌ 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
Once color palette is finalized:
design-tokens.md (in project)tailwind.config.mjs using Design System skillsrc/styles/global.cssreferences/color-theory-fundamentals.md — HSL model, color wheel, temperature, harmony principlesreferences/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 eachreferences/industry-color-psychology.md — Sector-specific expectations and recommendationsreferences/accessibility-contrast.md — WCAG standards, contrast calculations, verification toolsreferences/practical-application.md — Applying palettes to web components, light/dark modes, common UI patternsreferences/tools-resources.md — Color picker tools, generators, accessibility checkersNext Step: Share your brand colors (hex, RGB, or description) and I'll generate your complete color palette with accessibility verification.