all templates
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

Browse the code

The full source, exactly as the zip ships it.

loading…
Download .zip
loading tree…

about this tutorial

A devai.io starter tutorial — reading a color input and copying text to the clipboard.