Color Picker
Sync a native color input with a text field and apply the selected color to a preview element in real time.
jQuery
Beginner
3 min read
Color Picker Integration
Example
const $picker = $("#color-picker");
const $hex = $("#color-hex");
const $preview= $("#color-preview");
$picker.on("input change", function() {
const val = this.value;
$hex.val(val);
$preview.css("background-color", val);
});
$hex.on("input", function() {
const val = this.value;
if (/^#[0-9a-f]{6}$/i.test(val)) {
$picker.val(val);
$preview.css("background-color", val);
}
}); Pro Tip
The native color input is well-supported — avoid a library just for basic color picking.