Color Curator

Browse, select, and apply color palettes for frontend designs.

Purpose

This skill helps select the perfect color palette by:

• Browsing trending palettes on Coolors
• Presenting options to the user
• Extracting hex codes
• Mapping to Tailwind config
• Providing curated fallbacks when browser unavailable

Browser Workflow

Step 1: Navigate to Coolors

tabs_context_mcp({ createIfEmpty: true })
tabs_create_mcp()
navigate({ url: "https://coolors.co/palettes/trending", tabId: tabId })

Step 2: Screenshot Palettes

Take screenshots of trending palettes:

computer({ action: "screenshot", tabId: tabId })

Present to user: "Here are the trending palettes. Which one catches your eye?"

Step 3: Browse More

If user wants more options:

computer({ action: "scroll", scroll_direction: "down", tabId: tabId })
computer({ action: "screenshot", tabId: tabId })

Step 4: Select Palette

When user chooses a palette, click to view details:

computer({ action: "left_click", coordinate: [x, y], tabId: tabId })

Step 5: Extract Colors

From the palette detail view, extract:

• All 5 hex codes
• Color names if available
• Relative positions (light to dark)

Step 6: Map to Design

Based on user's background style preference:

Step 7: Generate Config

Create Tailwind color config:

tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#[main-color]',
        secondary: '#[supporting-color]',
        accent: '#[pop-color]',
        background: '#[bg-color]',
        surface: '#[card-color]',
        text: {
          primary: '#[heading-color]',
          secondary: '#[body-color]',
          muted: '#[muted-color]'
        }
      }
    }
  }
}

---

Fallback Mode

When browser tools are unavailable, use curated palettes.

How to Use Fallbacks

1. Ask user about desired mood/aesthetic
2. Present relevant fallback palettes from references/color-theory.md
3. Let user choose or request adjustments
4. Provide hex codes for selected palette

Present Options

Ask the user:

"Without browser access, I can suggest palettes based on your aesthetic. Which mood fits best?"

• Dark & Premium: Rich blacks with warm accents
• Clean & Minimal: Neutral grays with single accent
• Bold & Energetic: High contrast primaries
• Warm & Inviting: Earth tones and creams
• Cool & Professional: Blues and slate grays
• Creative & Playful: Vibrant multi-color

Manual Input

Users can also provide:

• Hex codes directly: "Use #ff6b35 as primary"
• Color descriptions: "I want a forest green and cream palette"
• Reference: "Match these colors from my logo"

---

Palette Best Practices

60-30-10 Rule

• 60%: Dominant color (background, large areas)
• 30%: Secondary color (containers, sections)
• 10%: Accent color (CTAs, highlights)

Contrast Requirements

Always verify:

• Text on background: 4.5:1 minimum
• Large text on background: 3:1 minimum
• Interactive elements: 3:1 minimum

Color Roles

---

Output Format

Provide the selected palette in this format:

## Selected Color Palette

### Colors
| Role | Hex | Preview | Usage |
|------|-----|---------|-------|
| Primary | #ff6b35 | 🟧 | CTAs, links, accents |
| Background | #0a0a0a | ⬛ | Page background |
| Surface | #1a1a1a | ⬛ | Cards, modals |
| Text Primary | #ffffff | ⬜ | Headings, buttons |
| Text Secondary | #a3a3a3 | ⬜ | Body text, descriptions |
| Border | #2a2a2a | ⬛ | Dividers, outlines |

### Tailwind Config
\`\`\`javascript
colors: {
  primary: '#ff6b35',
  background: '#0a0a0a',
  surface: '#1a1a1a',
  text: {
    primary: '#ffffff',
    secondary: '#a3a3a3',
  },
  border: '#2a2a2a',
}
\`\`\`

### CSS Variables (Alternative)
\`\`\`css
:root {
  --color-primary: #ff6b35;
  --color-background: #0a0a0a;
  --color-surface: #1a1a1a;
  --color-text-primary: #ffffff;
  --color-text-secondary: #a3a3a3;
  --color-border: #2a2a2a;
}
\`\`\`

---

References

See references/color-theory.md for:

• Curated fallback palettes by aesthetic
• Color psychology guide
• Palette creation techniques
• Accessibility considerations