Notre avis

Crée un système de couleurs UI cohérent à partir de mots-clés d'ambiance et d'images de référence.

Points forts

Génère une palette complète avec des tokens pour primary, accent, background, etc.
Fournit des extraits de configuration Tailwind CSS prêts à l'emploi
Inclut des notes d'accessibilité WCAG et des suggestions de dégradés
Permet d'unifier des assets visuels disparates

Limites

Dépend de l'interprétation subjective des mots d'ambiance
Peut ne pas correspondre exactement à des directives de marque strictes sans contraintes explicites
Les palettes générées peuvent nécessiter des ajustements manuels pour des cas d'usage précis

Quand l'utiliser

Utilisez-le lorsque vous démarrez un nouveau projet UI, une page ou un composant, et avez besoin de couleurs harmonieuses basées sur une vibe.

Quand l'éviter

Évitez si vous devez respecter une charte graphique existante avec des codes hexadécimaux précis ou si l'accessibilité est déjà garantie par un design system.

Exemples

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 - Systèmes de couleurs UI

Recommandé pour