Javascript Color Picker Library is a modern, SVG-based color picker widget for vanilla JavaScript. Work with colors in hex, RGB, HSV, and HSL formats in one simple, frictionless API.
iro.js is a smooth, HSV coloration based mostly JavaScript coloration picker for producing a fairly, HTML5 canvas based mostly on shade wheel UI with contact assist.
Also gives API strategies that mean you can set, replace, and convert between colors.
Work with colors
Each color picker contains a color object that stores the currently selected color. This color object is bound to the color picker, so any changes to its values will be reflected by the picker, and vice versa.
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 to select color harmony and themes.
- Create the perfect color picker from a selection of ready-made UI components.
- All iro.js files can be run from a single script – no additional CSS, images, or third-party libraries are required!
- ~ 9KB minified and compressed.
- Licensed under MPL 2.0 – 100% free for personal and commercial use.
Must Read: Highlight Colors Min/Max Values For The HTML Table | tableMinMax
How to make use of it:
Installation:
npm install @jaames/iro --save
1. If you are using a modular compiler like Webpack or Rollup, import iro.js into your project:
2. using jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/@jaames/[email protected]"></script>
3. Then add it to the <head> of your page with a <script> tag:
<html>
<head>
<!-- ... -->
<script src="./path/to/iro.min.js"></script>
</head>
<!-- ... -->
</html>4. First, we need an HTML element with a unique identifier (such as the id attribute) to act as a container for the color picker:
<div id="picker"></div>
5. Then use JavaScript to create a new iro.ColorPicker one with a CSS selector that matches your container element:
var colorPicker = new iro.ColorPicker('#picker');6. The color picker can be customized by passing a set of options to the second iro.ColorPicker parameter:
var colorPicker = new iro.ColorPicker("#picker", {
// Set the size of the color picker
width: 320,
// Set the initial color to pure red
color: "#f00"
});Available Events
color:change
Fired whenever the selected color changes — either when the user interacts with the color picker, or when the color is updated by your own code.
Must Read: Random Color Picker Generator Made With jQuery and SCSS
input:change
Similar to color:change, except this event is only fired when the color is changed with the user’s mouse or touch input.
Callbacks for this event receive the same values as color:change, and it is also safe to modify the color object within callbacks for this event.
input:start
Fired whenever the users start interacting with the color picker controls. The currently selected color is passed to this event’s callback function.
input:move
Fired when the user moves their pointer/mouse after beginning interaction. The currently selected color is passed to this event’s callback function.
input:end
Fired whenever the user stops interacting with the color picker controls. The currently selected color is passed to this event’s callback function.
color:init
Fired whenever a color is added. This event’s callbacks will receive the newly added color object.
color:remove
Fired when color is removed from the color picker. This event’s callbacks will receive the removed color object.
color:setActive
Fired whenever the ‘active’ color is switched. This event’s callbacks will receive the active color object.
mount
Fired when the colorPicker’s UI has been mounted to the DOM and is ready for user interaction. The colorPicker object is passed to this event’s callback function.
Available Options
Must Read: Vanilla Javascript HSLA Color Picker With Interactive Sliders
| Option | Purpose | Default Value |
|---|---|---|
width | Total width of the control UI. | 300 |
color | The initial color value. This can be any [supported color format](https://iro.js.org/color_api.html#supported-color-formats). | #ffffff |
colors | Used for customizing the [UI component layout](https://iro.js.org/advanced.html#custom-ui-layouts). | null |
display | CSS display value for the color picker root element. | block |
id | HTML ID for the color picker root element. | null |
layout | Used for customizing the [UI component layout](https://iro.js.org/advanced.html#custom-ui-layouts). | null |
layoutDirection | UI component stacking direction; either vertical or horizontal. | vertical |
padding | Padding around the control handles. | 6 |
margin | The gap between individual components. | 12 |
borderWidth | Width of the border around the controls. Set to 0 for no border. | 0 |
borderColor | Color of the border. Any valid CSS color is supported. | #ffffff |
handleRadius | The radius of the control handles. | 8 |
handleSvg | Custom handle SVG, used for [custom handles](https://iro.js.org/advanced.html#custom-handles). | null |
handleProps | Custom handle properties, used for [custom handles](https://iro.js.org/advanced.html#custom-handles). | {x:0, y:0} |
wheelLightness | If set to false, the color wheel will not fade to black when the lightness decreases. | true |
wheelAngle | Starting angle of the color wheel’s hue gradient, measured in degrees. | 0 |
wheelDirection | The direction of the color wheel’s hue gradient; either clockwise or anticlockwise. | anticlockwise |
sliderSize | Slider control size. By default, this will be calculated automatically. | undefined |
boxHeight | Box control height. By default, this will be the same as the width. | undefined |
Color Properties
Must Read: Flexible and Minimalistic Radial Color Picker For Vue.js
| Property | Example Format |
|---|---|
hexString | #ff0000 |
hex8String | #ff0000ff |
rgb | { r: 255, g: 0, b: 0 } |
rgba | { r: 255, g: 0, b: 0, a: 1 } |
rgbString | rgb(255, 0, 0) |
rgbaString | rgb(255, 0, 0, 1) |
hsl | { h: 360, s: 100, l: 50 } |
hsla | { h: 360, s: 100, l: 50, a: 1 } |
hslString | hsl(360, 100%, 50%) |
hslaString | hsla(360, 100%, 50%, 1) |
hsv | { h: 360, s: 100, v: 100 } |
hsva | { h: 360, s: 100, v: 100, a: 1 } |
red | 0 to 255 |
green | 0 to 255 |
blue | 0 to 255 |
alpha | 0 to 1 |
hue | 0 to 360 |
saturation | 0 to 100 |
value | 0 to 100 |
kelvin | 1000 to 40000 |
See Demo And Download
Official Website(jaames): Click Here
This superior jQuery/javascript plugin is developed by jaames. For extra Advanced usage, please go to the official website.
