Sleek HTML5 / Javascript Color Picker – iro.js

Category: Color , Javascript , Recommended | June 9, 2019
Author: jaames
Views Total: 6,393
Official Page: Go to website
Last Update: June 9, 2019
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.

Also provides API methods that allow you to set, update, convert between colors.

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", {
    width: 300,
    height: 300
    color: '#fff',
    padding: 6,
    borderWidth: 0,
    borderColor: '#fff',
    handleRadius: 8,
    handleSvg: null, // Custom handle SVG
    handleOrigin: {
      x: 0,
      y: 0
    },
    wheelLightness: true,
    wheelAngle: 0, // starting angle
    wheelDirection: 'anticlockwise', // clockwise/anticlockwise
    sliderHeight: undefined,
    sliderMargin: 12,
    display: 'block', // CSS display value
    layout: {} // Custom Layouts
});

Event handlers available.

colorWheel.on('color:change', function(color, changes){
  // 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('color:init', function(color){
  // same as color:change, but only fired once with the initial color value provided to the color picker.
})

colorWheel.on('input:change', function(color, changes){
  // Similar to color:change, except this is only fired whenever the color is changed with direct user input. 
})

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
})

Useful API methods.

// sets color
color.set(color);

// sets color chanel
color.setChannel('rgb', 'r', 255);

// clones color
color.clone(color);

// converts HSV to RGB
color.hsvToRgb(HSV);

// converts RGB to HSV
color.rgbToHsv(RGB);

// converts HSV to HSL
color.hsvToHsl(HSV);

// converts HSL to HSV
color.hslToHsv(HSL);

Changelog:

v4.5.1 (06/09/2019)

  • Hotfix: fixes rendering bug caused when the color was updated before the picker was mounted into the DOM

v4.5.0 (05/27/2019)

  • Added a new param for iro.ColorPicker: id – HTML ID for the color picker root element, also available as a prop on the color picker instance
  • Color picker event callbacks this context is now set to the active color picker instance

v4.3.4 (05/10/2019)

  • Added wheelAngle – starting angle for the color wheel’s hue gradient
  • Added wheelAnglewheelDirection – direction of the color wheel’s hue gradient (clockwise/anticlockwise)

v4.3.3 (04/14/2019)

  • Fixes an issue where the alpha component wasn’t being parsed correctly from rgba and hsla strings.

v4.3.2 (04/12/2019)

  • hotfix: input:change wasn’t firing

v4.3.1 (04/09/2019)

  • Fixes a few issues related to how color alpha/transparency was handled internally, which was causing problems with iro-transparency-plugin. Setting a color to a value without an alpha component (e.g hexString = “#fff”) will now set the alpha value to 1, and the alpha component will no longer be undefined when using new iro.Color.

v4.3.0 (04/08/2019)

  • Added input:change – The same as color:change, but only fires when the color has been set with user input
  • Added color:init – Same as color:change, but fired once with the initial color value
  • on and off methods can now take arrays of eventTypes as well as strings
  • New deferredEmit method (should only be used by plugins)
  • The color:change event no longer fires with the initial color value, as this was catching a few people out. make sure to listen for both color:init and color:change events with the same listener

v4.2.2 (03/27/2019)

  • Makes sure that input:start fires before color:update and that input:end fires after color:update.

v4.2.1 (03/19/2019)

  • Fixes color picker DOM event handling in IE11

v4.2.0 (03/12/2019)

  • Internal plugin API changes to allow for plugins to customise the slider type
  • Adds support for hue and saturation sliders

v4.0.3 (03/07/2019)

  • add slider getValueFromPoint to make plugin dev a bit easier

v4.0.2 (03/02/2019)

  • fire color:change if registered before color picker was mounted

v4.0.0 (02/23/2019)

  • Custom SVG handles
  • Custom layout config options
  • Updated Plugin API
  • Code tests
  • Rewritten codebase, is now much cleaner
  • Color picker components are now built using preact
  • Rewritten documentaion and readme, which huge focus on making things easier to follow

02/02/2019

  • v3.5.6: hotfix for svg url generation in older iOS webviews

01/28/2019

  • v3.5.5: hotfix for hsl string parsing bug

12/23/2018

  • v3.5.4: hotfix for black output on mobile and desktop Safari

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.

You Might Be Interested In:


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