Explore what your 5 generated colors mean and how to use them effectively in your designs.

🟩 What the 5 Colors Mean

• Primary: Main color for logos, buttons, and key brand elements.
• Accent: For calls to action, highlights, or decorative areas.
• Muted: Backgrounds or UI panels to reduce visual noise.
• Neutral: Used in base UI, text, dividers, or cards.
• Secondary: To complement or alternate with your primary color.

🛠️ CSS Variable Output (Developer)

:root {
  --primary:    #507040;
  --accent:     #3C3C10;
  --muted:      #4B3B1B;
  --neutral:    #61561F;
  --secondary:  #3E3B19;
}

.btn-primary {
  background-color: var(--primary);
  color: #fff;
}
.card-muted {
  background-color: var(--muted);
  color: #fff;
}
.text-secondary {
  color: var(--secondary);
}

✅ Benefits

• Build visual consistency across brand materials.
• Accelerate design decisions using predictable colors.
• Maintain accessibility with strong contrast support.
• Express your brand personality via tone and emotion.
• Enable scalable UI by updating variables in one place.

💡 Quick Usage Tips

• Use --primary for major UI like nav, CTA, and brand visuals.
• Use --accent to draw attention to interactions.
• Use --muted for gentle backgrounds.
• Use --neutral to stay minimal and readable.
• Use --secondary for alternate themes or support layers.