Web Basics
Color Picker & Palette
Pick a color, get its codes and shades, copy any of them with a click.
Choose a color and instantly see its HEX and RGB, a set of generated shades, and a big preview. Click any value to copy it. You'll learn the color input and the clipboard API.
What's inside
- Native color input with live HEX and RGB
- Auto-generated shades and tints
- Click-to-copy via the Clipboard API
- A hex ↔ rgb converter you can reuse
- Light & dark mode, no dependencies
Quickstart
$ curl -LO https://devai.io/downloads/color-picker.zip$ unzip color-picker.zip && cd color-picker$ open index.html # or just double-click the file
about this tutorial
A devai.io starter tutorial — reading a color input and copying text to the clipboard.
More in Web Basics
view allWeb Basics
Tip Calculator
Your first interactive page: type a bill, see the tip update live.
HTMLCSSJavaScript
View template zip + preview
Web Basics
To-Do List
Keep a list, tick things off, and have it still be there after a refresh.
HTMLCSSJavaScriptlocalStorage
View template zip + preview
Web Basics
Countdown Timer
Count down to any moment — days, hours, minutes, seconds, ticking live.
HTMLCSSJavaScriptDates
View template zip + preview