Iro.js

Modular color picker widget for JavaScript, with support for a bunch of col...

ColorsSVG
jaames/iro.jsiro.js.org@jaames/iro

README


iro.js

Modular, design-conscious color picker widget for JavaScript - with support for a bunch of color formats | iro.js.org

license version downloads minzip size no jQuery

Features | Demo | Installation | Usage | Documentation | Special Thanks | Forum




NOTE: this project is currently on hiatus until further notice, as working on open source projects is becoming unsustainable for the maintainer.



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 for selecting color harmonies and themes
Create the perfect color picker from a selection of pre-built UI components
All of iro.js can run from a single script - no extra CSS, images, or third-party libraries required!
~9kb minified and gzipped
Licenced under MPL 2.0 - 100% free for personal and commercial use


Codepen Demos


Basic introduction
Multicolor
Components / alternate layouts
Custom handle SVGs


Installation


Install with NPM




  1. ```sh
  2. npm install @jaames/iro --save
  3. ```


If you are using a module bundler like Webpack or Rollup, import iro.js into your project:


  1. ``` js
  2. // Using ES6 module syntax
  3. import iro from '@jaames/iro';

  5. // Using CommonJS modules
  6. const iro = require('@jaames/iro');
  7. ```


Using the jsDelivr CDN




  1. ``` html
  2. <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
  3. ```


When you manually include the library like this, iro.js will be made globally available on window.iro.

Download and host yourself


**[Development version](https://raw.githubusercontent.com/jaames/iro.js/master/dist/iro.js)**
Uncompressed, with source comments included. Intended for debugging.

**[Production version](https://raw.githubusercontent.com/jaames/iro.js/master/dist/iro.min.js)**
Minified and optimized version.

Then add it to the `` of your page with a `