happy-hues_skill

Overview

This skill provides curated color palettes from Happy Hues tailored for real UI design. It returns role-based color values (background, headline, button, highlight, etc.) and can filter palettes by mood or vibe to match your project needs. Each palette links to the live preview on happyhues.co for quick visual checks.

How this skill works

The skill loads the included palettes dataset and matches user requests against palette mood tags (e.g., warm, dark, bold, minimal). It returns the selected palette with explicit role assignments—background, headline, paragraph, button, buttonText, stroke, main, highlight, secondary, tertiary—so designers can apply colors immediately. It also supplies the live preview URL (https://www.happyhues.co/palettes/{id}) for each palette.

When to use it

• When you need ready-made color schemes for UI design or web projects.
• When you want role-based colors (background, headline, button, highlight) rather than raw swatches.
• When you need palettes filtered by mood: warm, dark, bold, minimal, soft, professional, etc.
• When you want quick links to live previews on Happy Hues for validation and inspiration.
• When you’re building a style guide, component library, or rapid prototype and need cohesive palettes.

Best practices

• Specify the intended mood or vibe (e.g., minimal, dark, warm) to get relevant palettes quickly.
• Use the role-based colors as-is for consistent UI: background for surfaces, headline for headings, paragraph for body text, button/buttonText for CTAs.
• Check contrast between headline/buttonText and their backgrounds before finalizing accessibility.
• Preview the palette on real UI screens via the provided Happy Hues link before committing to a design system.
• Combine primary highlight with secondary/tertiary accents for better visual hierarchy rather than using many strong colors at once.

Example use cases

• Request a ‘minimal’ palette for a SaaS dashboard and get role-based colors for background, cards, headings, and CTAs.
• Ask for ‘dark’ mood palettes to design a night mode for a mobile app with correct text and stroke colors.
• Get a ‘warm/cozy’ palette for a lifestyle blog and receive ready-to-use colors for hero, buttons, and highlights.
• Select a ‘professional’ palette for a corporate site to ensure clean headings, readable body text, and subtle accents.
• Compare two palettes (e.g., Clean Blue vs Teal Minimal) and receive their live preview links to choose visually.