Vanilla JS Color Picker With Alpha Channel – vanilla-picker

Category: Color , Javascript | April 18, 2019
Author: Sphinxxxx
Views Total: 2,509
Official Page: Go to website
Last Update: April 18, 2019
License: MIT


Vanilla JS Color Picker With Alpha Channel – vanilla-picker


A vanilla JavaScript color picker with alpha channel support that can be attached to any element.

The color picker also comes with a popup mode that enables you to display the color picker in a popup window.

How to use it:

Install the color picker via NPM.

$ npm install vanilla-picker --save

Import the color picker to your project.

// ES 6
import Picker from 'vanilla-picker';
<!-- Browser -->
<script src="dist/vanilla-picker.js"></script>

Create an element where the color picker should append to.

<div id="example"></div>

Create a new Picker instance and append the color picker to the DIV element.

new Picker({
    parent: document.querySelector('#example')

Display the color picker in a popup window.

new Picker({
    parent: document.querySelector('#example'),
    popup: false // 'right'(default), 'left', 'top', 'bottom'

Enable/disable the alpha selection.

new Picker({
    parent: document.querySelector('#example'),
    alpha: false // default: true

Set the initial color.

new Picker({
    parent: document.querySelector('#example'),
    color: '#222'

Decide whether to show a text field for color value editing.

new Picker({
    parent: document.querySelector('#example'),
    editor: true

Available callback functions which can be used to apply selector color to any element.

new Picker({
    onChange: function(color){},
    onDone:: function(color){},
    onDone:: function(color){},
    onDone:: function(color){}


v2.8.0 (04/18/2019)

  • Added Shadow DOM support
  • Better event handling when closing the popup

v2.7.2 (01/27/2019)

  • Removed double onChange event

v2.7.1 (01/12/2019)

  • CSS vendor prefixes with Autoprefixer.

v2.7.0 (11/18/2018)

  • Fixed options.editorFormat

v2.6.0 (10/06/2018)

  • Make an ES6 module that actually works.

v2.5.2 (09/15/2018)

  • Bugfixed.
  • Keyboard navigation and basic accessibility.

v2.4.2 (09/08/2018)

  • movePopup(): Share a picker among multiple parents.
  • silent flag in setColor()


  • Added onOpen/onClose callbacks.

You Might Be Interested In:

Leave a Reply