Color Picker

A simple color picker plugin written in pure JavaScript, for modern browsers.

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link href="color-picker.min.css" rel="stylesheet">
  </head>
  <body>
    <input type="text">
    <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>

Has support for touch events. Touchy… touchy…

Instance

var el = document.querySelector('input[type="color"]');

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

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

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

Hooks

The available hooks:

create
destroy
enter
exit
fit
change
change:h
change:sv
start
start:h
start:sv
drag
drag:h
drag:sv
stop
stop:h
stop:sv

Add a Hook

Add a change hook.

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

Add a Hook with ID

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 Hook by ID

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 Hidden Color Data on the Target Element

console.log(picker.set());

Set Hidden Color Data on 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(picker.HSV2RGB([360, 100, 100]));

HSV to HEX

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

RGB to HSV

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

RGB to HEX

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

HEX to HSV

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

HEX to RGB

console.log(picker.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(picker.parse('#ffffff'));
console.log(picker.parse('rgb(255, 255, 255)'));
console.log(picker.parse('hsv(140, 20%, 60%)'));
console.log(picker.parse([0, 1, 1])); // no changes

State

Show

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

Hide

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

Visible

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

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:

sedaghatfatemeh/color-picker