acesdit · Tejas-Santosh-Nalawade · Oct 20, 2025 · Oct 20, 2025
diff --git a/Domains/Frontend/MiniProjects/ColorPaletteGenerator/README.md b/Domains/Frontend/MiniProjects/ColorPaletteGenerator/README.md
@@ -0,0 +1,184 @@
+# 🎨 Color Palette Generator
+
+**Contributor:** vatsalgupta2004
+
+## 🧾 Description
+A **professional Color Palette Generator** web app that helps developers and designers create beautiful color schemes. Generate random palettes, adjust colors, copy hex codes, and export your favorite palettes - all with a clean, modern interface.
+
+---
+
+## 🚀 Features
+- 🎲 **Generate Random Palettes** - Create 5-color palettes instantly
+- 🎨 **Interactive Color Picker** - Click any color to customize it
+- 📋 **One-Click Copy** - Copy hex codes to clipboard
+- 🔒 **Lock Colors** - Lock colors you like while randomizing others
+- 💾 **Save Palettes** - Save your favorite palettes locally
+- 📱 **Fully Responsive** - Works perfectly on all devices
+- ⌨️ **Keyboard Shortcuts** - Spacebar to generate new palettes
+- 🌈 **Color Formats** - Display HEX, RGB, and HSL values
+
+---
+
+## 💡 Bonus Features
+- **Color Accessibility Checker** - Validates WCAG contrast ratios
+- **Gradient Preview** - See how colors work together in gradients
+- **Export Options** - Download palette as CSS, JSON, or image
+- **Smooth Animations** - Beautiful transitions and hover effects
+- **Dark Mode Ready** - Professional dark interface
+
+---
+
+## 🧩 Tech Stack
+- **HTML5** – Semantic structure and layout  
+- **CSS3** – Modern styling, animations, and responsiveness  
+- **JavaScript (ES6+)** – Interactive functionality and logic  
+
+---
+
+## 📸 Screenshots
+
+### Main Interface
+![Color Palette Generator](screenshot.png)
+
+---
+
+## 🎯 Use Cases
+- Web developers creating color schemes for projects
+- UI/UX designers exploring color combinations
+- Digital artists finding inspiration
+- Anyone needing quick color palettes
+
+---
+
+## 🛠️ How to Use
+
+1. **Generate Palette**
+   - Click "Generate New Palette" or press `Spacebar`
+   - Get 5 random coordinated colors
+
+2. **Customize Colors**
+   - Click on any color to open color picker
+   - Adjust to your preference
+
+3. **Lock Favorites**
+   - Click the lock icon to keep colors you like
+   - Generate new colors for unlocked ones
+
+4. **Copy Colors**
+   - Click on hex code to copy to clipboard
+   - Use in your projects immediately
+
+5. **Save Palette**
+   - Click "Save Palette" to store locally
+   - Access saved palettes anytime
+
+---
+
+## 🚀 Getting Started
+
+### Prerequisites
+- A modern web browser (Chrome, Firefox, Safari, Edge)
+
+### Installation
+
+1. Clone or download the project files
+2. Open `index.html` in your browser
+3. Start creating beautiful color palettes!
+
+No build process or dependencies required - just open and use!
+
+---
+
+## 🎨 Features in Detail
+
+### Random Palette Generation
+Uses color theory algorithms to generate harmonious color combinations:
+- Analogous schemes
+- Complementary colors
+- Triadic harmonies
+- Monochromatic variations
+
+### Accessibility Features
+- High contrast UI elements
+- Clear visual feedback
+- Keyboard navigation support
+- Screen reader friendly
+
+### Export Formats
+```css
+/* CSS Variables */
+:root {
+  --color-1: #FF6B6B;
+  --color-2: #4ECDC4;
+  --color-3: #45B7D1;
+  --color-4: #96CEB4;
+  --color-5: #FFEAA7;
+}
+```
+
+```json
+{
+  "palette": ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEAA7"],
+  "name": "Summer Vibes"
+}
+```
+
+---
+
+## 🎮 Keyboard Shortcuts
+- `Space` - Generate new palette
+- `C` - Copy current palette
+- `S` - Save palette
+- `L` - Toggle lock on selected color
+- `E` - Export palette
+
+---
+
+## 📱 Responsive Design
+- **Desktop** - Full feature set with large color swatches
+- **Tablet** - Optimized layout for touch interactions
+- **Mobile** - Compact view with essential features
+
+---
+
+## 🔧 Customization
+Edit `styles.css` to customize:
+- Color scheme
+- Animations
+- Layout spacing
+- Font styles
+
+---
+
+## 🌟 Future Enhancements
+- [ ] Color palette trends and presets
+- [ ] Share palettes via URL
+- [ ] Integration with design tools (Figma, Adobe XD)
+- [ ] AI-powered palette suggestions
+- [ ] Color blind simulation mode
+
+---
+
+## 📄 License
+This project is open source and available under the MIT License.
+
+---
+
+## 🤝 Contributing
+Feel free to fork this project and submit pull requests for improvements!
+
+---
+
+## 👨‍💻 Author
+**Contributor:** vatsalgupta2004
+
+---
+
+## 🙏 Acknowledgments
+- Color theory concepts from Adobe Color
+- Inspired by Coolors.co and Color Hunt
+- Built for the open-source community
+
+---
+
+**Made with ❤️ for developers and designers | Hacktoberfest 2025**
diff --git a/Domains/Frontend/MiniProjects/ColorPaletteGenerator/index.html b/Domains/Frontend/MiniProjects/ColorPaletteGenerator/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Professional Color Palette Generator - Create beautiful color schemes for your projects">
+    <meta name="keywords" content="color palette, color generator, hex colors, design tools, web development">
+    <title>Color Palette Generator | Create Beautiful Color Schemes</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <!-- Header -->
+        <header class="header">
+            <h1>🎨 Color Palette Generator</h1>
+            <p class="subtitle">Create beautiful color schemes for your projects</p>
+        </header>
+
+        <!-- Controls -->
+        <div class="controls">
+            <button id="generateBtn" class="btn btn-primary" title="Press Space">
+                <span>🎲</span> Generate New Palette
+            </button>
+            <button id="saveBtn" class="btn btn-secondary">
+                <span>💾</span> Save Palette
+            </button>
+            <button id="exportBtn" class="btn btn-secondary">
+                <span>📥</span> Export
+            </button>
+            <button id="clearBtn" class="btn btn-danger">
+                <span>🗑️</span> Clear Saved
+            </button>
+        </div>
+
+        <!-- Color Palette Display -->
+        <div class="palette-container" id="paletteContainer">
+            <!-- Color boxes will be generated by JavaScript -->
+        </div>
+
+        <!-- Color Information -->
+        <div class="color-info" id="colorInfo">
+            <h3>Selected Color Information</h3>
+            <div class="info-grid">
+                <div class="info-item">
+                    <label>HEX:</label>
+                    <span id="hexValue">-</span>
+                </div>
+                <div class="info-item">
+                    <label>RGB:</label>
+                    <span id="rgbValue">-</span>
+                </div>
+                <div class="info-item">
+                    <label>HSL:</label>
+                    <span id="hslValue">-</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Saved Palettes -->
+        <div class="saved-section">
+            <h3>💾 Saved Palettes <span id="savedCount">(0)</span></h3>
+            <div class="saved-palettes" id="savedPalettes">
+                <p class="no-saved">No saved palettes yet. Save your favorite combinations!</p>
+            </div>
+        </div>
+
+        <!-- Export Modal -->
+        <div class="modal" id="exportModal">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h3>Export Palette</h3>
+                    <button class="close-btn" id="closeModal">&times;</button>
+                </div>
+                <div class="modal-body">
+                    <div class="export-options">
+                        <button class="export-btn" data-format="css">
+                            <span>📄</span> Export as CSS
+                        </button>
+                        <button class="export-btn" data-format="json">
+                            <span>🔗</span> Export as JSON
+                        </button>
+                        <button class="export-btn" data-format="scss">
+                            <span>💎</span> Export as SCSS
+                        </button>
+                    </div>
+                    <div class="export-preview">
+                        <h4>Preview:</h4>
+                        <pre id="exportPreview"><code></code></pre>
+                        <button id="copyExport" class="btn btn-primary">Copy to Clipboard</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Toast Notification -->
+        <div class="toast" id="toast">
+            <span id="toastMessage">Color copied!</span>
+        </div>
+
+        <!-- Footer -->
+        <footer class="footer">
+            <p>
+                <strong>Keyboard Shortcuts:</strong> 
+                Space - Generate | S - Save | E - Export | C - Copy Current
+            </p>
+            <p>Made with ❤️ for <strong>Hacktoberfest 2025</strong> by <a href="https://github.com/vatsalgupta2004" target="_blank" rel="noopener">vatsalgupta2004</a></p>
+        </footer>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>