Add the following code to your page before the closing <body> tag.
I recommend copying the code on the published site to preserve line breaks.
<!--🟢 COLOR PICKER CODE 🟢-->
<script src="https://cdn.jsdelivr.net/npm/@jaames/iro/dist/iro.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.color-picker-element').forEach(pickerElement => {
var msColorPicker = pickerElement.querySelector('.ms-colorpicker');
var colorPicker = new iro.ColorPicker(msColorPicker, {
width: 180,
color: "rgb(255, 0, 0)",
borderWidth: 5,
borderColor: "#f5f5f5",
});
var values = pickerElement.querySelector('.values');
var hexInput = pickerElement.querySelector('.hex-input');
var swatch = pickerElement.querySelector('.color-swatch');
colorPicker.on(["color:init", "color:change"], function(color){
// Show the current color in different formats
// Using the selected color: https://iro.js.org/guide.html#selected-color-api
values.innerHTML = [
"hex: " + color.hexString,
"rgb: " + color.rgbString,
"hsl: " + color.hslString,
].join("<br>"); hexInput.value = color.hexString;
swatch.style.backgroundColor = color.hexString;
}); hexInput.addEventListener('change', function() {
colorPicker.color.hexString = this.value;
swatch.style.backgroundColor = this.value;
});
});
});
</script>
Also! You might want to checkout this community discussion on saving the color inputs to Memberstack.
Iro.js is color picker widget for JavaScript with a modern SVG-based user interface. No jQuery or extra CSS / images.
Head to iro.js.org for full documentation and features, or check out the source code on GitHub!
I discovered this package thanks for James Daniel on Codepen.