Powerful Color Picker Component With Pure JavaScript – color-picker.js

Category: Color , Javascript | April 15, 2020
Author: taufik-nurrohman
Views Total: 6,504
Official Page: Go to website
Last Update: April 15, 2020
License: MIT


Powerful Color Picker Component With Pure JavaScript – color-picker.js


color-picker.js is a pure (Vanilla) JavaScript library for creating a responsive color picker component with support for touch events and alpha chanel. You will find more examples in the zip.

Basic usage:

1. Place the color-picker.css and color-picker.js into your html document.

<link href="color-picker.min.css" rel="stylesheet">
<script src="color-picker.min.js"></script>

2. Create a text field to accept the selected color values. Optionally, you can define the initial color code in the value attribute as follows:

<input type="text" value="#ff0" />

3. Initialize the color picker on the text field.

var picker = new CP(document.querySelector('input[type="text"]'));

4. Auto-update the background color of your web page when the color changes.

function onChange(r, g, b, a) {
  this.source.value = this.color(r, g, b, a);
  document.body.style.backgroundColor = this.color(r, g, b, a);
picker.on('change', onChange);

5. Optional settings.

var picker = new CP(document.querySelector('input[type="text"]'), {
    color: 'HEX', // color format
    e: ['touchstart', 'mousedown'], // events to show the color picker 
    parent: null //parent element

6. API methods and properties.

// returns the version

// returns the instance

// converts between HEX and RGBa
CP.HEX([255, 255, 0, 1]);
CP.RGB = function(x) {
  if ('string' === typeof x) {
    // Use regular expression here to extract color data from the string input
    // and output it as an array of red, green, blue and alpha color data
    return [r, g, b, a];
  // Return the string representation of color if input is an array of color data
  return 'rgba(' + x[0] + ', ' + x[1] + ', ' + x[2] + ', ' + x[3] + ')';
console.log(CP.RGB('rgba(255, 255, 0, 1)'));
console.log(CP.RGB([255, 255, 0, 1]));

// returns the current state

// returns the source element that holds the initial color value

// returns the color picker element
picker.self.style.borderWidth = '4px';

// returns the active color picker control pane element

// checks if is visible

// sets color
picker.set(r, g, b, a);

// gets the current color

// sets value and update the color picker's color state.
picker.value(r, g, b, a);

// calls current color parser function with a name that is defined in the state.color value.
picker.color(r, g, b, a);

// shows/hides the color picker

// repositions the color picker
picker.fit([x, y]);

// removes custom color picker features from the source element.

7. Event handlers.

  • enter
  • exit
  • fit
  • change
  • start
  • drag
  • stop
  • pop
picker.on(eventName, function(parameter) {
  // do something
picker.off(eventName, function(parameter) {
  // do something
picker.fire(eventName, lot);


v2.0.0 (04/15/2019)

  • Refactor

v1.4.2 (12/06/2019)

  • Change to CSS flexbox for layout.


  • Fix Missing `enter` and `exit` Hook on Method(s)


  • Rename ‘target’ Property to ‘source’


  • Allow Custom Color Picker Size


  • JS & CSS update

You Might Be Interested In:

Leave a Reply