Vanilla JS Color Picker With Alpha Channel – vanilla-picker

Category: Color , Javascript | September 7, 2019
Author: Sphinxxxx
Views Total: 2,907
Official Page: Go to website
Last Update: September 7, 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

Set the layout of the color picker.

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

Determine whether to display a text field for color values.

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

Define the color format.

new Picker({
    parent: document.querySelector('#example'),
    editorFormat: 'hex' // or 'rgb', 'hsl'

Determine whether to display a close button in the popup.

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

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

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

API methods.

// updates the options

// opens the popup

// closes the popup

// moves the popup
instance.movePopup(options, open);

// sets the color
instance.setColor(color, silent);

// shows the picker;

// hides the picker

// destroy the picker


v2.10.0 (09/07/2019)

  • Added destroy method

v2.9.2 (07/27/2019)

  • More relevant CSS prefixes, transpiled ES module

v2.9.1 (07/20/2019)

  • Fixed: Normalized CSS for input and button
  • Added: options.cancelButton

v2.8.1 (06/29/2019)

  • Added options.cancelButton.

v2.8.1 (06/15/2019)

  • Fixed Text field interaction.

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