Modern SVG-Based Color Picker Vanilla JavaScript | iro.js

Also gives API strategies that mean you can set, replace, and convert between colors.

Features

• Work with colors in hex, RGB, HSV, and HSL formats (plus Kelvin temperatures!) in one simple, frictionless API.
• Add multiple colors to the same color picker to select color harmony and themes.
• Create the perfect color picker from a selection of ready-made UI components.
• All iro.js files can be run from a single script – no additional CSS, images, or third-party libraries are required!
• ~ 9KB minified and compressed.
• Licensed under MPL 2.0 – 100% free for personal and commercial use.

Must Read: Highlight Colors Min/Max Values For The HTML Table | tableMinMax

How to make use of it:

Installation:

# NPM
$ npm install @jaames/iro --save

Import the iro.js as an ES module.

import iro from "@jaames/iro";

Or add the core JavaScript library to the HTML web page.

<!-- From dist folder -->
<script src="dist/iro.js"></script>
<!-- Or from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/@jaames/iro"></script>

Create a placeholder component for the color picker.

<div class="wheel" id="colorWheelDemo"></div>

Generate a primary coloration picker contained in the container ‘colorWheelDemo’.

var colorWheel = new iro.ColorPicker("#colorWheelDemo", 
    // options here
);

Customize the format of the color picker. It at present comes with 3 layouts.

var colorWheel = new iro.ColorPicker("#colorWheelDemo", {

    layout: [
    { 
      component: iro.ui.Wheel,
      options: {
        wheelLightness: true,
        wheelAngle: 0,
        wheelDirection: "anticlockwise"
      } 
    },
    {
      component: iro.ui.Box,
      options: {
        // see below
      }
    },
    {
      component: iro.ui.Slider,
      options: {
        sliderType: 'hue' // can also be 'saturation', 'value', 'alpha' or 'kelvin',
        sliderShape: 'circle',
        activeIndex: 2
      }
    }
    ]
  
});

Possible options to customize your coloration picker.

var colorWheel = new iro.ColorPicker("#colorWheelDemo", {

    // width of the color picker
    width: 300,

    // initial coloration
    color: '#fff',

    // initial colours used for multi-color alternatives.
    colors: null,

    // CSS show value
    display: 'block', 

    // distinctive id of the colour picker
    id: null,

    // customized the format
    layout: null,

    // or 'horizontal'
    layoutDirection: "vertical",

    // border width
    borderWidth: 0,

    // border color
    borderColor: '#fff',

    // space between handles
    padding: 4,

    // radius of handles
    handleRadius: 8,

    // Custom handle SVG
    handleSvg: null,

    // customized handle props
    handleProps: {
      x: 0,
      y: 0
    },

    // fade to black when the lightness decreases
    wheelLightness: true,

    // beginning angle 
    wheelAngle: 0, 

    // clockwise/anticlockwise
    wheelDirection: 'anticlockwise', 

    // slider size
    sliderSize: undefined,

    // distance between the wheel and the slider controls
    sliderMargin: 12
  
});

Get & set the color in a given format. Supported coloration codecs.

// get
var myColor = colorWheel.color.COLORFORMAT;
console.log(myColor);

// set
colorWheel.color.COLORFORMAT = STRING OR OBJECT

Event handlers are available.

colorWheel.on('color:change', function(color, changes))

colorWheel.on('color:init', function(color))

colorWheel.on('color:remove', function(color)
  // when a color is removed from the color picker
)

colorWheel.on('input:change', function(color, changes)
  // Similar to paint:change, besides that is only fired each time the colour is modified with direct consumer enter. 
)

colorWheel.on('input:start', function(color)
  // when the consumer begins interacting with the colour picker, the callback will get handed the colour object
)

colorWheel.on('input:move', function(color)
  // when the consumer strikes their pointer/mouse after starting interplay
)

colorWheel.on('input:end', function(color))

colorWheel.on('mount', function(color))

Color picker strategies.

// provides shade
colorWheel.addColor(IroColorValue, colorIndex(optional));

// removes shade
colourWheel.removeColor(colorIndex);

// units energetic color
colorWheel.setActiveColor(colorIndex);

// sets color
colorWheel.setColors([]);

// resizes the colour picker to a brand new size
colorationWheel.resize(width);

// resets the colour picker
colorWheel.reset();

// updates the colour picker
colorWheel.forceUpdat();

Color strategies.

// sets color
myColor.set(color);

// sets color chanel
// myColor.setChannel(format, channel, value);
myColor.setChannel('rgb', 'r', 255);

// clones color
myColor.clone(color);

// resets color
myColor.reset();

// converts HSV to RGB
myColor.hsvToRgb(HSV);

// converts RGB to HSV
myColor.rgbToHsv(RGB);

// converts HSV to HSL
myColor.hsvToHsl(HSV);

// converts HSL to HSV
myColor.hslToHsv(HSL);

// converts kelvin temperature to RGB
myColor.kelvinToRgb(kelvin temperature);

// converts RGB to kelvin temperature
myColor.kelvinToRgb(RGB);