Skip to content

DonkRonk17/color-palette-generator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 

Repository files navigation

🎨 Color Palette Generator

A beautiful, interactive web-based color palette generator. Create stunning color combinations with just one click!

✨ Features

  • 🎲 Random Generation: Generate harmonious color palettes instantly
  • 🔒 Lock Colors: Lock your favorite colors and regenerate the rest
  • 📤 Export Options:
    • Export as CSS variables
    • Export as JSON
    • Save as PNG image
  • ⌨️ Keyboard Shortcuts: Press spacebar to generate new palette
  • 📱 Responsive Design: Works perfectly on all devices
  • 🎯 Click to Lock: Click any color to lock/unlock it

🚀 Live Demo

Simply open index.html in your browser - no build process required!

📖 How to Use

  1. Generate Palettes: Click "Generate New Palette" or press spacebar
  2. Lock Colors: Click on any color card to lock it (locked colors won't change)
  3. Export Your Palette:
    • CSS: Get CSS custom properties for your project
    • JSON: Export palette data for programmatic use
    • Image: Save as PNG for design mockups

🎮 Keyboard Shortcuts

  • Space: Generate new palette

💻 Tech Stack

  • Pure HTML5
  • CSS3 (with gradients and animations)
  • Vanilla JavaScript (ES6+)
  • No dependencies required!

🎨 Use Cases

  • Web Design: Find color schemes for websites
  • Branding: Explore color combinations for brands
  • UI/UX: Create cohesive interface color palettes
  • Art Projects: Get color inspiration
  • Presentations: Generate professional color themes

📝 Export Formats

CSS Variables

:root {
  --color-1: #A45FB2;
  --color-2: #6C89D4;
  --color-3: #4BC9B8;
  --color-4: #F4A261;
  --color-5: #E76F51;
}

JSON

{
  "palette": [
    {
      "name": "color-1",
      "hex": "#A45FB2",
      "rgb": { "r": 164, "g": 95, "b": 178 }
    }
  ]
}

🌟 Features

  • Smart Color Generation: Uses HSL color space for harmonious results
  • Smooth Animations: Hover effects and transitions
  • User-Friendly: Intuitive interface with visual feedback
  • No Installation: Just download and open in browser

🤝 Contributing

Feel free to fork, improve, and submit pull requests!

📄 License

MIT License - feel free to use in your projects!

👤 Author

Created by DonkRonk17


Enjoy creating beautiful color palettes! 🎨✨

About

Interactive web-based color palette generator with export functionality

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published