HTML Color Picker with <input type="color">

Use the native HTML <input type="color"> control to choose a color. This demo lets you set the preview background and text color and copy the resulting hexadecimal values.

Color input markup Top ↑

<label for="brandColor">Brand color</label>
<input type="color" id="brandColor" value="#336699">

Read the selected value Top ↑

const picker = document.getElementById('brandColor');
picker.addEventListener('input', () => console.log(picker.value));

HTML color chart Hex color values

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: