🌈 Rainbow Color Picker

A beautiful, modern, and interactive color picker web application with a stunning rainbow gradient theme. Built with React and Tailwind CSS for a smooth and responsive user experience.

🚀 Live Demo

https://rainbow-color-picker.vercel.app/

✨ Features

• 🎨 HSL Color Controls - Fine-tune colors with interactive Hue, Saturation, and Lightness sliders
• 🌈 Rainbow Presets - 12 vibrant preset colors for quick selection
• 📋 Clipboard Integration - One-click color code copying with visual feedback
• 🎯 Custom Input - Both visual color picker and manual hex input
• 💫 Smooth Animations - Beautiful hover effects and transitions throughout
• 📱 Fully Responsive - Works seamlessly on desktop, tablet, and mobile devices
• 🎭 Modern UI - Glassmorphism design with rainbow gradient background
• 🔄 Real-time Preview - Instant color updates as you adjust sliders

🖼️ Screenshots

Desktop View

🛠️ Built With

• React 18 - JavaScript library for building user interfaces
• Tailwind CSS - Utility-first CSS framework
• Lucide React - Beautiful and consistent icon library
• Create React App - Standard toolchain for React applications

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v14.0.0 or higher)
• npm (v6.0.0 or higher)

Check your versions:

node --version
npm --version

🚀 Getting Started

Installation

1. Clone the repository

git clone https://github.com/code0era/Rainbow-Color-Picker.git

2. Navigate to the project directory

cd Rainbow-Color-Picker

3. Install dependencies

npm install

4. Start the development server

npm start

5. Open your browser
   • The app will automatically open at http://localhost:3000
   • If it doesn't, manually navigate to the URL

Build for Production

Create an optimized production build:

npm run build

The build folder will contain the optimized files ready for deployment.

📁 Project Structure

rainbow-color-picker/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.js              # Main application component
│   ├── index.js            # Entry point
│   └── index.css           # Global styles with Tailwind
├── package.json            # Dependencies and scripts
├── tailwind.config.js      # Tailwind configuration
├── postcss.config.js       # PostCSS configuration
└── README.md               # Project documentation

🎨 How to Use

1. Adjust HSL Sliders

   • Move the Hue slider to change the base color (0-360°)
   • Adjust Saturation for color intensity (0-100%)
   • Control Lightness from black to white (0-100%)

2. Choose Preset Colors

   • Click any of the 12 rainbow preset color buttons
   • Instantly apply beautiful pre-selected colors

3. Custom Color Input

   • Use the visual color picker for quick selection
   • Or type/paste a hex color code directly

4. Copy Color Code

   • Click the "Copy Color Code" button
   • The hex code is instantly copied to your clipboard
   • Visual confirmation appears on successful copy

🔧 Configuration

Tailwind CSS

The project uses Tailwind CSS with default configuration. To customize:

Edit tailwind.config.js:

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      // Add your custom configurations here
    },
  },
  plugins: [],
}

Color Presets

To modify the rainbow preset colors, edit the rainbowColors array in src/App.js:

const rainbowColors = [
  '#FF0000', // Red
  '#FF7F00', // Orange
  // Add or modify colors here
];

🌐 Deployment

Deploy to Vercel (Recommended)

1. Push your code to GitHub
2. Go to Vercel
3. Import your GitHub repository
4. Vercel will auto-detect Create React App settings
5. Click "Deploy"

Deploy to Netlify

1. Build your project: npm run build
2. Drag and drop the build folder to Netlify

Deploy to GitHub Pages

1. Install gh-pages:

npm install --save-dev gh-pages

2. Add to package.json:

"homepage": "https://code0era.github.io/Rainbow-Color-Picker",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

3. Deploy:

npm run deploy

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a new branch (git checkout -b feature/AmazingFeature)
3. Make your changes
4. Commit your changes (git commit -m 'Add some AmazingFeature')
5. Push to the branch (git push origin feature/AmazingFeature)
6. Open a Pull Request

📝 License

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

👤 Author

code0era

• GitHub: @code0era
• Project Link: https://github.com/code0era/Rainbow-Color-Picker

🙏 Acknowledgments

• Icons provided by Lucide React
• Styling powered by Tailwind CSS
• Built with Create React App

📧 Support

If you have any questions or run into issues, please open an issue on GitHub or contact me directly.

---

Made with 🌈 and ❤️ by code0era

⭐ Star this repo if you find it helpful!