thedixitjain 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:
| Background Style | Mapping |
|---|---|
| Pure white | bg: #ffffff, text: darkest color |
| Off-white/warm | bg: #faf8f5, text: darkest |
| Light tinted | bg: lightest from palette, text: darkest |
| Dark/moody | bg: darkest from palette, text: white/#fafafa |
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
- Ask user about desired mood/aesthetic
- Present relevant fallback palettes from
references/color-theory.md - Let user choose or request adjustments
- 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
| Role | Usage | Count |
|---|---|---|
| Primary | Brand, CTAs, links | 1 |
| Secondary | Hover, icons, supporting | 1-2 |
| Background | Page background | 1 |
| Surface | Cards, modals, inputs | 1 |
| Border | Dividers, outlines | 1 |
| Text Primary | Headings, important text | 1 |
| Text Secondary | Body, descriptions | 1 |
| Text Muted | Captions, placeholders | 1 |
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
Source: davepoon/buildwithclaude → plugins/frontend-design-pro/skills/color-curator/SKILL.md