Skip to content
Transparency support for iro.js
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets add screenshot to readme Mar 7, 2019


Adds comprehensive transparency support to iro.js

license version downloads minzip size donate

Features | Installation | Usage | Color API Extras


  • Color picker transparency slider
  • Extends iro.js color API to add support for hsva, hsla, rgba, hex8 and hex4 colors
  • 7kb minified, or less than 2kB minified + gzipped


Install with NPM

$ npm install iro-transparency-plugin --save

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

Using ES6 modules:

import iro from '@jaames/iro';
import iroTransparencyPlugin from 'iro-transparency-plugin';

Using CommonJS modules:

const iro = require('@jaames/iro');
const iroTransparencyPlugin = require('iro-transparency-plugin');

Download and host yourself

Development version
Uncompressed at around 20kB, with source comments included

Production version
Minified to 8kB

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

    <!-- ... -->
    <script src="./path/to/iro.min.js"></script>
    <script src="./path/to/iro-transparency-plugin.min.js"></script>
  <!-- ... -->

Using the jsDelivr CDN

<script src=""></script>


Register Plugin

After both iro.js and iro-transparency-plugin have been imported/downloaded, the plugin needs to be registered with iro.use:


ColorPicker Setup

The plugin adds a new transparency config option to iro.ColorPicker. If set to true, a transparency slider will be added to the color picker.

var colorPicker = new iro.ColorPicker({
  width: 320,
  color: {r: 255, g: 100, b: 100, a: 1},
  transparency: true

Color API Extras

There are also additional color properties for getting / setting the selected color from various color-with-alpha formats. Note that the alpha value should always be between 0 and 1 here.

All of these formats are also supported by the set method and the color picker's color option.

Property Example Format
alpha 0.5
hex8String "#ff0000ff"
rgba { r: 255, g: 0, b: 0, a: 0.5 }
rgbaString "rgba(255, 0, 0, 0.5)"
hsla { h: 360, s: 100, l: 50, a: 0.5 }
hslaString "hsla(360, 100%, 50%, 0.5)"
hsva { h: 360, s: 100, v: 100, a: 0.5 }

© James Daniel

You can’t perform that action at this time.