🎨 Color Picker App

A beautiful, modern color picker web application that allows users to select colors and see them reflected across the entire screen with smooth animations and dynamic text color adjustments.

✨ Features

• Interactive Color Selection: Choose colors using a circular color picker or by entering color names/HEX codes
• Full-Screen Background Change: Selected color instantly reflects across the entire screen
• Smart Text Color Adjustment: Text automatically switches between dark and light modes based on background brightness for optimal visibility
• Modern Glassmorphism Design: Beautiful frosted glass effect with backdrop blur
• Smooth Animations: Engaging animations including pulse effects, slide-ins, and transitions
• Animated Background: Subtle drifting particle pattern for visual appeal
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• Real-time Updates: Instant color changes as you select or type

🚀 Demo

Simply open the index.html file in your browser to see the app in action!

📋 Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• No additional installations required!

🛠️ Installation

1. Clone or download this repository
2. Ensure all files are in the same directory:
   • index.html
   • style.css
   • script.js
3. Open index.html in your web browser

📁 Project Structure

Color-Picker-App/
│
├── index.html          # Main HTML structure
├── style.css           # Styling and animations
├── script.js           # Color picker functionality
└── README.md           # Project documentation

💻 Technologies Used

• HTML5: Semantic markup structure
• CSS3: Modern styling with animations and glassmorphism effects
• JavaScript (ES6): Interactive functionality and color calculations
• Font Awesome 6: Icons for enhanced UI
• Google Fonts: Poppins font family

🎯 Usage

Using the Color Picker:

1. Click on the circular color picker to select a color visually
2. The background will change instantly to your selected color

Using the Text Input:

1. Type a color name (e.g., "red", "blue", "coral") or HEX code (e.g., "#FF5733")
2. Press Enter or click outside the input field
3. The background will update to your specified color

Supported Color Formats:

• Color Names: red, blue, green, coral, etc.
• HEX Codes: #FF5733, #00BFFF, etc.
• RGB Values: rgb(255, 87, 51)

🎨 Key Features Explained

Automatic Text Color Adjustment

The app uses a luminance calculation algorithm to determine whether the selected background is light or dark, then automatically adjusts:

• Text colors (heading and paragraph)
• Input field styling
• Container transparency and shadows

This ensures text remains readable on any background color.

Smooth Transitions

All color changes include smooth CSS transitions for a polished user experience:

• Background color transitions: 0.5s
• Text color transitions: Built into style updates
• Hover effects on interactive elements

🔧 Customization

Change Default Color

In script.js, modify the initialColor value:

const initialColor = '#667eea'; // Change this to your preferred default color

Adjust Animation Speed

In style.css, modify transition durations:

transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);

Customize Container Styling

Update the .container class in style.css to change the card appearance.

🌐 Browser Compatibility

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)
• ✅ Opera (latest)

📱 Responsive Breakpoints

• Desktop: Full-size container with large color picker
• Mobile (< 600px): Adjusted padding and smaller color picker

🐛 Known Issues

None at the moment! If you find any bugs, please report them.

🤝 Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📝 Future Enhancements

• Color palette history (save favorite colors)
• Export color codes in different formats (RGB, HSL, CMYK)
• Gradient background support
• Share color schemes via URL
• Color accessibility contrast checker
• Dark mode toggle

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

Created with ❤️ by Akash

🙏 Acknowledgments

• Font Awesome for the icon library
• Google Fonts for the Poppins typeface
• Inspiration from modern UI/UX design trends

---

Enjoy creating beautiful color schemes! 🎨✨