Javascript Color Picker Library is a modern, SVG-based color picker widget for vanilla JavaScript. Work with colors in hex, RGB, HSV, and HSL formats in one simple, frictionless API.
iro.js is a smooth, HSV coloration based mostly JavaScript coloration picker for producing a fairly, HTML5 canvas
based mostly on shade wheel UI with contact assist.
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);
See Demo And Download
Official Website(jaames): Click Here
This superior jQuery/javascript plugin is developed by jaames. For extra Advanced usage, please go to the official website.