Reinvented Color Wheel
A vanilla-js touch-friendly HSV color picker inspired by Farbtastic Color Picker.
Characteristics
- HSV (hue, saturation, value) cylindrical color model (unlike Farbtastic that takes HSL)
- Touch-friendly
- No need jQuery
- Lightweight (JS + CSS ~ 2.8 KB minified + gzipped)
Installation
npm (with a module bundler)
via$ npm install reinvented-color-wheel
;;
jsDelivr)
via CDN (
or for modern browsers:
Download directly
reinvented-color-wheel.min.css
reinvented-color-wheel.min.js
Usage
// create a new color pickervar colorWheel = // appendTo is the only required property. specify the parent element of the color wheel. appendTo: document // followings are optional properties and their default values. // initial color (can be specified in hsv / hsl / rgb / hex) hsv: 0 100 100 // hsl: [0, 100, 50], // rgb: [255, 0, 0], // hex: "#ff0000", // appearance wheelDiameter: 200 wheelThickness: 20 handleDiameter: 16 wheelReflectsSaturation: true // handler { // the only argument is the ReinventedColorWheel instance itself. // console.log("hsv:", color.hsv[0], color.hsv[1], color.hsv[2]); }; // set color in HSV / HSL / RGB / HEXcolorWheelrgb = 255 128 64;colorWheelhsl = 120 100 50;colorWheelhsv = 240 100 100;colorWheelhex = '#888888'; // get color in HSV / HSL / RGB / HEXconsole;console;console;console; // please call redraw() after changing some appearance properties.colorWheelwheelDiameter = 400;colorWheelwheelThickness = 40;colorWheel;
License
WTFPL