Flat RGB/HEX/HSV Color Picker in JavaScript

Flat and simple color-picker


Fully Featured demo


  • 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


Dark Light
Dark theme Light theme

Getting Started

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

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


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

You can find more examples here.


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


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


Flat RGB/HEX/HSV Color Picker in JavaScript
13.15 GEEK