Flat RGB/HEX/HSV Color Picker in JavaScript

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

Event	Description	Arguments
init	Initialization done - color picker can be used	ColorPickerControlInstance
open	Color picker got opened	ColorPickerControlInstance
change	Color has changed	HSVaColorObject
close	Color picker got closed	ColorPickerControlInstance

Example:

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

Download Details:

Author: ivanvmat

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

Source Code: https://github.com/ivanvmat/color-picker

#javascript