Google Chrome DevTools Style Color Picker - JavaScript Library

Explore interactive color picker demos including default mode, alpha-disabled mode, and disabled state examples. Click any color button to open the picker and preview color selection in real time. color picker demo page

Lightweight Chrome-style color picker with HEX, RGBA, HSLA, alpha control, EyeDropper API support, touch support, and multiple instances.

• Lightweight & dependency free - Built using pure vanilla JavaScript with no external libraries or frameworks required.
• Chrome-inspired UI - Modern popup design similar to the built-in Google Chrome color picker experience, with a saturation/brightness box, hue slider, preview swatch, and an input-mode toggle to cycle HEX → RGB → HSL.
• Alpha transparency control - Enable or disable opacity selection with a built-in alpha slider and checkerboard-backed preview.
• Multiple picker instances - Attach independent color pickers to multiple buttons or elements while sharing a single optimized UI component. Only one panel is open at a time.
• EyeDropper API support - Pick colors directly from anywhere on the screen in supported browsers (Chrome and Edge).
• Mobile & touch friendly - Works smoothly on mobile phones, tablets, and touch-enabled devices. Sliders use touch-action: none for reliable drag interaction.
• Debounce support - Built-in change-event throttling - delay callbacks until the user stops dragging to avoid expensive operations on every frame.
• Event system - Subscribe and unsubscribe to change, open, and close events using .on() and .off(), or pass onChange, onOpen, and onClose in the constructor.
• Multiple color formats - Output and accept colors in all common string formats:
  • HEX
  • HEXA
  • RGB
  • RGBA
  • HSL
  • HSLA
  Typed fields inside the panel let you edit the active format directly.
• Programmatic API - Control the picker using JavaScript methods:
  • setColor()
  • getColor()
  • open()
  • close()
  • enable()
  • disable()
  • destroy()
• Copy to clipboard - Hover the preview circle inside the panel to copy the current color value.
• Smart positioning - The popup repositions on scroll and resize, and auto-flips above the trigger when there is not enough room below the viewport.
• Outside click to close - Click anywhere outside the panel to dismiss it; pending debounced changes flush on close.

Direct Download

Source code and package:

GitHub npm JavaScript Code (hcg-color.js) CSS Code (hcg-color.css)

Download the two files and include them in your page. The CSS goes in the head and the script before the closing body tag.

HTML

<link rel="stylesheet" href="hcg-color.css">
<script src="hcg-color.js"></script>

---

NPM Usage

Install the package via npm for use in module bundler projects such as Webpack, Vite, or Rollup.

Install:

Command Line

npm install hcg-color-picker

ESM import:

JS - ESM

import hcgColor from 'hcg-color-picker';
import 'hcg-color-picker/hcg-color.css';

CommonJS require:

JS - CJS

const hcgColor = require('hcg-color-picker');

---

CDN usage

Include the stylesheet and script directly from a CDN, no installation or build step required. Ideal for quick prototypes and static HTML pages.

jsDelivr:

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hcg-color-picker/hcg-color.css">
<script src="https://cdn.jsdelivr.net/npm/hcg-color-picker/index.umd.js"></script>

unpkg:

HTML

<link rel="stylesheet" href="https://unpkg.com/hcg-color-picker/hcg-color.css">
<script src="https://unpkg.com/hcg-color-picker/index.umd.js"></script>

After the script loads, hcgColor is available as a global variable.

---

React Usage

Using React? hcg-color-picker React

Create a new picker instance and attach it to a button or HTML element using pure vanilla JavaScript.

<button id="color-btn">Pick Color</button>

const picker = new hcgColor(
        document.getElementById('color-btn'),
        { color: '#ff0000' }
    );

    picker.on('change', function (colors, source) {
        console.log(colors.hex);   // "#ff0000"
        console.log(colors.rgba);  // "rgba(255, 0, 0, 1)"
        console.log(colors.hsla);  // "hsla(0, 100%, 50%, 1)"

        console.log(source); // "drag" | "input" | "api" | "eyedropper"
    });

