Skill: Build Color Palette
Purpose
Create a comprehensive, systematic color palette with sufficient shades to build realistic interfaces (8-10 greys, 5-10 primary shades, 5-10 accent shades).
Type
Generative + Evaluative
Input
- Brand color(s) or design mood/intent
- UI complexity (simple landing page vs. complex dashboard)
- Required semantic meanings (success, error, warning, info)
- Need for categorical colors (charts, calendars, tags)
Output
- Color palette specification with multiple shades per color
- Role assignment for each shade
- Usage guidelines
- Pass/Fail assessment of existing palette
Transformation Performed
Maps functional needs to a comprehensive palette organized into three categories (greys, primary, accents), each with 5-10 distinct shades.
Decision Criteria
PASS (Good Color Palette)
- Greys: 8-10 shades - For text, backgrounds, panels, form controls (majority of UI)
- Primary: 5-10 shades - One or two core colors for primary actions, active navigation
- Accent: 5-10 shades each - For semantic states (red, yellow, green), new features, categorization
- Systematic shades: Each color has light to dark variants defined upfront
- Clear hierarchy: Primary color defines overall look; accents used sparingly
- Sufficient contrast: All text meets WCAG AA (4.5:1 for normal, 3:1 for large)
- Not using opacity: Explicit hex values for all shades
FAIL (Poor Color Palette)
- Too few greys (3-4 shades leading to compromises)
- Missing shades of primary color (can't create hover states, subtle backgrounds)
- Not enough accent colors for semantic states and categorization
- Using opacity (rgba) instead of defined shades (inconsistency)
- Missing systematic shade progression (arbitrary light/dark variants)
- Insufficient contrast for accessibility
The Palette Structure
Greys (8-10 shades)
The majority of your UI is grey. You need more than you think.
White / Near-white: #FFFFFF, #F9FAFB
Gray 100: #F3F4F6 - Subtle backgrounds
Gray 200: #E5E7EB - Borders, dividers
Gray 300: #D1D5DB - Disabled states
Gray 400: #9CA3AF - Placeholder text
Gray 500: #6B7280 - Secondary text
Gray 600: #4B5563 - Body text
Gray 700: #374151 - Strong text
Gray 800: #1F2937 - Headings
Gray 900: #111827 - Near-black text
Start with dark grey (not true black) and work up to white in steady increments.
Primary Colors (5-10 shades)
One or two colors that define the overall look of your site.
Primary 50: Ultra-light (alert backgrounds)
Primary 100: Very light (subtle backgrounds)
Primary 200-300: Light (hover states)
Primary 400-500: Base (buttons, links)
Primary 600-700: Dark (hover text, emphasis)
Primary 800-900: Very dark (text on light)
Accent Colors (5-10 shades each)
Used sparingly to grab attention or communicate meaning.
| Color | Use Case |
|---|
| Red | Destructive actions, errors, warnings |
| Yellow/Amber | New features, caution, highlights |
| Green | Success, positive trends, confirmation |
| Teal/Pink/Purple | Feature highlights, categorization, calendars |
Each accent needs 5-10 shades just like primary colors.
Visual/UX Signals Used
- Shade progression: Steady increments from light to dark
- Grey dominance: Greys are the foundation; colors accent
- Semantic meaning: Red = danger, Green = success, Yellow = warning/feature
- Contrast ratios: Higher contrast = more importance or readability
- Sparingly used: Primary and accents used intentionally, not everywhere
Common Failure Modes
| Failure | Description | Fix |
|---|
| 5-Color Generator | Using only 5 hex codes for entire UI | Build comprehensive palette with 8-10 greys, 5-10 primary shades, 5-10 accent shades |
| Too Few Greys | 3-4 grey shades leading to compromises | Expand to 8-10 greys from near-white to near-black |
| Opacity for Shades | Using to create lighter/darker | Define explicit hex shades upfront for consistency |
| Missing Hover States | No lighter/darker variants for interactions | Each interactive color needs 5-10 shades |
| Missing Semantic Colors | Only brand colors, no red/yellow/green | Add accent colors for errors, warnings, success |
| Too Few Accent Shades | Only one shade of red/green/yellow | Each accent needs 5-10 shades for flexibility |
| True Black Text | Using #000000 (harsh) | Start with #111827 or #1F2937 |
Prerequisites
- Brand guidelines or base color
- Understanding of UI states (errors, success, hover, etc.)
- Knowledge of categorical needs (charts, tags, etc.)
Dependencies
establish-visual-hierarchy
- (accessibility requirement)
Refactoring UI References
- "You need more colors than you think"
- "Define your shades up front"
- "Greys are the majority of your UI"
- "Don't use opacity to create lighter colors"
- "Build a comprehensive palette, not 5 hex codes"
Shade Definition Method
For each color, define shades by adjusting lightness in HSL:
- Ultra-light: 95-98% lightness (backgrounds)
- Light: 80-90% lightness (hover backgrounds)
- Base: 45-55% lightness (buttons, links)
- Dark: 20-35% lightness (text, emphasis)
- Very dark: 10-15% lightness (headings)
Example Assessment
Input: Palette with only: Brand Blue #0066FF, Light Blue #E6F2FF, White, Grey #999999, Black
Evaluation: FAIL
- Only 2 blue shades (need 5-10)
- Only 1 grey (need 8-10)
- Missing semantic colors (red, yellow, green)
- Missing accent shades
Recommendation:
Build comprehensive palette:
Greys (10):
#F9FAFB, #F3F4F6, #E5E7EB, #D1D5DB, #9CA3AF, #6B7280, #4B5563, #374151, #1F2937, #111827
Primary Blue (8):
#EFF6FF, #DBEAFE, #BFDBFE, #93C5FD, #60A5FA, #3B82F6, #2563EB, #1D4ED8
Accents (7-8 each):
- Red: #FEF2F2... #991B1B (for errors, destructive)
- Yellow: #FFFBEB... #92400E (for warnings, new features)
- Green: #F0FDF4... #166534 (for success, positive)
Total: 10 greys + 8 primary + 21 accents = 39 shades organized systematically