A simple and intuitive color picker extension that allows users to select colors, preview them, and automatically copy the selected color code to the clipboard. This project is built with HTML, CSS, and JavaScript.
- Color Selection: Users can select a color using a color input or a custom color picker.
- Live Preview: The selected color is displayed in a preview box.
- Clipboard Copy: The selected color code is automatically copied to the clipboard with a notification.
- Responsive Design: The extension is designed to be responsive and works well on different screen sizes.
- HTML5 - For the structure of the extension.
- CSS3 - For styling and layout.
- JavaScript - For the dynamic functionality, including color selection, preview, and clipboard copy.
- Google Fonts - For custom typography.
- A web browser that supports HTML5, CSS3, and JavaScript.
- A code editor like VSCode if you want to modify the code.
- Clone this repository:
git clone https://github.com/ramansingh-dev0/color-picker-extension.git
- Navigate to the project directory:
cd color-picker-extension - Open the
index.htmlfile in your preferred web browser to see the extension in action.
- Click on the color input to open the color picker.
- Select a color, and the preview box will update to show the selected color.
- The selected color code will be displayed and automatically copied to your clipboard.
- A pop-up message will confirm that the color code has been copied.
color-picker-extension/
│
├── index.html # Main HTML file
├── style.css # CSS file for styling
└── popup.js # JavaScript file for functionality
└── manifest.json # json file for extension