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

Category: Color | February 6, 2023
Views Total:623 views
Official Page:Go to website
Last Update:February 6, 2023


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 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="[email protected]/css/reinvented-color-wheel.min.css">
<script src="[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.



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.


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

You Might Be Interested In:

Leave a Reply