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>
// Create a new color picker instance
// https://iro.js.org/guide.html#getting-started
var colorPicker = new iro.ColorPicker(".ms-colorpicker", {
// color picker options
// Option guide: https://iro.js.org/guide.html#color-picker-options
width: 180,
color: "rgb(255, 0, 0)",
borderWidth: 5,
borderColor: "#f5f5f5",
}); var values = document.getElementById("values");
var hexInput = document.getElementById("hexInput");
var swatch = document.getElementById("colorSwatch"); // https://iro.js.org/guide.html#color-picker-events
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.