Pass an options object as the second argument to the constructor:

const picker = new hcgColor(element, {
    color:    '#ff0000',
    onChange: colors => console.log(colors.hex),
    onOpen:   hex => console.log('opened', hex),
    onClose:  hex => console.log('closed', hex),
    alpha:    true,
    debounce: 150,
    disabled: false,
});

Color Format Examples

new hcgColor(element, { color: '#ff0000' });                // 6-digit HEX
new hcgColor(element, { color: '#ff0000ff' });              // 8-digit HEX with alpha
new hcgColor(element, { color: '#f00' });                   // 3-digit shorthand
new hcgColor(element, { color: 'rgb(255, 0, 0)' });         // RGB
new hcgColor(element, { color: 'rgba(255, 0, 0, 0.5)' });   // RGBA
new hcgColor(element, { color: 'hsl(0, 100%, 50%)' });      // HSL
new hcgColor(element, { color: 'hsla(0, 100%, 50%, 1)' });  // HSLA

By default the change event fires on every pointer move during drag, up to 60 times per second. The debounce option delays the event until the user pauses or stops dragging, which is useful for expensive operations like API calls, saving to a database, or heavy re-renders.

const picker = new hcgColor(btn, {
    color:    '#ff0000',
    debounce: 200,
    onChange: (colors) => {
        console.log(colors.hex); // fires 200ms after drag stops
    }
});

Without debounce the change event fires continuously during drag. With debounce: 200 the event waits 200ms after the last movement before firing. Set to 0 to disable debouncing entirely.

Live comparison, drag the sliders and watch the counters:

All Methods at a Glance

on(event, callback)

picker.on(event, callback) Subscribe to an event

JavaScript

picker.on('change', function (colors, source) {
    console.log(colors.hex);   // "#ff0000"
    console.log(colors.hexa);  // "#ff0000ff"
    console.log(colors.rgb);   // "rgb(255, 0, 0)"
    console.log(colors.rgba);  // "rgba(255, 0, 0, 1)"
    console.log(colors.hsl);   // "hsl(0, 100%, 50%)"
    console.log(colors.hsla);  // "hsla(0, 100%, 50%, 1)"

    console.log(source); // "drag" | "input" | "api" | "eyedropper"
});

---

off(event, callback)

picker.off(event, callback) Unsubscribe a specific listener

JavaScript

function onChange(colors) { console.log(colors.hex); }

picker.on('change', onChange);
picker.off('change', onChange);

---

setColor(color)

picker.setColor(color) Programmatically set the color, fires the change event

JavaScript

picker.setColor('#00ff00');
picker.setColor('rgb(0, 255, 0)');
picker.setColor('hsl(120, 100%, 50%)');

---

getColor()

picker.getColor() Returns the current color as an object with all formats

JavaScript

const colors = picker.getColor();
// {
//     hex:  "#ff0000",
//     hexa: "#ff0000ff",
//     rgb:  "rgb(255, 0, 0)",
//     rgba: "rgba(255, 0, 0, 1)",
//     hsl:  "hsl(0, 100%, 50%)",
//     hsla: "hsla(0, 100%, 50%, 1)"
// }

picker.getColor().hex   // "#ff0000"
picker.getColor().rgba  // "rgba(255, 0, 0, 1)"

---

setAlphaEnabled(boolean)

picker.setAlphaEnabled(boolean) Show or hide the alpha slider at runtime

JavaScript

picker.setAlphaEnabled(false);  // hide alpha slider
picker.setAlphaEnabled(true);   // show alpha slider

---

open() / close()

picker.open() / picker.close() Programmatically open or close the picker

JavaScript

picker.open();
picker.close();

// Check if open
if (picker.isOpen) {
    picker.close();
}

---

enable() / disable()

picker.enable() / picker.disable() Enable or disable the picker

