What it does
iro.js assembles a web colour picker from configurable controls and is free under MPL 2.0. One picker can hold multiple colours and expose HEX, RGB, HSL, HSV or Kelvin values to the surrounding application.
Create a container, set the picker’s width and starting colours, then choose its layout. Updating a colour object changes the controls too, so a text field or application state can stay connected to the visual selection.
Choose events according to the operation. color:change runs for user input and programmatic updates; input:change runs only for mouse or touch changes. This distinction helps separate a user gesture from a value restored by the application. The guide defines channel ranges, including alpha from zero to one and Kelvin values from 1,000 to 40,000.
The single script includes its styling and needs no external images or libraries. MPL 2.0 permits free use in personal and commercial projects under its terms.
Strengths
- Multiple colours can share a configurable picker.
- User-only events are distinct from general colour changes.
- No separate stylesheet or image package is required.
Watch out for
- Applications must respect the documented component ranges.
Best for
- Building theme or RGB-lighting controls in a web application
Sources
- iro.js features and MPL 2.0 access (Oct 27, 2026)
- iro.js setup, values and event guide (Oct 27, 2026)