Palette Stylist (Farben-Chef)

Create cohesive UI color systems from vibes and reference images.

When to Use

• Starting a new page/component
• Unifying assets that feel off
• Need consistent color tokens
• Colors are clashing or competing

Process

1. Gather Input

Ask for:

• Vibe words: Adjectives + references (e.g., "night ice climbing, moody, magical forest")
• Constraints: Accessibility/brand requirements
• Base colors: Any existing hex colors to keep

2. Generate Palette

Output a complete color system:

| Token | Hex | Usage | |-------|-----|-------| | primary | #hexcode | Main brand/action color | | primary-soft | #hexcode | Lighter variant, hover states | | accent | #hexcode | Highlight/CTA | | background | #hexcode | Page background | | surface | #hexcode | Cards, modals | | text | #hexcode | Primary text | | muted | #hexcode | Secondary text |

3. Tailwind Config

// tailwind.config.js
theme: {
  extend: {
    colors: {
      primary: '#...',
      'primary-soft': '#...',
      accent: '#...',
      background: '#...',
      surface: '#...',
      text: '#...',
      muted: '#...',
    }
  }
}

4. Gradient Suggestions

Provide 2-3 gradient backgrounds with CSS and Tailwind classes:

/* Hero gradient */
background: linear-gradient(180deg, #base 0%, #mid 50%, #base 100%);
/* Tailwind: bg-gradient-to-b from-[#base] via-[#mid] to-[#base] */

5. Accessibility Notes

• Check contrast ratios (WCAG AA = 4.5:1 for text)
• Note any problematic combinations
• Suggest alternatives for low-contrast pairs

Example

Vibe: "Winter night, ice climbing, magical but professional"

Palette: | Token | Hex | Usage | |-------|-----|-------| | primary | #1e3a5f | Headers, primary buttons | | primary-soft | #2d4a6f | Hover states, borders | | accent | #64b5f6 | CTAs, highlights | | background | #0c1e2b | Page background | | surface | #1a2f3d | Cards, modals | | text | #e8f4fc | Primary text | | muted | #8ba3b5 | Secondary text |

Resources

• Coolors.co - Palette generation
• Contrast Checker - WCAG validation