JavaScript

picker.disable();  // prevents the picker from opening on click
picker.enable();   // re-enables the picker

---

destroy()

picker.destroy() Remove the instance and clean up all event listeners

JavaScript

picker.destroy();

Subscribe to events with .on() and unsubscribe with .off().

change Fires on every color update - includes all formats

picker.on('change', (colors, source) => {
    console.log(colors.hex);   // "#ff0000"
    console.log(colors.hexa);  // "#ff0000ff"
    console.log(colors.rgb);   // "rgb(255, 0, 0)"
    console.log(colors.rgba);  // "rgba(255, 0, 0, 1)"
    console.log(colors.hsl);   // "hsl(0, 100%, 50%)"
    console.log(colors.hsla);  // "hsla(0, 100%, 50%, 1)"

    console.log(source);      // "drag" | "input" | "api" | "eyedropper"
});

open Fires when the picker opens - receives current hex color

picker.on('open', hex => console.log('Opened with:', hex));

close Fires when the picker closes - receives final hex color

picker.on('close', hex => console.log('Closed with:', hex));

The colors object returned by onChange and .getColor():

{
    hex:  "#ff0000",       // 6-digit HEX - no alpha
    hexa: "#ff0000ff",     // 8-digit HEX - with alpha
    rgb:  "rgb(255, 0, 0)",
    rgba: "rgba(255, 0, 0, 1)",
    hsl:  "hsl(0, 100%, 50%)",
    hsla: "hsla(0, 100%, 50%, 1)"
}

Each instance is fully independent - they share one picker UI but each stores its own color state.

const picker1 = new hcgColor(document.getElementById('btn1'), { color: '#f44336' });
const picker2 = new hcgColor(document.getElementById('btn2'), { color: '#2196f3' });
const picker3 = new hcgColor(document.getElementById('btn3'), { color: '#4caf50', alpha: false });

picker1.on('change', colors => console.log('Picker 1:', colors.hex));
picker2.on('change', colors => console.log('Picker 2:', colors.hex));

A dedicated React component is available as a separate package for React projects. The component supports all the same options as the vanilla JavaScript version including alpha control, debounce, disabled state, and programmatic API via ref.

Install:

npm install hcg-color-picker-react

Import:

import ColorPicker from 'hcg-color-picker-react';
import 'hcg-color-picker-react/ColorPicker.css';

Basic usage:

function App() {
    function handleChange(colors, source) {
        console.log(colors.hex);   // "#ff0000"
        console.log(colors.rgba);  // "rgba(255, 0, 0, 1)"
        console.log(source);       // "drag" | "input" | "api" | "eyedropper"
    }

    return (
        <div>
            {/* Basic */}
            <ColorPicker color="#ff0000" onChange={handleChange} />

            {/* No alpha */}
            <ColorPicker color="#0000ff" alpha={false} onChange={handleChange} />

            {/* Debounced */}
            <ColorPicker color="#9c27b0" debounce={200} onChange={handleChange} />

            {/* Disabled */}
            <ColorPicker color="#00ff00" disabled={true} />
        </div>
    );
}

Full documentation and examples: hcg-color-picker-react on npm

Version 2 is a full rewrite. The biggest changes from v1:

• Rewritten core - smaller bundle, faster initialisation
• Full TypeScript definitions bundled (.d.ts)
• EyeDropper API integration for screen color sampling
• React package (hcg-color-picker-react) added
• Debounce option to control onChange call frequency
• Improved touch and mobile support
• Multiple instances now share a single UI element

Here are real-world scenarios where hcg-color-picker is a drop-in solution.

The native color input is fine for quick prototypes, but it has serious gaps for real products. Here is how they compare.

Use the native input when you need a zero-JS, one-line solution and alpha / consistent UI do not matter. Use hcg-color-picker when you need alpha support, reliable cross-browser appearance, RGBA / HSLA output, or a React component.

Related links