A Simple Color Picker Application For Modern Browsers in Pure JavaScript | color-picker.js

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

// 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.

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

See Demo And Download

Official Website(taufik-nurrohman): Click Here

This superior jQuery/javascript plugin is developed by taufik-nurrohman. For extra Advanced Usages, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…