komarovartem / colorPicker

JavaScript colorpicker with optional gradient switcher.

JS Color Picker

Simple JavaScript colorpicker which supports transparency and gradient.

Check the Demo: https://codepen.io/komarovdesign/pen/moGNpJ

This is small (no external images or dependencies) and working solution if you need color picker right now right here :)

Basic Usage

Each text input with .clpi class will be converted into color picker. If you need to have a gradient switcher add .clpi-gradient class

<!-- Simple ColorPicker  -->
<input type="text" class="clpi">

<!-- Gradient ColorPicker  -->
<input type="text" class="clpi clpi-gradient">

Usage

Colorpicker works with global events passing the currently triggered input.

If you need to reinit new colorpicker inputs.

colorPicker.initAll()

When color picker changed

window.addEventListener('colorPickerChange', function (data) {
    let i = data.detail.el;
    document.body.style.background = i.value;
});

When color picker is changing

window.addEventListener('colorPickerTick', function (data) {
    let i = data.detail.el;
    document.body.style.background = i.value;
});