Mobile-friendly HSV/HSL Color Picker – Reinvented Color Wheel

A mobile-friendly color picker that helps you to pick a color from a color wheel and then applies the HSV/HSL color code to an element you specify.

How to use it:

Install the Reinvented Color Wheel.

# NPM
$ npm install reinvented-color-wheel --save

import "reinvented-color-wheel/css/reinvented-color-wheel.min.css";
import ReinventedColorWheel from "reinvented-color-wheel";

Or import the JavaScript & CSS from a CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/reinvented-color-wheel.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Create an element to hold the color picker.

<div id="example"></div>

Create a new Reinvented Color Wheel.

new ReinventedColorWheel({
    appendTo: document.getElementById('example')
})

Possible options to customize the Reinvented Color Wheel.

new ReinventedColorWheel({
    hsv: [0, 100, 100],
    hsl: [0, 100, 50],
    wheelDiameter: 200,
    wheelThickness: 20,
    handleDiameter: 16,
    wheelReflectsSaturation: true,
})

Execute a function when the color changes.

new ReinventedColorWheel({
    onChange: function (color) {
    // the received argument `color` is the ReinventedColorWheel instance itself.
    // console.log("hsl:", color.hsl[0], color.hsl[1], color.hsl[2]);
    // console.log("hsv:", color.hsv[0], color.hsv[1], color.hsv[2]);
    },
})

Set the color manually.

setHSL(HSLCODE);
setHSV(HSVCODE);

Changelog:

v0.4.0 (02/06/2023)

• update dependencies

v0.4.0 (10/21/2021)

• update dependencies

v0.3.1 (03/06/2021)

• avoid using `window` without checking it

v0.2.9 (03/14/2020)

• fix: remove unnecessary `releasePointerCapture()`

v0.2.8 (08/31/2019)

• fix: use WebKitCSSMatrix as fallback of DOMMatrix (for MS Edge)

v0.2.7 (08/10/2019)

• supports CSS 2D transforms for IE11

v0.2.6 (07/13/2019)

• bugfix

v0.2.4 (03/15/2019)

• perf: monitor `pointermove` event only for the color wheel, not for window.

11/03/2018

• calculate hue to one decimal place, reduce conversion error (rgb <=> hsv)