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

Category: Image | March 15, 2019
Author: luncheon
Views Total: 424
Official Page: Go to website
Last Update: March 15, 2019
License: MIT

Preview:

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

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/[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.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)

You Might Be Interested In:


Leave a Reply