majiayu000 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