Sphinxxxxvanilla-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 --saveimport 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
- Based on https://github.com/dissimulate/Picker by Adam Brooks
- Built with https://github.com/Joudee/color-conversion by Joudee
- Built with https://gist.github.com/mjackson/5311256 by Michael Jackson
License
The ISC license - see the LICENSE.md file for details.