<html>
  <head>
  </head>
  <body>
    <div class="wrap">
      <div class="half">
        <div class="colorPicker"></div>
      </div>
      <div class="half">
        <span>Colors:</span>
        <ul id="colorList"></ul>
        <span>Active Color:</span>
        <div id="activeColor"></div>
      </div>
    </div>
  </body>
</html>
body {
  color: #fff;
  background: #171F30;
  line-height: 150%;
}

.wrapper svg {
}

.wrap {
  min-height: 100vh;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  
  .half {
    width: 50%;
    padding: 32px 0;
  }
}

.title {
  font-family: sans-serif;
  line-height: 24px;
  display: block;
  padding: 8px 0;
}

.swatch {
  height: 32px;
  margin: 4px 0;
  border-radius: 4px;
}

#colorList {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-bottom: 12px;
  display: flex;
  
  .swatch {
    border-radius: 0;
  }
  
  li {
    flex: 1;
  }
  
  li:first-child {
    .swatch{
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
  }
  
  li:last-child {
    .swatch{
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }
}

#activeColor .swatch {
  width: 120px;
}

.readout {
  margin-top: 32px;
  line-height: 180%;
}

#values {
 font-family: monospace;
  line-height: 150%;
}

.link {
  margin-top: 16px;
  
  a {
    color: MediumSlateBlue;
  }
}
View Compiled 
// Create a new color picker instance
// https://iro.js.org/guide.html#getting-started
const colorPicker = new iro.ColorPicker(".colorPicker", {
  // color picker options
  // Option guide: https://iro.js.org/guide.html#color-picker-options
  width: 260,
  // Pure red, green and blue
  colors: [
    "rgb(255, 0, 0)",
    "rgb(0, 255, 0)",
    "rgb(0, 0, 255)",
  ],
  handleRadius: 9,
  borderWidth: 1,
  borderColor: "#fff",
});

const colorList = document.getElementById("colorList");
const activeColor = document.getElementById("activeColor");

function setColor(colorIndex) {
  // setActiveColor expects the color index!
  colorPicker.setActiveColor(colorIndex);
}

// https://iro.js.org/guide.html#color-picker-events
colorPicker.on(["mount", "color:change"], function(){
  colorList.innerHTML = '';
  colorPicker.colors.forEach(color => {
    const index = color.index;
    const hexString = color.hexString;
    colorList.innerHTML += `
      <li onClick="setColor(${ index })">
        <div class="swatch" style="background: ${ hexString }"></div>
        <span>${ index }: ${ hexString }</span>
      </li>
    `;
  });
});

colorPicker.on(["mount", "color:setActive", "color:change"], function(){
  // colorPicker.color is always the active color
  const index = colorPicker.color.index;
  const hexString = colorPicker.color.hexString;
  activeColor.innerHTML = `
    <div class="swatch" style="background: ${ hexString }"></div>
    <span>${ index }: ${ hexString }</span>
  `;
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/npm/@jaames/iro@beta/dist/iro.min.js