What is the best free JavaScript color picker library?

hcg-color-picker is a free, open-source JavaScript color picker that replicates the Google Chrome DevTools color picker. It has zero dependencies, weighs about 38KB, and works in plain HTML, React, Vue, Svelte, and any modern JavaScript framework. It supports HEX, RGBA, and HSLA formats, an alpha transparency slider, and the EyeDropper API.

How do I add a color picker to a website without jQuery?

Use hcg-color-picker, a dependency-free vanilla JavaScript library. Include hcg-color.css and hcg-color.js, then call new hcgColor(element, { color: '#ff0000' }) on a button element. It requires no jQuery and no build step.

Is there a Chrome-style color picker component for React?

Yes. Install the hcg-color-picker-react package with npm install hcg-color-picker-react, then import ColorPicker and its CSS. It supports props like color, alpha, debounce, disabled, onChange, onOpen, and onClose, plus a ref API for setColor, getColor, open, and close. It ships with TypeScript declarations.

How do I get a color picker with an alpha or opacity slider in JavaScript?

hcg-color-picker includes a built-in alpha transparency slider, which the native HTML input type=color element does not support. The picker returns RGBA and HSLA values with the alpha channel. You can disable the alpha slider per instance by passing alpha: false.

Why use a JavaScript color picker instead of input type=color?

The native input type=color only outputs HEX, has no alpha support, and looks different in every browser. hcg-color-picker adds alpha transparency, HEX/RGBA/HSLA output, a consistent UI across all browsers, a styleable trigger button, the EyeDropper API, and a full programmatic API.

Which color formats does a Chrome-style color picker support?

hcg-color-picker outputs six formats: HEX (#ff0000), HEXA (#ff0000ff), RGB, RGBA, HSL, and HSLA. The onChange callback and getColor() method return all six formats in a single object.

How do I let users pick a color from anywhere on the screen?

hcg-color-picker has a built-in EyeDropper button that uses the native EyeDropper API to sample any pixel color on the screen. It is supported in Chrome 95+ and Edge 95+. The button is hidden automatically in browsers that do not support it, such as Firefox and Safari.

How do I add multiple color pickers on the same page?

With hcg-color-picker you create one instance per element, for example new hcgColor(btn1) and new hcgColor(btn2). Each instance stores its own color independently while sharing a single optimized picker UI, so memory use stays low even with many pickers.

Google Chrome DevTools Style Color Picker - JavaScript Library

By HTML Code Generator Updated June 3, 2026

MIT License 38KB minified · 20KB gzip TypeScript support No dependencies

Create modern color selection interfaces with this lightweight JavaScript color picker inspired by the Google Chrome color picker UI. The library supports HEX, RGBA, HSLA, and alpha transparency color formats for flexible color selection and conversion.

Built-in EyeDropper API support allows users to pick colors directly from anywhere on the screen in supported browsers. The color picker is fully touch-friendly, keyboard accessible, and optimized for both desktop and mobile devices.

Multiple independent picker instances can share a single reusable UI component, helping reduce memory usage and improve performance. Advanced features include live color preview, event listeners, programmatic API methods, and runtime control for opening, closing, enabling, disabling, and updating colors dynamically.

Contents

What is hcg-color-picker?

hcg-color-picker is a free, open-source JavaScript color picker widget that replicates the built-in color picker from Google Chrome. It is dependency-free, supports multiple instances on the same page, and works with plain HTML, React, Vue, Svelte, and any modern JavaScript framework. It outputs colors in HEX, RGBA, and HSLA formats and includes an alpha (opacity) slider and EyeDropper API support.

Framework compatibility

hcg-color-picker works with any environment that runs JavaScript - including Vite, Next.js, Nuxt, Astro, SvelteKit, Webpack, and plain HTML files. For React projects, use the dedicated hcg-color-picker-react package. No build step is required for vanilla JS, just include the script and CSS.

Code links:

GitHub npm

npm install hcg-color-picker Full installation

Live Demo

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.

Default:

No alpha:

Disabled:

Color Picker Preview

hcg-color-picker - Chrome style JavaScript color picker UI

hcg-color-picker with alpha slider disabled

Features

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.

🌗

Alpha Transparency Control

Enable or disable opacity selection with a built-in alpha slider.

🪄

Multiple Picker Instances

Attach independent color pickers to multiple buttons or elements while sharing a single optimized UI component.

🔬

EyeDropper API Support

Pick colors directly from anywhere on the screen in supported browsers.

📱

Mobile & Touch Friendly

Works smoothly on mobile phones, tablets, and touch-enabled devices.

🕐

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 simple callback methods.

🎯

Multiple Color Formats

Supports:

HEX
HEXA
RGB
RGBA
HSL
HSLA

⚙️

Programmatic API

Control the picker using JavaScript methods like:

setColor()
getColor()
open()
close()
enable()
disable()
destroy()

How to Install hcg-color-picker

Include the stylesheet and script in your HTML file:

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:

NPM

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

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.

Using React? hcg-color-picker React

hcg-color-picker Basic Usage

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

HTML

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

<script>
    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"
    });
