Skip to content
A simple, easy to use vanilla JS color picker with alpha selection.
JavaScript CSS Shell HTML
Branch: master
Clone or download
Latest commit f270acc Sep 3, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo `destroy()`. Fixes #14 Sep 3, 2019
dist `destroy()`. Fixes #14 Sep 3, 2019
docs `destroy()`. Fixes #14 Sep 3, 2019
scripts Fixed focusing and mouse interaction Sep 14, 2018
src `destroy()`. Fixes #14 Sep 3, 2019
.babelrc Grunt -> Gulp, plus some refactoring Feb 24, 2018
.gitignore Updated dependencies and added CSS prefixes. Fixes #9, fixes #10 Jan 11, 2019
.npmrc Disabled package-lock.json May 21, 2018 Nearly there Feb 26, 2018 Minor documentation changes Oct 3, 2018
gulpfile.babel.js Updated `color-conversion` Aug 9, 2019
package.json `destroy()`. Fixes #14 Sep 3, 2019


License Version Size Downloads

A simple, easy to use vanilla JS (no dependencies) color picker with alpha selection.


Getting Started


  • For the pros:

    • npm install vanilla-picker --save
    • import Picker from 'vanilla-picker';
  • For the rest of us:

<script src=""></script>


<div id="parent">Click me</div>


        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) { = color.rgbaString;

    /* onDone is similar to onChange, but only called when you click 'Ok' */


API and advanced options


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!



The ISC license - see the file for details.

You can’t perform that action at this time.