vanilla-picker
A simple, easy to use vanilla JS (no dependencies) color picker with alpha selection.
Demo
https://codepen.io/Sphinxxxx/pen/zRmKBX
Getting Started
Installing
-
For the pros:
npm install vanilla-picker --save
import Picker from 'vanilla-picker';
-
For the rest of us:
<script src="https://unpkg.com/vanilla-picker@2"></script>
Note:
The script adds a <style>
element to the page, with all the needed CSS. If your site's Content Security Policy doesn't allow that, use the CSP build with a separate CSS file instead:
import Picker from 'vanilla-picker/csp';
import 'vanilla-picker/dist/vanilla-picker.csp.css';
..or
<script src="vanilla-picker.csp.min.js"></script>
<link href="vanilla-picker.csp.css" rel="stylesheet">
Usage
<div id="parent">Click me</div>
<script>
/*
Create a new Picker instance and set the parent element.
By default, the color picker is a popup which appears when you click the parent.
*/
var parent = document.querySelector('#parent');
var picker = new Picker(parent);
/*
You can do what you want with the chosen color using two callbacks: onChange and onDone.
*/
picker.onChange = function(color) {
parent.style.background = color.rgbaString;
};
/* onDone is similar to onChange, but only called when you click 'Ok' */
</script>
API and advanced options
https://vanilla-picker.js.org/gen/Picker.html
Accessibility
The color picker is built to support basic keyboard navigation and use with screen readers.
I would be very interested in feedback on improvements that could be done here!
Credits
License
The ISC license - see the LICENSE.md file for details.