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

Category: Color | October 31, 2020

0 Comment

Demo Download

AUTHOR:	luncheon
VIEWS TOTAL:	345 views
OFFICIAL PAGE:	Go to website
LAST UPDATE:	October 31, 2020
LICENSE:	MIT

---

Preview:

Description:

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/reinvented-color-wheel@0.1.6/css/reinvented-color-wheel.min.css">
<script src="https://cdn.jsdelivr.net/npm/reinvented-color-wheel@0.1.6"></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.2.10 (10/31/2020)

• fix: sv-handle wrong position in hidden di

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)