Vanilla JS Color Picker With Alpha Channel – vanilla-picker

Preview:

Description:

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
$ 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
});

Set the default color on init.

new Picker({
    parent: document.querySelector('#example'),
    defaultColor: '#0cf'
});

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
instance.setOptions(options);
// opens the popup
instance.openHandler();
// closes the popup
instance.closeHandler();
// moves the popup
instance.movePopup(options, open);
// sets the color
instance.setColor(color, silent);
// shows the picker
instance.show();
// hides the picker
instance.hide();
// destroy the picker
instance.destroy();

Changelog:

v2.12.2 (08/20/2021)

• Bugfixes

v2.11.2 (10/27/2021)

• Updated TypeScript definitions
• Updated dependencies

v2.11.1 (01/23/2021)

• Updated TypeScript definitions

v2.11.0 (01/04/2020)

• TypeScript declaration

v2.10.1 (01/04/2020)

• Added options.defaultColor

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()

08/18/2018

• Added onOpen/onClose callbacks.