A Vanilla Javascript Touch-Friendly HSV Color Picker | Reinvented Color Wheel

Reinvented-Color-Wheel

Reinvented Color Wheel is a vanilla javascript HSV Easy-to-Touch ColorPicker that is inspired by Farbtastic Color Picker. This wheel helps you pick a color from the color wheel and then apply the HSV/HSL color code.

jquery color picker, javascript color picker code, javascript color picker from image, javascript eyedropper color picker, javascript hsl color picker, color picker javascript github

How to make use of 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 a component to hold the color picker.

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

Create a brand new Reinvented Color Wheel.

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

Possible choices 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 adjustments.

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);

Mobile-friendly HSV/HSL Color Picker, Reinvented Color Wheel Plugin/Github, vanilla js color picker


See Demo And Download

Official Website(luncheon): Click Here

This superior jQuery/javascript plugin is developed by luncheon. For extra Advanced Usages, please go to the official website.