This is the simple HSV color wheel with touch support. Works on Canvas API
ColorWheel is a UMD module, so you can include it via script tag or require statement. Also it can be imported as an ES module (use ColorWheel.module.js)
<script src="ColorWheel.min.js"></script>import ColorWheel from './ColorWheel.module.js'
// or
const ColorWheel = require('./ColorWheel.js');let picker = new ColorWheel(function (eventState, eventName) {
// Do something here when color is changed
});
document.body.appendChild(picker.canvas);let picker = new ColorWheel(callback, size);callbackis called after any changes of color. Called with parameterseventStateandeventNamesizeis an optional parameter. Sets width and height of the picker. Default is256
0: initial color change when user clicked on canvas1: color change while moving the cursor2: end of moving cursor3: setting the color from code
rotateHue: handler of changing huemoveTone: handler of changing saturation and valuesetHSV,setHSL: function used for changing the color from code.eventStateis always3
Static property, contains version string tag
ColorWheel.version; // '1.0'The Canvas element that can be added to page
document.body.appendChild(picker.canvas);
picker.canvas.classList.add('picker');These properties are the current color in HSV or HSL color space. Hue is presented in degrees, other values are in range [0,1]
picker.HSL; // [30, 1, 0.5]
picker.HSV; // [30, 1, 1]This property contains the css string in HSL format
// 'hsl(30, 100%, 50%)'
document.body.style.backgroundColor = picker.css;Sets picker size
picker.setSize(300);Sets color in HSV model
picker.setHSV(30, 1, 1); // callback will be calledSets color in HSL model
picker.setHSL(30, 1, 0.5); // callback will be calledPublished under MIT license, 2018