The Custom Color Picker is a simple and interactive web application built using HTML, CSS, and JavaScript. This project allows users to select and customize colors dynamically, making it perfect for learning and experimenting with front-end development concepts.
Features:
- Interactive Color Selection: Users can use input sliders or a color picker to adjust values for RGB, HEX, or HSL formats.
- Real-Time Background Update: The selected color is instantly applied to a preview section or the webpage background.
- Copy Color Code: Users can copy the generated color codes for use in other applications.
- Reset Functionality: A button to reset the color settings to default values
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Custom Color Picker</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #fff; font-family: Arial, sans-serif; } .picker-container { text-align: center; } .color-box { width: 200px; height: 200px; margin: 1rem auto; border: 1px solid #000; background-color: #ff0000; } .color-input { margin-top: 1rem; padding: 0.5rem; font-size: 1rem; } </style> </head> <body> <div class="picker-container"> <div class="color-box" id="colorBox"></div> <input type="color" id="colorPicker" class="color-input"> </div> <script> const colorBox = document.getElementById("colorBox"); const colorPicker = document.getElementById("colorPicker"); // Change the color of the box based on the color picker colorPicker.addEventListener("input", (event) => { colorBox.style.backgroundColor = event.target.value; }); </script> </body> </html>