ivanvmat / color-picker

:droplet: Flat and simple color-picker library. No dependencies, no jquery.

Flat and simple color-picker

Fully Featured demo

Features

• Simple: The interface is straight forward and easy to use.
• Practical: Multiple color representations. Multiple themes.
• Mobile-friendly: Works well on mobile devices and touch screens.
• No dependencies

Themes

Dark	Light

Getting Started

Note: The readme is always up-to-date with the latest commit. See Releases for installation instructions regarding to the latest version.

Browser

<link rel="stylesheet" href="dist/color-picker.min.css"/>
<script type="text/javascript" src="dist/color-picker.min.js"></script>

Usage

// Simple example, see optional options for more configuration.
const picker = new ColorPickerControl({ 
    container: document.body, 
    theme: 'dark' 
});

You can find more examples here.

Events

Use the on(event, cb) and off(event, cb) functions to bind / unbind event listener.

Event	Description	Arguments
open	Color picker got opened	ColorPickerControlInstance
change	Color has changed	HSVaColorObject
close	Color picker got closed	ColorPickerControlInstance

Example:

picker.on('open', (instance) => {
    console.log('Event: "open"', instance);
});
picker.on('change', (color) => {
    console.log('Event: "change"', color);
});
picker.on('close', (instance) => {
    console.log('Event: "close"', instance);
});

color-picker's Issues

.fromHex

The .color.fromHex function does nothing even after .update is called

rgb input of [0,0,0] gets treated as [255,255,255]

I expect the culprit is line 244 in .js file :

let _color = new HSVaColor().fromRGBa(config.color.r || 255, config.color.g || 255, config.color.b || 255);

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D':

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

plugin js code line:1434
ctx.drawImage(intermediateCanvas, 0, 0, canvas.width, canvas.height);

Debouncing multiple events on mouseclick

Hi Ivan
when clicking on the color wheel in a webbrowser multiple "picker.on('change', function(color))" events get triggered within ~20ms. This is not the case when typing in new numbers. It is not an issue with physical keeping the button pressed; I made some tests with an clicking script. Is there a way to debounce or otherwise mitigate this behavior?

Option to disable or hide the alpha channel slider

Hi,

Is it possible that you might add an option to the configuration to disable or preferably hide the alpha channel slider?
Currently I'm hiding it in a hard coded css way:
https://github.com/H0rn0chse/GifBuilder/blob/main/styles/options.css#L50

Thanks in advance.

[Feature] Display the brightness slider under the color cirlce

Hello,
I would like to have an option to show a slightly bigger brightness slider right under the color circle instead of on the side.

Thank you very much.

How can you directly set the picker to a colour in the front end?

Hi, Ivan. The script is great, but I'm trying to set the picker to a certain colour value when it opens. Is there a way to do this? I've been throwing arguments into picker.update, but so far nothing has worked. Thanks.