Codelab: Color Picker
Build a visual color picker with RGB sliders, live preview, hex code display, and a copy-to-clipboard feature — all with vanilla JavaScript.
Step 1 of 7
Step 1: Create the HTML structure
Let's build a color picker! Create a new project folder with three files.
```
mkdir color-picker
cd color-picker
touch index.html style.css app.js
```
Our HTML needs:
- A large color preview `<div>` that shows the selected color
- Three range `<input>` sliders — one each for Red, Green, and Blue (0-255)
- Labels showing each slider's current value
- A `<p>` to display the hex color code
- A 'Copy' button to copy the hex code to the clipboard
Open `index.html` and add the structure shown below. Then open it in your browser to see the layout.
HTMLREAD ONLY