HTML: Color Picker

By Xah Lee. Date: . Last updated: .

Here's how to create a HTML color picker input.

Value is:

<label for="colorPicker1">Color:</label>
<input id="colorPicker1" type="color" value="#ff0000" />

Value is:
<span id="displayBox1"></span>
const colorPicker1 = document. getElementById('colorPicker1');
const displayBox1 = document. getElementById('displayBox1');

const f_update = (() => { displayBox1.textContent = colorPicker1.value; });

colorPicker1.addEventListener ('input', f_update, false);


DOM How-To

Web Scripting Overview

HTML Input

Web Scripting Examples

Web Scripting Misc



Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials