🎨 Interactive Color Palette Generator

A modern, interactive color palette generator built with Vue 3 and cutting-edge web technologies

🚀 Live Demo | 📖 Documentation | 🐛 Report Bug | ✨ Request Feature

---

✨ Features

🎯 Smart Color Generation - Generate palettes from keywords, hex codes, or named colors
🎲 Random Palette Generator - Create surprise color combinations with one click
💫 Interactive UI - Smooth animations, hover effects, and responsive design
🌈 Gradient Suggestions - Auto-generated CSS gradients from your palette
👀 Live Preview - Real-time UI preview with your color scheme
📋 Copy to Clipboard - One-click copying of colors and gradients
💾 Export Functionality - Download palettes as JSON files
⚡ Modern Tech Stack - Vue 3 Composition API, Vite, and SCSS
📱 Mobile Responsive - Perfect experience on all device sizes
🎨 Professional Design - Glass morphism and modern UI patterns

� Screenshots

Main Interface

Generated Palette

Mobile Responsive

�🚀 Quick Start

Prerequisites

• Node.js (v16 or higher) - Download here
• npm or yarn package manager
• Modern web browser

🔧 Installation

# Clone the repository
git clone https://github.com/f1ss1on/color-palette-generator.git

# Navigate to project directory
cd color-palette-generator

# Install dependencies
npm install

# Start development server
npm run dev

# Open your browser to http://localhost:3000

That's it! 🎉 Your color palette generator is now running locally.

🎯 How to Use

1. Generate from Keywords

Type any descriptive word and watch the magic happen:

• ocean → Beautiful blue tones
• sunset → Warm orange and pink hues
• forest → Rich green variations
• vintage → Muted retro colors

2. Use Color Codes

Enter specific colors for precise control:

• Hex codes: #3498db, #e74c3c
• Named colors: blue, crimson, forestgreen
• RGB values: rgb(52, 152, 219)

3. Random Generation

Click the Randomize button for surprise combinations - perfect for creative exploration!

4. Copy & Export

• Copy Colors: Click any color card to copy hex codes
• Copy Gradients: Click gradient previews to copy CSS
• Export JSON: Download complete palette data

🛠️ Available Scripts

Command	Description
npm run dev	🚀 Start development server with hot reload
npm run build	📦 Build optimized production bundle
npm run preview	👀 Preview production build locally
npm run lint	🔍 Run ESLint for code quality
npm run format	✨ Format code with Prettier

🏗️ Project Structure

src/
├── components/          # Vue components
│   ├── ColorCard.vue   # Individual color display
│   ├── GradientCard.vue# Gradient display
│   ├── PaletteControls.vue # Input and controls
│   └── PalettePreview.vue  # UI preview
├── styles/             # Global styles
│   ├── main.scss      # Main stylesheet
│   └── variables.scss # SCSS variables and mixins
├── utils/             # Utility functions
│   └── colorUtils.js  # Color manipulation utilities
├── App.vue           # Main application component
└── main.js          # Application entry point

🎨 How to Use

1. Generate from Keywords: Type any word (e.g., "ocean", "sunset") and click Generate
2. Use Color Codes: Enter hex codes (#3498db) or named colors (blue)
3. Random Generation: Click Randomize for surprise color combinations
4. Copy Colors: Click any color card to copy the hex code
5. Export Palette: Use the Export JSON button to save your palette

🏗️ Tech Stack

Frontend	Build Tools	Styling	Code Quality
Vue 3	Vite	SCSS	ESLint
Composition API	Hot Reload	CSS Modules	Prettier
Reactive System	Tree Shaking	Glass Morphism	Git Hooks

🔧 Customization

🎨 Adding New Color Generation Methods

Extend the colorUtils.js file to add custom palette algorithms:

// src/utils/colorUtils.js
export function generateFromMood(mood) {
  const moodMaps = {
    calm: ['#e3f2fd', '#bbdefb', '#90caf9'],
    energetic: ['#ff5722', '#ff9800', '#ffc107'],
    mysterious: ['#1a1a2e', '#16213e', '#0f3460']
  }
  return moodMaps[mood] || generateRandomPalette()
}

🎭 Custom Styling

Modify SCSS variables for your brand:

// src/styles/variables.scss
$primary-gradient: linear-gradient(90deg, #your-brand, #secondary);
$glass-bg: rgba(255, 255, 255, 0.08);
$accent-color: #your-accent;

🧩 Adding Components

Create new Vue components in src/components/:

<!-- src/components/YourComponent.vue -->
<template>
  <div class="your-component">
    <!-- Your template -->
  </div>
</template>

<script>
export default {
  name: 'YourComponent',
  // Component logic
}
</script>

🤝 Contributing

We love contributions! Here's how you can help make this project even better:

🚀 Quick Contribution Guide

1. Fork the repository
2. Clone your fork: git clone https://github.com/YOUR_USERNAME/color-palette-generator.git
3. Create a feature branch: git checkout -b feature/amazing-feature
4. Make your changes
5. Test your changes: npm run dev
6. Commit your changes: git commit -m 'Add amazing feature'
7. Push to your branch: git push origin feature/amazing-feature
8. Submit a Pull Request

🐛 Found a Bug?

1. Check if it's already reported in Issues
2. If not, create a new issue with:
   • Clear description of the bug
   • Steps to reproduce
   • Expected vs actual behavior
   • Screenshots (if applicable)

💡 Feature Requests

Have an idea? We'd love to hear it! Open an issue with:

• Clear description of the feature
• Use case examples
• Mockups or sketches (if applicable)

📊 Project Stats

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🌟 Acknowledgments & Credits

• 🖖 Vue.js Team - For the incredible framework
• ⚡ Vite Team - For lightning-fast development experience
• 🎨 Font Awesome - For beautiful icons
• 🎭 Bootstrap Team - For utility classes
• 🎨 Design Community - For endless inspiration
• 💻 Open Source Community - For making this possible

📬 Connect & Support

Found this helpful? Give it a ⭐️

Report Issues • Request Features • Contribute

---

_{Built with ❤️ using Vue 3, Vite, and modern web technologies by f1ss1on}