Webflow Color Picker Dropdown

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.

Clone the Complete UI Kit 👇

Everything below is an iframe. Click "Clone in Webflow" to get yourself a copy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.