hcg-color-picker - Live Demo

Interactive demos of hcg-color-picker, a lightweight zero-dependency Chrome-style color picker for vanilla JavaScript. Try alpha channel, debounced callbacks, scroll-aware positioning, programmatic control, and multiple triggers sharing one popup. hcg-color-picker - Full documentation

1. Basic picker with alpha

Click the swatch to open the picker. Switch between HEX, RGB, and HSL inputs inside the panel. Use the eye dropper (Chrome/Edge) or hover the preview to copy.

Try it Brand color

#4338caff

View usage code

<button id="picker" type="button" data-color="#4338ca"></button>

const picker = new hcgColor(document.getElementById("picker"), {
  color: "#4338ca",
  onChange: (colors) => console.log(colors.hexa)
});

2. Without alpha channel

Pass alpha: false to hide the alpha slider and force opaque 6-digit hex output.

Try it Solid fill

#09b94f

View usage code

new hcgColor(document.getElementById("picker-no-alpha"), {
  color: "#09b94f",
  alpha: false,
  onChange: (colors) => console.log(colors.hex)
});

3. Debounced change callback

Set debounce (milliseconds) to limit how often onChange fires while dragging sliders.

Try it Accent (150 ms debounce)

#e11d48ff

Change events fired: 0

View usage code

new hcgColor(document.getElementById("picker-debounce"), {
  color: "#e11d48",
  debounce: 150,
  onChange: (colors, source) => {
    console.log("debounced:", colors.hexa, source);
  }
});

4. Inside a scroll container

The popup repositions on scroll and flips above the trigger when there is not enough room below.

Try it — scroll this box first

Scroll down, then open the picker to test positioning.

#2563ebff

View usage code

<!-- Works inside overflow containers; repositions on scroll -->
new hcgColor(document.getElementById("picker-scroll"), { color: "#2563eb" });

5. Programmatic API

Control the picker with open(), close(), setColor(), getColor(), and disable() / enable().

Controls Theme color

#7c3aedff

isOpen: false

View usage code

const api = new hcgColor(document.getElementById("picker-api"), { color: "#7c3aed" });

api.open();
api.close();
api.setColor("#ff0000");
const colors = api.getColor();
api.disable();
api.enable();

6. Open, close, and change events

Subscribe with .on("change"), .on("open"), and .on("close"). The change callback receives a color object and a source string.

Try it Event source demo

#d97706ff

View usage code

const picker = new hcgColor(document.getElementById("picker-events"), { color: "#d97706" });

picker.on("open", () => console.log("opened"));
picker.on("close", () => console.log("closed"));
picker.on("change", (colors, source) => {
  console.log(colors.hexa, source); // drag | input | api | eyedropper
});

7. Multiple pickers, one popup

Every instance shares a single floating panel for a smaller DOM footprint. Only one picker can be open at a time.

Try it

Last changed: —

View usage code

new hcgColor(document.getElementById("picker-m1"), { color: "#ef4444", onChange: onAnyChange });
new hcgColor(document.getElementById("picker-m2"), { color: "#22c55e", onChange: onAnyChange });
new hcgColor(document.getElementById("picker-m3"), { color: "#3b82f6", onChange: onAnyChange });

8. Event log

All demos above write to this log so you can see debouncing, open/close, and color values in real time.

Live output