Like this project? Please support my Mecha CMS project too. Thank you!
A simple color picker plugin written in pure JavaScript, for modern browsers, with touch events support.
<!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.source.value = '#' + color;
});
</script>
</body>
</html>
new CP(source, events, bounds);
var source = document.querySelector('input[type="color"]');
// show color picker by click (default)
var picker = new CP(source);
// show color picker by hover
var picker = new CP(source, "mouseover");
// disable color picker by default
// to enable it, try `picker.enter()`
var picker = new CP(source, false);
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 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 all change
hooks:
picker.off("change");
Remove a change
hook with ID of test-id
:
picker.off("change", 'test-id');
Trigger all change
hooks with pre-defined color value as ffa500
:
picker.fire("change", ['ffa500']);
Trigger a change
hook with ID of test-id
and with pre-defined color value as ffa500
:
picker.fire("change", ['ffa500'], 'test-id');
var source = picker.source;
var picker = picker.self;
Get hidden color data in the source element:
console.log(picker.get('<alternate color>'));
Set hidden color data to the source 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
console.log(CP.HSV2RGB([360, 100, 100]));
console.log(CP.HSV2HEX([360, 100, 100]));
console.log(CP.RGB2HSV([255, 255, 255]));
console.log(CP.RGB2HEX([255, 255, 255]));
console.log(CP.HEX2HSV('ffffff'));
console.log(CP.HEX2RGB('ffffff'));
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
picker.enter(); // show the color picker
picker.exit(); // hide the color picker
picker.fit(); // fit to the visible area in window
picker.fit([10, 20]); // set `x` offset to `10` and `y` offset to `20`
if (picker.visible) { … } // color picker is visible
All color picker instances are stored in CP.__instance__
.
Show all instances:
console.log(CP.__instance__);
Do something with instances:
CP.each(function(key, any) {
// `this` refers to the color picker instance
this.enter(); // this will show all of the color picker panel
});
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:
Your small donation will keep this project going and allow me to do any further development.