Color Picker

A simple color picker plugin written in pure JavaScript, for modern browsers, with touch events support.

Download Examples

Start

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Color Picker</title>
    <link href="color-picker.min.css" rel="stylesheet">
  </head>
  <body>
    <p><input type="text"></p>
    <script src="color-picker.min.js"></script>
    <script>
    var picker = new CP(document.querySelector('input[type="text"]'));
    picker.on("change", function(color) {
        this.target.value = '#' + color;
    });
    </script>
  </body>
</html>

Configure

Instance

new CP(node, events);
var el = document.querySelector('input[type="color"]');

// show color picker by click (default)
var picker = new CP(el);

// show color picker by hover
var picker = new CP(el, "mouseover");

// disable color picker by default
// to enable it, try `picker.enter()`
var picker = new CP(el, false);

Methods

Hooks

The available hooks:

Add a Hook

Add a change hook:

picker.on("change", function(color) {
    console.log(color);
});

Add a change hook with ID of test-id:

picker.on("change", function(color) {
    console.log(color);
}, 'test-id');

Remove a Hook

Remove all change hooks:

picker.off("change");

Remove a change hook with ID of test-id:

picker.off("change", 'test-id');

Trigger a Hook with Custom Value

Trigger all change hooks with pre–defined color value as ffa500:

picker.trigger("change", ['ffa500']);

Trigger a change hook with ID of test-id and with pre–defined color value as ffa500:

picker.trigger("change", ['ffa500'], 'test-id');

Data

Get the Target Element

var target = picker.target;

Get the Picker Element

var picker = picker.picker;

Get/Set Color Picker Data

Get hidden color data in the target element:

console.log(picker.get('<alternate color>'));

Set hidden color data to the target element:

picker.set([0, 1, 1]); // HSV color value, range from `0` to `1` for each
picker.set('rgb(255, 0, 0)'); // as color string

Color Converter

HSV to RGB

console.log(CP.HSV2RGB([360, 100, 100]));

HSV to HEX

console.log(CP.HSV2HEX([360, 100, 100]));

RGB to HSV

console.log(CP.RGB2HSV([255, 255, 255]));

RGB to HEX

console.log(CP.RGB2HEX([255, 255, 255]));

HEX to HSV

console.log(CP.HEX2HSV('ffffff'));

HEX to RGB

console.log(CP.HEX2RGB('ffffff'));

Parse to Raw HSV Color Data

All valid color string input will be converted into array of hue, saturation and value, with a range from 0 to 1:

console.log(CP.parse('#ffffff'));
console.log(CP.parse('rgb(255, 255, 255)'));
console.log(CP.parse('hsv(140, 20%, 60%)'));
console.log(CP.parse([0, 1, 1])); // no changes

State

Show

picker.enter(); // show the color picker

Hide

picker.exit(); // hide the color picker

Fit

picker.fit(); // fit to the visible area in window
picker.fit([10, 20]); // set `x` offset to `10` and `y` offset to `20`

Visible

if (picker.visible) { … } // color picker is visible

Extend

All color picker instances are stored in CP.__instance__.

Show all instances:

console.log(CP.__instance__);

Do something with instances:

CP.each(function($) {
    // `$` refers to the color picker instance
    $.enter(); // this will show all of the color picker panel
});

Want to Add More Features?

My purpose in making this plugin is to provide a JavaScript color picker solution as simple as possible with the most minimal features without requiring any dependency on JavaScript library such as jQuery or Prototype.

If you want to add new features, you can use the available hooks to make your own improvements without having to touch the plugin core. Here are some examples:

Support

Your small donation will keep this project going and allow me to do any further development.