A simple, easy to use, versatile and customisable Javascript colour picker.
Demo: http://lonely-pixel.com/projects/picker
And on codepen: http://codepen.io/suffick/pen/DpnmA
Using Picker is as simple as this:
var parent = document.getElementById('parent');
var picker = new Picker(parent);
parent.onclick = function() {
picker.show();
};
picker.on_done = function(colour) {
parent.style.background = colour.rgba().toString();
};Explained:
<script src="picker.min.js"></script>
<div id="parent">click me</div>
<script>
/* STEP 1 */
/* Create a new picker object and set the parent element. */
var parent = document.getElementById('parent'); /* or jQuery */ $('#parent');
var picker = new Picker(parent);
/* STEP 2 */
/* Set Picker to open when you want, when the parent is clicked for example. */
parent.onclick = function() {
picker.show();
};
/* STEP 3 */
/*
You can do what you want with the chosen colour using two events,
on_change and on_done.
*/
picker.on_done = function(colour) {
/*
You can get the colour using the hsl(), hsla(), rgb(), rgba() and hex() functions.
Each function returns an object containing each component (e.g r, g and b) and a
toString() function, which returns the colour as a string to use with CSS or JS.
E.g 'rgba(255, 0, 0, 0.4)'.
*/
parent.style.background = colour.rgba().toString();
};
/* on_change is called every time the selection is changed without clicking 'ok' */
</script>There are also a number of options you can choose.
var picker = new Picker({
/* The colour picker's parent */
parent: (parent element),
/*
Where the colour picker is relative to the parent.
Defaults to 'right'.
*/
orientation: ('left', 'right', 'top', 'bottom', 'centre', 'center'),
/*
The colour picker's x position relative to the parent.
Defaults to 'auto'.
*/
x: (number),
/*
The colour picker's y position relative to the parent.
Defaults to 'auto'.
*/
y: (number),
/*
The colour picker's arrow size.
Defaults to 20.
*/
arrow_size: (number)
});You can customise the CSS in the source file, or do it dynamically like so:
picker.wrapper.background = '#333';Easy!
Picker is in it's early stages, and although it's fully functional and usable, there could be a bug or two. Please let me know if you find a problem, have feedback or would like to contact me for any other reason via [email protected].
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent