Color Code Generator

This color code generator offers the following features:

Dual Color Selection Methods:
- Visual color picker (accessed by clicking the color preview box)
- Manual HEX code input field
Real-time Color Display:
- Large preview area showing the selected color
- Small preview box in the input section
Multiple Color Formats:
- HEX color code (e.g., #FF0000)
- RGB color code (e.g., rgb(255, 0, 0))
Copy Functionality:
- One-click copy buttons for each format
- Visual feedback when copied (notification popup)
Responsive Design:
- Works on desktop and mobile devices
- Clean, modern interface
Input Validation:
- Automatically validates HEX color inputs
- Supports both 3-digit and 6-digit HEX codes

How to Use

Using the Color Picker:
- Click on the colored preview box (initially red)
- A native color picker dialog will appear
- Select your desired color and click “OK”
Using HEX Input:
- Type directly into the HEX input field
- Enter either:
  - 6-digit HEX (e.g., “#FF5733”)
  - 3-digit HEX (e.g., “#F53”) which will auto-expand to 6 digits
- The color will update automatically when you enter a valid code

Copying HEX Code:
- The current HEX code is displayed in the HEX section
- Click the “Copy” button next to it
- A notification will confirm the code was copied
Copying RGB Code:
- The RGB equivalent is automatically calculated
- Click the “Copy” button in the RGB section
- A notification will confirm the code was copied