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: about 2 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 (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-08-14T16:01:59.000Z (about 2 years ago)
- Last Synced: 2024-07-20T03:13:17.229Z (about 2 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,292
- 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
Awesome Lists containing this project
- my-awesome-list - iro.js
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">