A Simple Color Picker Application For Modern Browsers in JavaScript

The simple color picker app was written in pure JavaScript for modern browsers. color-picker.js is a JS library for creating a responsive color-picker component with support for touch events and an alpha channel.

Chrome DevTools: Color Picker Component | Colr Pickr

How to make use of it:

1. Place the color-picker.css and color-picker.js into your HTML doc.

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

2. Create a text area to just accept the chosen color values.

<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 coloration of your net web page when the color modifications.

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 strategies and properties.

// returns the version
CP.version

// returns the instance
CP.instances

// converts between HEX and RGBa
CP.HEX('#ff0');
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
picker.state

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

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

// returns the active color picker control pane element
picker.current

// checks if is visible
picker.visible

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

// gets the current color
picker.get();

// 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
picker.enter(); 
picker.exit();

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

// removes custom color picker features from the source element.
picker.pop();

7. Event handlers.

picker.on(eventName, function(parameter) {
  // do something
});
picker.off(eventName, function(parameter) {
  // do something
});
picker.fire(eventName, lot);

Powerful Color Picker Component, Color Picker Plugin/Github