HTML: Color Picker

By Xah Lee. Date: . Last updated: .

Color Picker Example

Value is:

Code

<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();

HTML Input tutorial