Our review

Creates a cohesive UI color system from vibe descriptions and reference images.

Strengths

Generates a complete palette with tokens for primary, accent, background, etc.
Provides ready-to-use Tailwind CSS configuration snippets
Includes WCAG accessibility notes and gradient suggestions
Helps unify disparate visual assets into a consistent scheme

Limitations

Relies on subjective interpretation of vibe words
May not perfectly match brand guidelines without explicit constraints
Generated palettes may need manual tweaking for specific use cases

When to use it

Use when starting a new UI project, page, or component and need a harmonious color scheme based on a vibe.

When not to use it

Avoid if you must strictly adhere to an existing brand style guide with exact hex codes or if accessibility is already guaranteed by a design system.

Examples

Productivity app palette

Create a UI color palette for a productivity app with a vibe of 'calm focus, forest green, minimal'. Provide Tailwind config and accessibility notes.

Extend existing colors

I have existing colors #2c3e50 and #e74c3c. Generate a full palette with primary, accent, background, surface, text, and muted tokens, plus Tailwind config and gradient suggestions.

Dark theme for winter site

Give me a dark theme palette for a winter night ice climbing community site, moody and magical but professional. Include accessibility checks and gradient ideas.

name: palette-stylist description: Create cohesive UI color systems from vibes and reference images. Use when starting a new page/component, unifying assets that feel off, or need consistent color tokens. Outputs core palette (primary, accent, background, surface, text), Tailwind config snippets, gradient suggestions, and accessibility notes.

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

Palette Stylist - UI Color Systems

Recommended for