</script>

Options

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

JavaScript

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

Option	Type	Default	Description
`color`	string	`data-color` or `#ff0000`	Initial color - accepts HEX, RGB, HSL formats
`onChange`	function	-	Shorthand change callback, same as `.on('change')`
`onOpen`	function	-	Shorthand open callback, same as `.on('open')`
`onClose`	function	-	Shorthand close callback, same as `.on('close')`
`alpha`	boolean	true	Set to `false` to disable the alpha slider
`debounce`	number	0	ms to debounce the `change` event during drag (0=off)
`disabled`	boolean	false	Start in disabled state - also reads the element's `disabled` attribute

Color Format Examples

JavaScript

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

Using Debounce in hcg-color-picker

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.

JavaScript

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:

No Debounce debounce: 0:

#e91e63

onChange fired:

times

With Debounce debounce: 200:

#2196f3

onChange fired:

times

hcg-color-picker Instance Methods

.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) Unsubscribe a specific listener

JavaScript

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

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

.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() 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) Show or hide the alpha slider at runtime

JavaScript

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

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

JavaScript

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

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

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

JavaScript

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

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

JavaScript

picker.destroy();

All Methods at a Glance

Method	Returns	Description
`.on(event, fn)`	this	Subscribe to an event
`.off(event, fn)`	this	Unsubscribe a listener
`.setColor(color)`	this	Set the color programmatically, fires `change`
`.getColor()`	object	Returns color object with all formats
`.setAlphaEnabled(bool)`	this	Show or hide the alpha slider at runtime
`.open()`	this	Open the picker (no effect if disabled)
`.close()`	this	Close the picker
`.isOpen`	boolean	Getter - `true` if this picker is currently open
`.enable()`	this	Re-enable a disabled picker
`.disable()`	this	Disable the picker - blocks opening on click
`.destroy()`	void	Remove instance, clean up all listeners

Events

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

Event	Callback data	Description
`change`	(colors, source)	Fired every time the color changes
`open`	hex string	Fired when the picker opens
`close`	hex string	Fired when the picker closes

change Fires on every color update - includes all formats

JavaScript

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

JavaScript

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

close Fires when the picker closes - receives final hex color

JavaScript

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

Color Formats

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

JavaScript

{
    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)"
}

Multiple Instances

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

JavaScript

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 =&gt; console.log('Picker 1:', colors.hex));
picker2.on('change', colors =&gt; console.log('Picker 2:', colors.hex));

hcg-color-picker React Package

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

npm install hcg-color-picker-react

Import:

JavaScript

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

Basic usage:

JavaScript

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

Open in StackBlitz

How it compares

Unlike heavier alternatives such as Pickr (~30KB gzip) or Spectrum, hcg-color-picker ships at just 20KB gzip with zero dependencies. It is the only Chrome-style picker with built-in EyeDropper API support, TypeScript definitions, and a dedicated React package - making it the most complete drop-in solution for modern web applications.

Troubleshooting

The picker does not open when I click the button.

Make sure the trigger element is a valid HTMLElement and that the script has fully loaded before calling new hcgColor(). Wrap initialization in a DOMContentLoaded listener or place the script at the bottom of <body>. Also check that the element does not have the disabled attribute or disabled: true in the options.

Colors look wrong or the picker opens with the wrong color.

