Sleek HTML5 / Javascript Color Picker – iro.js

Category: Color , Javascript , Recommended | October 2, 2018
Author: jaames
Views Total: 4,292
Official Page: Go to website
Last Update: October 2, 2018
License: MIT

Preview:

Sleek HTML5 / Javascript Color Picker – iro.js

Description:

iro.js is a sleek, HSV color based JavaScript color picker for generating a pretty, HTML5 canvas based color wheel UI with touch support.

Installation:

# NPM
$ npm install @jaames/iro --save

How to use it:

Import the module.

import iro from "@jaames/iro";

Or add the core JavaScript library to the html page:

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

Create a placeholder element for the color picker.

<div class="wheel" id="colorWheelDemo"></div>

Generate a basic color picker inside the container ‘colorWheelDemo’.

var colorWheel = iro.ColorPicker("#colorWheelDemo", {
    // options here
});

Possible options to customize your color picker.

var colorWheel = iro.ColorPicker("#colorWheelDemo", {
    color: '#fff',
    padding: 6,
    borderWidth: 0,
    borderColor: '#fff',
    display: 'block',
    anticlockwise: false,
    width: 320,
    height: 320,
    sliderHeight: undefined,
    sliderMargin: 24,
    markerRadius: 8,
    wheelLightness: undefined,
    CSS: {} // apply colors to any elements
});

Event handlers available.

colorWheel.on('color:change', function(color){
  // when the color has changed, the callback gets passed the color object and an object providing which color channels (out of H, S, V) have changed.
})

colorWheel.on('input:start', function(color){
  // when the user starts interacting with the color picker, the callback gets passed the color object
})

colorWheel.on('input:end', function(color){
  // when the user has finished interacting with the color picker, the callback gets passed the color object
})

colorWheel.on('mount', function(color){
  // fired once the color picker UI has been mounted into the DOM
})

Changelog:

10/02/2018

  • v3.5.3: Fixed small issue with parent container size

09/24/2018

  • v3.5.2: Improve workaround for broken gradient URLs in Safari

08/17/2018

  • v3.5.0: Rewritten API classes using the es6 syntax

08/12/2018

  • v3.4.3: fix touch scrolling intervention in chrome

08/08/2018

  • v3.4.2: Fixes a warning caused by some recent Chrome changes

08/02/2018

  • v3.4.1: Fixed rounding issues when converting between color models, particularly when converting certain colors from RGB hex -> HSL -> RGB hex.

3 thoughts on “Sleek HTML5 / Javascript Color Picker – iro.js

  1. pablo79

    Hello,
    Thank you for this script.
    Is it possible to send three RGB values to a POST function for some php script?

    Reply

Leave a Reply