Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/jaames/iro.js

🎨 Modular color picker widget for JavaScript, with support for a bunch of color formats
https://github.com/jaames/iro.js

color color-picker iro-js javascript no-jquery plugin svg ui widget

Last synced: 4 months ago
JSON representation

🎨 Modular color picker widget for JavaScript, with support for a bunch of color formats

Host: GitHub
URL: https://github.com/jaames/iro.js
Owner: jaames
License: mpl-2.0
Created: 2016-09-30T14:58:33.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2022-08-14T16:01:59.000Z (almost 2 years ago)
Last Synced: 2024-03-03T12:44:46.322Z (4 months ago)
Topics: color, color-picker, iro-js, javascript, no-jquery, plugin, svg, ui, widget
Language: JavaScript
Homepage: https://iro.js.org
Size: 7.08 MB
Stars: 1,258
Watchers: 14
Forks: 80
Open Issues: 13
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt

Lists

awesome-stars - jaames/iro.js - 🎨 Modular color picker widget for JavaScript, with support for a bunch of color formats (JavaScript)
my-awesome-list - iro.js
awesome-stars - iro.js - based user interface | jaames | 594 | (JavaScript)
awesome-stars - iro.js
awesome-stars - jaames/iro.js - 🎨 Modular color picker widget for JavaScript, with support for a bunch of color formats (JavaScript)

README

        

iro.js




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





  

    

  

  

    

  

  

    

  

  

    

  

  

    

  





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






---

> NOTE: this project is currently on **[hiatus](https://github.com/jaames/iro.js/issues/217#issuecomment-1214403290)** 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](https://bundlephobia.com/result?p=@jaames/iro) minified and gzipped

 * Licenced under MPL 2.0 - 100% free for personal and commercial use



## Codepen Demos

 * [Basic introduction](https://codepen.io/rakujira/pen/WZOeNq)

 * [Multicolor](https://codepen.io/rakujira/pen/bGddRyq)

 * [Components / alternate layouts](https://codepen.io/rakujira/pen/XWbgwYm)

 * [Custom handle SVGs](https://codepen.io/rakujira/pen/vbeENp)



## Installation

### Install with NPM

```sh

npm install @jaames/iro --save

```

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

```js

// Using ES6 module syntax

import iro from '@jaames/iro';

// Using CommonJS modules

const iro = require('@jaames/iro');

```

### Using the jsDelivr CDN

```html

```

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 `` tag:

```html

<html>

  <head>

    <!-- ... -->

    <script src="./path/to/iro.min.js">