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

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.

Work with colors

Each color picker contains a color object that stores the currently selected color. This color object is bound to the color picker, so any changes to its values will be reflected by the picker, and vice versa.

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

Color-Picker-Vanilla-JavaScript

How to make use of it:

Installation:

npm install @jaames/iro --save

1. If you are using a modular compiler like Webpack or Rollup, import iro.js into your project:
2. using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/@jaames/[email protected]"></script>

3. Then add it to the <head> of your page with a <script> tag:

<html>
  <head>
    <!-- ... -->
    <script src="./path/to/iro.min.js"></script>
  </head>
  <!-- ... -->
</html>

4. First, we need an HTML element with a unique identifier (such as the id attribute) to act as a container for the color picker:

<div id="picker"></div>

5. Then use JavaScript to create a new iro.ColorPicker one with a CSS selector that matches your container element:

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

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

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

Available Events

color:change

Fired whenever the selected color changes — either when the user interacts with the color picker, or when the color is updated by your own code.

Must Read: Random Color Picker Generator Made With jQuery and SCSS

input:change

Similar to color:change, except this event is only fired when the color is changed with the user’s mouse or touch input.

Callbacks for this event receive the same values as color:change, and it is also safe to modify the color object within callbacks for this event.

input:start

Fired whenever the users start interacting with the color picker controls. The currently selected color is passed to this event’s callback function.

input:move

Fired when the user moves their pointer/mouse after beginning interaction. The currently selected color is passed to this event’s callback function.

input:end

Fired whenever the user stops interacting with the color picker controls. The currently selected color is passed to this event’s callback function.

color:init

Fired whenever a color is added. This event’s callbacks will receive the newly added color object.

color:remove

Fired when color is removed from the color picker. This event’s callbacks will receive the removed color object.

color:setActive

Fired whenever the ‘active’ color is switched. This event’s callbacks will receive the active color object.

mount

Fired when the colorPicker’s UI has been mounted to the DOM and is ready for user interaction. The colorPicker object is passed to this event’s callback function.

Available Options

Must Read: Vanilla Javascript HSLA Color Picker With Interactive Sliders

OptionPurposeDefault Value
widthTotal width of the control UI.300
colorThe initial color value. This can be any [supported color format](https://iro.js.org/color_api.html#supported-color-formats).#ffffff
colorsUsed for customizing the [UI component layout](https://iro.js.org/advanced.html#custom-ui-layouts).null
displayCSS display value for the color picker root element.block
idHTML ID for the color picker root element.null
layoutUsed for customizing the [UI component layout](https://iro.js.org/advanced.html#custom-ui-layouts).null
layoutDirectionUI component stacking direction; either vertical or horizontal.vertical
paddingPadding around the control handles.6
marginThe gap between individual components.12
borderWidthWidth of the border around the controls. Set to 0 for no border.0
borderColorColor of the border. Any valid CSS color is supported.#ffffff
handleRadiusThe radius of the control handles.8
handleSvgCustom handle SVG, used for [custom handles](https://iro.js.org/advanced.html#custom-handles).null
handlePropsCustom handle properties, used for [custom handles](https://iro.js.org/advanced.html#custom-handles).{x:0, y:0}
wheelLightnessIf set to false, the color wheel will not fade to black when the lightness decreases.true
wheelAngleStarting angle of the color wheel’s hue gradient, measured in degrees.0
wheelDirectionThe direction of the color wheel’s hue gradient; either clockwise or anticlockwise.anticlockwise
sliderSizeSlider control size. By default, this will be calculated automatically.undefined
boxHeightBox control height. By default, this will be the same as the width.undefined

Color Properties

Must Read: Flexible and Minimalistic Radial Color Picker For Vue.js

PropertyExample Format
hexString#ff0000
hex8String#ff0000ff
rgb{ r: 255, g: 0, b: 0 }
rgba{ r: 255, g: 0, b: 0, a: 1 }
rgbStringrgb(255, 0, 0)
rgbaStringrgb(255, 0, 0, 1)
hsl{ h: 360, s: 100, l: 50 }
hsla{ h: 360, s: 100, l: 50, a: 1 }
hslStringhsl(360, 100%, 50%)
hslaStringhsla(360, 100%, 50%, 1)
hsv{ h: 360, s: 100, v: 100 }
hsva{ h: 360, s: 100, v: 100, a: 1 }
red0 to 255
green0 to 255
blue0 to 255
alpha0 to 1
hue0 to 360
saturation0 to 100
value0 to 100
kelvin1000 to 40000

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.

Related Posts

svg-pan-zoom-container

Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…

html-table-sortable-js

Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…

WYSIWYG-Rich-Text-Editor

WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…

email-domain-autocomplete-genie

[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…

JavaScript-Library-for-Creating-Squircley-Magic

[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from https://squircley.app wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…