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

Ivan Matveev

Last update: Nov 14, 2022

Overview

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:

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

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

Comments

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.

opened by mango-unchained 3
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.

opened by H0rn0chse 2

Fix bug that prevents using it with code from README

On startup the following code from the README does not work with the current master branch:

const picker = new ColorPickerControl({ 
    container: document.body, 
    theme: 'light' 
});

picker.on('init', (instance) => {
    console.log('Event: "init"', instance);
});
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);
});

This is because eventListeners[event] is not initialized and so the push operation fails. This change lazily initializes the event type in eventListeners and resolves the issue without having to explicitly initialize each event.

opened by relistan 0

[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.

opened by BennyAlex 0
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?

opened by tinitaet 1

Releases(v1.0.0)

v1.0.0(Jul 19, 2022)
Changelog:

Fix: Fixed multiple events firing on mouse click.

Fix: Fixed the problem of changing brightness in safai.

Source code(tar.gz)
Source code(zip)

Owner

Ivan Matveev

GitHub https://ivanvmat.github.io/color-picker/

🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library.

?? Flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!

3.9k Dec 27, 2022

Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

Colr Pickr Colr Pickr, a vanilla JavaScript color picking component built with SVGs, with features like saving colors. Similar design to the chrome-de

27 Jun 27, 2022

A simple color picker application written in pure JavaScript, for modern browsers.

Color Picker A simple color picker application written in pure JavaScript, for modern browsers. Has support for touch events. Touchy… touchy… Demo and

207 Dec 14, 2022

Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.

Bootstrap Colorpicker Bootstrap Colorpicker is a modular color picker plugin for Bootstrap 4. THIS PROJECT IS NOT MAINTAINED ANYMORE. After almost 10

1.4k Dec 22, 2022

A JavaScript component that is a date & time range picker, no need to build, no dependencies except Moment.js, that is based on Dan Grossman's bootstrap-daterangepicker.

vanilla-datetimerange-picker Overview. A JavaScript component that is a date & time range picker, no need to build, no dependencies except Moment.js,

22 Dec 6, 2022

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

Related tags

Overview

Flat and simple color-picker

Fully Featured demo

Features

Themes

Getting Started

Browser

Usage

Events

Comments

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

Option to disable or hide the alpha channel slider

Fix bug that prevents using it with code from README

[Feature] Display the brightness slider under the color cirlce

Debouncing multiple events on mouseclick

Releases(v1.0.0)

v1.0.0(Jul 19, 2022)

Owner

Ivan Matveev

🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library.

Colr Pickr, a vanilla JavaScript color picker component built with SVGs, with features like saving colors. Similar design to the chrome-dev-tools color picker.

A simple color picker application written in pure JavaScript, for modern browsers.

Bootstrap Colorpicker is a modular color picker plugin for Bootstrap.

A JavaScript component that is a date & time range picker, no need to build, no dependencies except Moment.js, that is based on Dan Grossman's bootstrap-daterangepicker.

Simple utils to pack arrays, objects and strings to a flat object (and back again).

Simple, Fast, Secure, Flat-File CMS

Change the color of an image to a specific color you have in mind.

A little toy app to help you find the nearest match for a given color within a Figma Tokens color palette.

A NodeJS package to convert any RGB color to HEX color or viceversa. Also supports HSL conversion.

BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework

Ordered lists, flat or nested, multiple formats ordered lists.

This package enables you to define your routes using the flat-routes convention.

Lying flat is a 20 NFT collection on a custom marketplace built on Zora's protocol

Nepali Multi Date Picker for jQuery. Supports both single date selections and multiple date selection.

A simplified jQuery date and time picker

Turn an HTML input box to a duration picker, without jQuery

A jQuery Plug-in to select the time with a clock inspired by the Android time picker.

A super-lightweight, highly configurable, cross-browser date / time picker jQuery plugin