// Create comprehensive palette with 8-10 greys, 5-10 primary, 5-10 accent shades
Determine what UI element draws attention first, second, third using size, weight, color, and de-emphasis strategies
Create clear typographic hierarchy using hand-crafted font sizes, weights, and colors
Use systematic spacing with 25% minimum jumps, start with excess whitespace
Create clear primary/secondary/tertiary action distinctions
Remove unnecessary borders, backgrounds, shadows, decorations
Create helpful, actionable zero-content states
| name | build-color-palette |
| description | Create comprehensive palette with 8-10 greys, 5-10 primary, 5-10 accent shades |
| domain | ui-design |
| skill-type | generative |
| version | 1.0.0 |
| author | refactoring-ui-expert |
| prerequisites | [] |
| dependencies | [] |
Create a comprehensive, systematic color palette with sufficient shades to build realistic interfaces (8-10 greys, 5-10 primary shades, 5-10 accent shades).
Generative + Evaluative
Maps functional needs to a comprehensive palette organized into three categories (greys, primary, accents), each with 5-10 distinct 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.
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)
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.
| 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 |
establish-visual-hierarchy (colors support hierarchy)manage-color-contrast (accessibility requirement)For each color, define shades by adjusting lightness in HSL:
Input: Palette with only: Brand Blue #0066FF, Light Blue #E6F2FF, White, Grey #999999, Black
Evaluation: FAIL
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):
Total: 10 greys + 8 primary + 21 accents = 39 shades organized systematically