Iro.js
🎨 Modular color picker widget for JavaScript, with support for a bunch of color formats
Install / Use
/learn @jaames/Iro.jsREADME
<h1 align="center"><a href="//iro.js.org" target="blank"><img height="340" src="https://raw.githubusercontent.com/jaames/iro.js/master/assets/screenshot.png"/><br/>iro.js</a></h1>
<p align="center">
<b>Modular, design-conscious color picker widget for JavaScript - with support for a bunch of color formats | <a href="//iro.js.org" target="blank">iro.js.org</a></b>
</p>
<p align="center">
<a href="https://github.com/jaames/iro.js/blob/master/LICENSE.txt">
<img src="https://badgen.net/github/license/jaames/iro.js?color=BB5FD1" alt="license" />
</a>
<a href="https://npmjs.org/package/@jaames/iro">
<img src="https://badgen.net/npm/v/@jaames/iro?color=6C8FF2" alt="version" />
</a>
<a href="https://npmjs.org/package/@jaames/iro">
<img src="https://badgen.net/npm/dt/@jaames/iro?color=6AD4E0" alt="downloads" />
</a>
<a href="https://bundlephobia.com/result?p=@jaames/iro">
<img src="https://badgen.net/bundlephobia/minzip/@jaames/iro?color=6FDF89" alt="minzip size" />
</a>
<a href="">
<img src="https://badgen.net/badge/jQuery/none/F8AE55" alt="no jQuery" />
</a>
</p>
<p align="center">
<a href="#features">Features</a> | <a href="#codepen-demos">Demo</a> | <a href="#installation">Installation</a> | <a href="#usage">Usage</a> | <a href="https://iro.js.org/guide.html">Documentation</a> | <a href="#special-thanks">Special Thanks</a> | <a href="https://github.com/jaames/iro.js/discussions">Forum</a>
</p>
<br/>
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
<img height="16" height="888" src="https://raw.githubusercontent.com/jaames/iro.js/master/assets/break.png"/>Installation
Install with NPM
<!-- MARKDOWN-AUTO-DOCS:START (CODE:src=./examples/readme/install.sh) --> <!-- The below code snippet is automatically added from ./examples/readme/install.sh -->npm install @jaames/iro --save
If you are using a module bundler like Webpack or Rollup, import iro.js into your project:
<!-- MARKDOWN-AUTO-DOCS:START (CODE:src=./examples/readme/install.js) --> <!-- The below code snippet is automatically added from ./examples/readme/install.js -->// Using ES6 module syntax
import iro from '@jaames/iro';
// Using CommonJS modules
const iro = require('@jaames/iro');
Using the jsDelivr CDN
<!-- MARKDOWN-AUTO-DOCS:START (CODE:src=./examples/readme/install.html) --> <!-- The below code snippet is automatically added from ./examples/readme/install.html --><script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
When you manually include the library like this, iro.js will be made globally available on window.iro.
Download and host yourself
Development version<br/> Uncompressed, with source comments included. Intended for debugging.
Production version<br/> Minified and optimized version.
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>
Usage
Getting Started
First, we need a HTML element with a unique identifier (like an id attribute) to act as a container for the color picker:
<div id="picker"></div>
Then use JavaScript to create a new iro.ColorPicker with a CSS selector that matches your container element:
var colorPicker = new iro.ColorPicker('#picker');
You can also use a DOM object instead of a CSS selector here -- this might be more suitable if you're integrating iro.js into an application built with a framework such as Vue, React, etc.
<img height="16" height="888" src="https://raw.githubusercontent.com/jaames/iro.js/master/assets/break.png"/>Color Picker Options
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 Options
<!-- MARKDOWN-AUTO-DOCS:START (JSON_TO_HTML_TABLE:src=./examples/readme/availableOptions.json) --> <table class="JSON-TO-HTML-TABLE"><thead><tr><th class="option-th">Option</th><th class="purpose-th">Purpose</th><th class="default-value-th">Default Value</th></tr></thead><tbody ><tr ><td class="option-td td_text"><code>width</code></td><td class="purpose-td td_text">Total width of the control UI.</td><td class="default-value-td td_text"><code>300</code></td></tr> <tr ><td class="option-td td_text"><code>color</code></td><td class="purpose-td td_text">The initial color value. This can be any [supported color format](https://iro.js.org/color_api.html#supported-color-formats).</td><td class="default-value-td td_text"><code>#ffffff</code></td></tr> <tr ><td class="option-td td_text"><code>colors</code></td><td class="purpose-td td_text">Initial color values used for [multi-color selections](https://iro.js.org/advanced.html#multi-color-selections).</td><td class="default-value-td td_text">null</td></tr> <tr ><td class="option-td td_text"><code>display</code></td><td class="purpose-td td_text">CSS display value for the color picker root element.</td><td class="default-value-td td_text"><code>block</code></td></tr> <tr ><td class="option-td td_text"><code>id</code></td><td class="purpose-td td_text">HTML ID for the color picker root element.</td><td class="default-value-td td_text"><code>null</code></td></tr> <tr ><td class="option-td td_text"><code>layout</code></td><td class="purpose-td td_text">Used for customising the [UI component layout](https://iro.js.org/advanced.html#custom-ui-layouts).</td><td class="default-value-td td_text"><code>null</code></td></tr> <tr ><td class="option-td td_text"><code>layoutDirection</code></td><td class="purpose-td td_text">UI component stacking direction; either <code>vertical</code> or <code>horizontal</code>.</td><td class="default-value-td td_text"><code>vertical</code></td></tr> <tr ><td class="option-td td_text"><code>padding</code></td><td class="purpose-td td_text">Padding around the control handles.</td><td class="default-value-td td_text"><code>6</code></td></tr> <tr ><td class="option-td td_text"><code>margin</code></td><td class="purpose-td td_text">Gap between individual components.</td><td class="default-value-td td_text"><code>12</code></td></tr> <tr ><td class="option-td td_text"><code>borderWidth</code></td><td class="purpose-td td_text">Width of the border around the controls. Set to <code>0</code> for no border.</td><td class="default-value-td td_text"><code>0</code></td></tr> <tr ><td class="option-td td_text"><code>borderColor</code></td><td class="purpose-td td_text">Color of the border. Any valid CSS color is supported.</td><td class="default-value-td td_text"><code>#ffffff</code></td></tr> <tr ><td class="option-td td_text"><code>handleRadius</code></td><td class="purpose-td td_text">Radius of the control handles.</td><td class="default-value-td td_text"><code>8</code></td></tr> <tr ><td class="option-td td_text"><code>handleSvg</code></td><td class="purpose-td td_text">Custom handle SVG, used for [custom handles](https://iro.js.org/advanced.html#custom-handles).</td><td class="default-value-td td_text"><code>null</code></td></tr> <tr ><td class="option-td td_text"><code>handleProps</code></td><td class="purpose-td td_text">Custom handle properties, used for [custom handles](https://iro.js.org/advanced.html#custom-handles).</td><td class="default-value-td td_text"><code>{x:0, y:0}</code></td></tr> <tr ><td class="option-td td_text"><code>wheelLightness</code></td><td class="purpose-td td_text">If set to <code>false</code>, the color wheel will not fade to black when the lightness decreases.</td><td class="default-value-td td_text"><code>true</code></td></tr> <tr ><td class="option-td td_text"><code>wheelAngle</code></td><td class="purpose-td td_text">Starting angle of the color wheel's hue gradient, measured in degrees.</td><td class="default-value-td td_text"><code>0</code></td></tr> <tr ><td class="option-td td_text"><code>wheelDirection</code></td><td class="purpose-td td_text">Direction of the color wheel's hue gradient; either <code>clockwise</code> or <code>anticlockwise</code>.</td><td class="default-value-td td_text"><code>anticlockwise</code></Related Skills
openhue
336.9kControl Philips Hue lights and scenes via the OpenHue CLI.
sag
336.9kElevenLabs text-to-speech with mac-style say UX.
weather
336.9kGet current weather and forecasts via wttr.in or Open-Meteo
tweakcc
1.4kCustomize Claude Code's system prompts, create custom toolsets, input pattern highlighters, themes/thinking verbs/spinners, customize input box & user message styling, support AGENTS.md, unlock private/unreleased features, and much more. Supports both native/npm installs on all platforms.
