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 `
` that shows the selected color
- Three range `` sliders — one each for Red, Green, and Blue (0-255)
- Labels showing each slider's current value
- A `
` 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