The color option accepts HEX (#fff, #ffffff, #ffffff80), rgb(), rgba(), hsl(), and hsla(). Passing an invalid format falls back to #ff0000. Use picker.getColor().hex to verify the active color at runtime.

onChange fires too many times during drag.

Use the debounce option to throttle how often the callback fires. For example, { debounce: 150 } waits 150ms after the user stops dragging before firing.

The picker appears behind other elements or is cut off.

The picker is appended directly to document.body with a high z-index. If it is still hidden, check for a parent element with overflow: hidden, transform, or isolation: isolate which creates a new stacking context.

TypeScript error: "Could not find declaration file for module".

Both packages ship with bundled .d.ts files. Make sure you are using version 2 or later. If the error persists, check that your tsconfig.json includes "moduleResolution": "node" or "bundler".

EyeDropper button is not visible.

The EyeDropper API is only supported in Chrome 95+ and Edge 95+. It is not available in Firefox or Safari. The button is automatically hidden in unsupported browsers - this is expected behaviour.

What is new in v2

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

Common use cases

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

🎨

Design tools & canvas editors

Attach a picker to any stroke, fill, or background control. Each instance remembers its own color independently.

📋

Form builders

Add a color field to any form. Read the value anytime via element.dataset.color - no instance reference needed.

🌗

Theme & brand customisers

Update CSS custom properties in real time from onChange for instant live theme previews.

🖼️

Image & photo editors

Use the built-in EyeDropper API to sample any color directly from the screen.

📊

Chart & data visualisation

Let users recolor data series. Use debounce to avoid expensive re-renders on every drag tick.

⚙️

Settings & preferences panels

Use onClose to persist only the final color value, not every intermediate drag position.

Why use this instead of <input type="color">?

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

Feature	Native `<input type="color">`	hcg-color-picker
Alpha / opacity control	✗ Not supported	✓ Built-in alpha slider
Color output formats	HEX only	HEX, HEXA, RGB, RGBA, HSL, HSLA
Consistent UI across browsers	✗ Varies per OS & browser	✓ Identical on all browsers
Styleable trigger button	✗ Browser-controlled appearance	✓ Fully styleable via CSS
EyeDropper (screen color sampler)	✗ Not available	✓ Built-in (Chrome / Edge)
Programmatic API	✗ No open / close / setColor	✓ open, close, setColor, getColor…
Change event debounce	✗ Not available	✓ Built-in `debounce` option
Multiple instances on one page	△ Works but no shared state	✓ Each instance fully independent
Smart viewport positioning	✗ OS popup, uncontrolled	✓ Flips above / below automatically
React component	✗ None	✓ Dedicated React package
TypeScript support	△ Basic via lib.dom.d.ts	✓ Bundled .d.ts declarations
Dependencies	None (native)	None (vanilla JS)

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.

Browser Support

Feature	Support
Color picker UI	All modern browsers
Touch events	iOS Safari, Android Chrome
EyeDropper API	Chrome 95+, Edge 95+ (not Firefox / Safari)

Frequently Asked Questions (FAQ)

What is hcg-color-picker?

hcg-color-picker is a lightweight Chrome DevTools-style JavaScript color picker library built with pure vanilla JavaScript and no external dependencies.

How do I add a Chrome-style color picker to my website using JavaScript?

You can add hcg-color-picker to your website using JavaScript by importing the library and attaching the color picker to an input or container element.

Which color formats does hcg-color-picker support?

hcg-color-picker supports HEX, HEXA, RGB, RGBA, HSL, HSLA, and HSV color formats.

Does hcg-color-picker support alpha transparency?

Yes. hcg-color-picker includes an alpha transparency slider for opacity and RGBA color control.

Can I disable the alpha slider in hcg-color-picker?

Yes. The alpha transparency slider can be enabled or disabled for each color picker instance.

Does hcg-color-picker require jQuery or other dependencies?

No. hcg-color-picker is built using pure vanilla JavaScript and does not require jQuery or any external libraries.

Does hcg-color-picker support multiple color picker instances?

Yes. Multiple independent hcg-color-picker instances can be attached to different elements while sharing a single optimized picker UI.

Is hcg-color-picker mobile friendly?

Yes. hcg-color-picker supports touch interactions and mobile dragging on smartphones and tablets.

Does hcg-color-picker support the EyeDropper API?

Yes. hcg-color-picker supports the EyeDropper API in compatible Chromium-based browsers such as Google Chrome and Microsoft Edge.

Can I programmatically control hcg-color-picker?

Yes. hcg-color-picker includes API methods such as setColor(), getColor(), open(), close(), enable(), disable(), and destroy().

Is there a React version of hcg-color-picker?

Yes. A separate React component package called hcg-color-picker-react is available for React applications.

Is hcg-color-picker free for commercial use?

Yes. hcg-color-picker is free to use in personal and commercial projects.

Who makes hcg-color-picker?

hcg-color-picker is developed by HTML Code Generator.

Google Chrome DevTools Style Color Picker - JavaScript Library

What is hcg-color-picker?

Framework compatibility

Live Demo

Color Picker Preview

Features

How to Install hcg-color-picker

NPM Usage

CDN

hcg-color-picker Basic Usage

Options

Color Format Examples

Using Debounce in hcg-color-picker

hcg-color-picker Instance Methods

All Methods at a Glance

Events

Color Formats

Multiple Instances

hcg-color-picker React Package

How it compares

Troubleshooting

What is new in v2

Common use cases

Why use this instead of <input type="color">?

Browser Support

Frequently Asked Questions (FAQ)

Related