Canvas Based HTML5 HSV Color Picker Component

Category: Color , Javascript | September 12, 2018
Author: NC22
Views Total: 4,311
Official Page: Go to website
Last Update: September 12, 2018
License: MIT


Canvas Based HTML5 HSV Color Picker Component


A simple and standalone JavaScript library used to render canvas based, mobile-friendly HSV color pickers in the document.

Basic usage:

Load the minified version of the HTML5 Color Picker in the document.

<script src="html5kellycolorpicker.min.js"></script>

Create an html5 canvas element on the webpage.

<canvas id="picker"></canvas>

Attach the HTML5 color picker to an input field.

<input id="color" value="#54aedb">

Initialize the HTML5 color picker.

new KellyColorPicker({
    place : 'picker', 
    input : 'color'

Available config parameters.

var method = 'quad';
var alpha = false;          // is alpha slider enabled
var drag = false;
var cursorAnimReady = true; // sets by requestAnimationFrame to limit FPS on events like mousemove etc. when draging 

var events = new Array();
var userEvents = new Array();

var canvasHelper = document.createElement("canvas");
var canvasHelperCtx = false; // used if needed to copy image data throw ctx.drawImage for save alpha channel
var rendered = false;        // is colorpicecker rendered (without side alpha bar and cursors, rendered image stores in canvasHelperData
var canvasHelperData = null; // rendered interface without cursors and without alpha slider [wheelBlockSize x wheelBlockSize]

var input = false;

// used by updateInput() function if not overloaded by user event
var inputColor = true;     // update input color according to picker
var inputFormat = 'mixed'; // mixed | hex | rgba

var popup = new Object;    // popup block for input
popup.tag = false;         // Dom element if popup is enabled
popup.margin = 6;          // margin from input in pixels

// container, or canvas element
var place = false;
var handler = this;

var basePadding = 2;

var padding;
var wheelBlockSize = 200;
var center;

// current color
var hsv;
var rgb;
var hex = '#000000';
var a = 1;

var wheel = new Object;
wheel.width = 18;
wheel.imageData = null; // rendered wheel image data
wheel.startAngle = 0; // 150
wheel.outerStrokeStyle = 'rgba(0,0,0,0.2)';
wheel.innerStrokeStyle = 'rgba(0,0,0,0.2)';
wheel.pos; // center point; wheel cursor \ hsv quad \ hsv triangle positioned relative that point



  • fixed event reference in getEventDot function.

You Might Be Interested In:

Leave a Reply