HTML: Color Picker

By Xah Lee. Date: . Last updated: .

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

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

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

const f_update = (() => { displayBoxX.textContent = colorPickerX.value; });

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

f_update();
βˆ‘ JS in Depth
XAH Β BUY NOW

JS in Depth

JS Obj Ref

DOM


DOM

Overview

Basic Examples

HTML Input

Web Scripting Examples

Web Scripting Misc

jQuery

node.js