A simple and responsive Color Picker application that generates random colors, displays the corresponding hex code, and allows users to copy the code with a single click. A "Copied!" message appears temporarily when a color code is successfully copied.
This project is live and accessible online. You can try it out here: Color Picker
- Random Color Generation: Generates random colors with a single click.
- Hex Code Display: Displays the generated color's hex code in real-time.
- Copy to Clipboard: Easily copies the hex code to the clipboard by clicking the copy icon.
- Visual Feedback: Shows a "Copied!" message above the copy icon for 1 second after successfully copying.
- Responsive Design: Works seamlessly across different devices and screen sizes.
- HTML5: Structuring the UI.
- CSS3: Styling and animations.
- JavaScript: Functionality and interactivity.
- Font Awesome: For the copy icon.
-
Generate Color:
- Click the "Generate Color" button to generate a random color.
- The background color of the page changes to the generated color.
- The corresponding hex code is displayed and styled with the generated color.
-
Copy Hex Code:
- Click on the copy icon to copy the hex code to the clipboard.
- A "Copied!" message appears above the copy icon for 1 second.
-
Visual Feedback:
- The "Copied!" message fades in and out smoothly to inform users of successful copy operations.
follow these steps to run the project locally:
-
Clone the repository:
git clone https://github.com/shivlalsharma/color-picker.git cd color-picker -
Open the
index.htmlfile in your browser.Alternatively, you can set up a local server (e.g., using VS Code Live Server) to view the project in your browser.
This project is licensed under the MIT License - see the LICENSE file for details.
Created and deployed by Shivlal Sharma.
- GitHub: Shivlal Sharma's GitHub
- LinkedIn: Shivlal Sharma's LinkedIn