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

1. Shade progression: Steady increments from light to dark
2. Grey dominance: Greys are the foundation; colors accent
3. Semantic meaning: Red = danger, Green = success, Yellow = warning/feature
4. Contrast ratios: Higher contrast = more importance or readability
5. 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 rgba() 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 (colors support hierarchy)
• manage-color-contrast (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