Iro.js HSV color picker widget

• Simple: Low friction API, with robust support for hex, rgb, hsl and hsv color formats.
• Extendable: Tweak the library to your requirements with Plugins and custom UI elements
• Consistent behaviour: Works across all modern browsers and devices, including touchscreens.
• Small footprint: 7kb minified and gzipped, with absolutely no jQuery or extra css/images in sight.
• Great design: The controls are designed to be intuitive and responsive, plus they’re built with SVG so they look super crisp at any resolution.
• Transparency support: Optional transparency slider with the transparency plugin.

Source: iro.js.org

1. INCLUDE JS FILE

<script src="https://cdn.jsdelivr.net/npm/@jaames/iro/dist/iro.min.js"></script>

2. HTML

<div id="color-picker-container"></div>

3. JAVASCRIPT

var colorPicker = new iro.ColorPicker('#color-picker-container');

4. Color Picker Options

The color picker can be configured by passing a set of options to the second iro.ColorPicker parameter:

var colorPicker = new iro.ColorPicker("#color-picker-container", {
  // Set the size of the color picker
  width: 320,
  // Set the initial color to pure red
  color: "#f00"
});

Available Options

More documents at https://iro.js.org/guide.html