Best JavaScript Color Pickers (Zero-Dependency, Open Source)

Picking a color picker sounds like a five-minute decision, and then you open a dependency tree full of jQuery, React wrappers and „lightweight“ libraries that weigh more than your whole app. If you just need a solid color picker that adds nothing to your bundle except the picker itself, you’ve come to the right place.

The good news is that the vanilla JavaScript ecosystem has quietly become excellent at this. Libraries like Coloris and @thednp/color-picker ship zero-dependency pickers in a handful of kilobytes, with full keyboard support, alpha channels and dark mode — no build step required. This guide covers the best of them: what each one does well, what it weighs, and a short code example so you can try it in about sixty seconds.

The short version: reach for Coloris if you want an accessible input-based picker that just works, vanilla-colorful if you want a 2.7 kB web component, @thednp/color-picker for a feature-rich TypeScript component, Pickr for the battle-tested classic, and iro.js if you want a color wheel. The rest of this guide explains why, and throws in a few hidden gems along the way.

What started this? Just another deep-dive result, while exploring options for a fresh project !

Why Use a JavaScript Color Picker Instead of the Native One?

Browsers have shipped a native input type="color" for over a decade now, so why bother with a library? Because the native control is deliberately limited:

• No alpha channel — the native picker can’t do transparency, and you’ll end up hand-rolling an opacity slider anyway
• Inconsistent UI — every browser draws its own dialog, so the „same“ control looks different for every visitor
• No output formats — you get a hex value, period. No HSL, HSLA, RGB or CMYK output for your design tools
• No styling — you can’t theme the native dialog to match your app, and dark mode is out of your hands
• No swatches or presets — brand palettes, recent colors, quick picks: none of that exists natively

A good zero-dependency picker fixes all of that in a few kilobytes. The libraries below are all open source, framework-agnostic, and small enough that you don’t have to feel guilty about shipping them. Download numbers and maintenance dates are as of September 2026.

The Zero-Dependency All-Rounders

These are the pickers that handle the everyday jobs — binding to inputs, living inside forms, supporting alpha and dark mode — without dragging in a single dependency.

Coloris — The Accessible All-Rounder

Coloris is exactly the kind of library you hope to find: written in vanilla ES6, zero dependencies, MIT licensed, and genuinely accessible. It converts any text input into a color field via a single data-coloris attribute, and it’s the picker I reach for when I need something to drop into a form without ceremony.

• Size: ~14.3 kB minified JS (~5.4 kB gzipped) + ~8.5 kB CSS
• License: MIT | Version: 0.25.0 | Downloads: ~186k/month via the @melloware/coloris npm fork
• Works on all modern browsers, full WAI-ARIA keyboard support, touch friendly
• Themes plus automatic light/dark mode, opacity support, swatches and format toggles (hex/rgb/hsl)
• Inline widget mode and per-selector instance configuration via Coloris.setInstance()

Want dark mode or no alpha? Configure it at runtime:

Perfect for: forms, admin panels and any project where you want a polished, accessible picker that binds straight to an input — with almost zero configuration.

The catch: you need to ship both the JS and the CSS file, and there is one physical picker instance per page (though virtual per-selector instances via setInstance cover most real needs).

Pickr — The Battle-Tested Classic

Pickr is the picker you’ve almost certainly seen in tutorials and admin dashboards since 2018. No dependencies, no jQuery, and it supports everything from alpha and swatches to CMYK output and even selection inside shadow DOM. It’s the most feature-complete zero-dependency picker in this list.

• Size: ~23 kB minified JS (~8.2 kB gzipped) + a separate theme CSS file
• License: MIT | Version: 1.10.1 | Downloads: ~1.23M/month
• Three themes (classic, monolith, nano), responsive and auto-positioning popup
• Output in hex, RGBA, HSLA, HSVA and CMYK; swatches, preview and comparison built in
• Accessible with i18n labels, plus shadow DOM support for embedded widgets

Heads up: the project is in maintenance mode as of v1.10 — the author keeps shipping security and bug fixes but the feature set is frozen. For a stable, battle-tested picker that’s perfectly fine; just don’t expect new features.

Perfect for: projects that need the full toolbox — multiple color formats, swatches, opacity, theming — and prefer a proven, widely used library over the newest thing.

vanilla-picker — Simple Popup With Alpha

vanilla-picker is a straightforward, no-nonsense popup picker with a color wheel and alpha slider. You attach it to any element, get two callbacks (onChange and onDone), and read the color back as hex, RGB or HSL strings plus their alpha variants. The npm package even ships a special CSP build that keeps its styles in a separate file.

• Size: ~18.5 kB minified JS (~6.6 kB gzipped), styles injected automatically
• License: ISC | Version: 2.12.3 | Downloads: ~2.35M/month
• Popup opens on click of any parent element; basic keyboard and screen reader support
• Color object exposes hexString, rgbString, hslString, rgbaString and more

Perfect for: quick popup color selection on buttons or swatches where you want a wheel, alpha support and nothing else.

iro.js — The Color Wheel Specialist

iro.js is the design-conscious option: a modern, SVG-based color wheel that needs no separate CSS file at all. Everything — wheel, sliders, layout — ships in one script, and its color object handles hex, RGB, HSL, HSV and even color temperature in Kelvin. It also supports multiple colors in one picker, which is brilliant for building harmony and theme pickers.

• Size: ~28 kB minified (~10 kB gzipped), zero CSS files needed
• License: MPL 2.0 | Version: 5.5.2 | Downloads: ~246k/month
• Wheel plus optional sliders, custom layouts, multi-color selections and Kelvin temperatures
• Event-based API (color:change, input:start, and more)

Heads up: the maintainer put the project on hiatus, so expect a stable, mature library rather than active new development. It remains extremely popular and dependency-free.

Perfect for: design tools, theme pickers and anywhere a color wheel makes the interaction feel natural — with zero CSS overhead.

Web Component and Custom Element Pickers

If you build with React, Vue, Svelte or Angular — or just want the cleanest possible markup — the web component pickers are the way to go. No wrapper packages, no framework adapters: the picker is just an HTML element.

vanilla-colorful — The 2.7 kB Custom Element

vanilla-colorful is a port of the famous react-colorful to native custom elements, and it’s about as small as a real color picker gets: 2.7 kB minified and gzipped for the base hex picker. It ships a whole family of elements — hex-color-picker, rgba-color-picker, hsl-color-picker, hex-input and more — each importable on its own so you only ever pay for what you use.

• Size: 2.7 kB gzipped (base hex picker), per-element imports keep bundles lean
• License: MIT | Version: 0.7.2 | Downloads: ~2.5M/month
• Strict TypeScript with 100% test coverage and WAI-ARIA labels baked in
• Shadow DOM with CSS ::part() styling hooks, works in every major framework

Perfect for: framework projects and anyone who wants a tiny, typed, standards-based picker with a declarative HTML API.

The catch: requires modern browsers with Custom Elements and Shadow DOM support — no IE11 or legacy Edge, which is a non-issue for most projects in 2026.

@thednp/color-picker — Feature-Rich TypeScript Component

@thednp/color-picker is the modern, TypeScript-sourced component with an unusually long feature list: WAI-ARIA compliance, keyboard and touch support, RTL languages, automatic repositioning, and color formats from HEX and RGB(A) to HSL(A) and HWB. It can pull palettes from your own presets or generate them from keywords, and everything is configurable through a DATA API as well as JavaScript.

• Size: ~10 kB minified and gzipped (per the project), TypeScript typed
• License: MIT | Version: 2.0.4 | Downloads: ~8.4k/month
• Its two runtime helpers (@thednp/color, @thednp/shorty) are small same-author packages — no frameworks involved
• Framework-agnostic with SCSS sources and minimal styling required

Perfect for: developers who want TypeScript types, an accessible component, and a picker that plays nicely with presets and internationalized UIs.

toolcool-color-picker — Zero-Config Custom Element

toolcool-color-picker is a TypeScript custom element that works straight out of the box: add the tag, add the script, done. Colors can be set and read back in hex, RGB, HSL or HSV (each with alpha), the popup position is configurable, and the whole look is themeable with CSS variables. There’s even an inline mode for design tools.

• Size: ~48 kB minified JS (~11 kB gzipped)
• License: MIT | Version: 1.0.15 | Downloads: ~500/month
• Custom element, so it works in React, Vue, Svelte and vanilla HTML alike
• Style via CSS variables; button size presets from sm to 4xl

Perfect for: a no-fuss custom element that needs zero configuration and supports every color format you can throw at it.

The catch: a much smaller community than the bigger names on this list, so you’ll lean on its docs rather than a huge stack of forum answers.

hcg-color-picker — Chrome DevTools Style

hcg-color-picker recreates the familiar Chrome DevTools color picker: a saturation/lightness box with hue and alpha sliders, HEX/RGBA/HSLA input fields, and an EyeDropper button. It’s dependency-free, supports multiple independent instances from one shared UI, and its trigger buttons always expose the current color via a data-color attribute — handy when you don’t want to keep instance references around.

• Size: ~22.8 kB minified JS (~6.5 kB gzipped) + small CSS file
• License: MIT | Version: 2.0.6 | Downloads: ~130/month
• Chrome-style UI that users already know; alpha can be enabled per instance
• EyeDropper API support in Chrome/Edge, touch events, programmatic open/close/destroy

Perfect for: tools that want the instantly recognizable Chrome picker UX, multi-button pickers on one page, and screen color sampling.

The catch: it’s the youngest project here — brand new in 2026 — so treat it as a rising option rather than a decade-old workhorse.

Minimal and Classic Options

Huebee — One-Click Color Grid

Huebee is a completely different take from the folks at Metafizzy (the team behind Isotope and Flickity): a one-click color picker that shows a grid of colors instead of a wheel with sliders. Click once to open, click again to pick. If your users are choosing from a curated set of hues and shades rather than hunting for an exact value, this is the fastest possible UI — and it’s delightfully tiny.

• Size: ~15 kB single-file build (huebee.pkgd.min.js) plus a ~1 kB CSS file
• License: MIT (v2) | Version: 2.1.1 | Downloads: ~11k/month
• Grid of hues, shades and saturations; custom colors and notations (shortHex, hex, hsl)
• Can auto-set the text and background color of the anchor element

Perfect for: settings screens, filters and any UI where users pick a „shade“ rather than an exact pixel-perfect color.

The catch: development is light — the last release was a while ago — and there’s no alpha support. It does one thing and does it well.

jscolor — The Veteran (License Check Required)

jscolor has been around since 2010, is a single file of plain JavaScript with zero dependencies, and has powered countless commercial websites over the years. You drop in one script, add a data-jscolor attribute, and get a configurable picker with alpha, palettes and mobile support. Its big configurator tool is genuinely handy for fine-tuning options visually.

• Size: ~62 kB minified JS (~13.8 kB gzipped), single file, no CSS required
• License: GNU GPL v3 for open source projects — or a paid commercial license for proprietary use | Version: 2.5.2 | Downloads: ~64k/month
• Supports hex, #rrggbbaa, RGB and RGBA; custom palettes; touch events
• Global presets so every picker on the page shares your defaults

Perfect for: GPL-compatible open source projects that want a battle-tested single-file picker with decades of real-world usage.

Heads up on licensing: jscolor is the only picker on this list that isn’t permissively licensed. If your project isn’t GPL v3 compatible, you need to buy a commercial license — budget for that before you build on it. The other nine options above are free to use in commercial projects under MIT, ISC or MPL 2.0.

Also Worth a Look (With Caveats)

• Spectrum — the legendary picker that every 2015 tutorial used. It’s MIT licensed but jQuery-based (even the maintained spectrum-colorpicker2 continues that API), which fails the zero-dependency requirement for modern apps. If you’re already locked into jQuery for legacy reasons, it still works fine.
• react-colorful — the inspiration for vanilla-colorful. Excellent and tiny, but it expects React or Preact. Vanilla users should grab vanilla-colorful instead and get the same UI with zero framework requirement.

JavaScript Color Pickers Compared

Sizes are minified and gzipped JavaScript as measured on the npm packages in September 2026. CSS files are extra where noted.

Library	License	Size (JS, gzipped)	Dependencies	Best for
Coloris	MIT	~5.4 kB (+ CSS)	None	Accessible input-based pickers
vanilla-colorful	MIT	2.7 kB	None	Tiny custom elements
Pickr	MIT	~8.2 kB (+ theme CSS)	None	Feature-rich classic
iro.js	MPL 2.0	~10 kB	None	Color wheel, no CSS
vanilla-picker	ISC	~6.6 kB	None	Simple popup with alpha
@thednp/color-picker	MIT	~10 kB	2 small same-author helpers	TypeScript + accessibility
toolcool-color-picker	MIT	~11 kB	None	Zero-config custom element
hcg-color-picker	MIT	~6.5 kB (+ CSS)	None	Chrome-style UI, EyeDropper
Huebee	MIT	~5 kB (single file + CSS)	None in the single-file build	One-click color grid
jscolor	GPL v3 / commercial	~13.8 kB	None	GPL-compatible legacy projects

Which Color Picker Is Right for You?

• Just want a form field with a great picker: Coloris. One attribute, fully accessible, handles dark mode and alpha for you.
• Building with React, Vue, Svelte or Angular: vanilla-colorful or toolcool-color-picker — custom elements drop into any framework with no adapter.
• Need every format, swatches, CMYK and maximum flexibility: Pickr is still the most feature-complete zero-dependency picker around.
• Design tools and color wheels: iro.js, especially if you want zero CSS overhead or multi-color harmony picking.
• TypeScript codebase with strict accessibility requirements: @thednp/color-picker.
• Chrome-style UX that users instantly recognize: hcg-color-picker.
• Choosing between preset shades, not exact colors: Huebee.
• GPL-compatible project needing a proven single file: jscolor — but verify the license first.

Glossary

Color picker

A UI control that lets users choose a color, usually by manipulating a wheel, sliders or a grid and reading back a value in hex, RGB, HSL or another format.

Alpha channel / opacity

The transparency component of a color, from 0 (fully transparent) to 1 (fully opaque). Picker libraries expose it as a slider when they support formats like RGBA or HSLA.

Web component / custom element

A standards-based HTML element you can define yourself, such as hex-color-picker. Web components encapsulate their own markup and styles, work in any framework, and need no wrapper library.

WAI-ARIA

The accessibility standard for web widgets. A WAI-ARIA compliant picker can be operated with a keyboard and announced correctly by screen readers.

Hex color

A color written as #rrggbb (red, green, blue in hexadecimal), optionally extended to #rrggbbaa to include an alpha channel.

HSL / HSV / HSVA

Color models that describe colors by hue, saturation and lightness (or value). Many pickers let you switch output between these and RGB/hex.

EyeDropper API

A browser API that lets users sample any color from their screen. Supported in Chrome and Edge; Firefox and Safari support varies.

Tree shaking

A bundler optimization that drops unused code. Pickers that ship per-element files, like vanilla-colorful, tree-shake beautifully because you import only the element you need.

GPL v3

A strong copyleft license. Code under GPL v3 can be used freely in open source projects, but including it in a proprietary product usually means your whole project must adopt GPL terms — or you buy a commercial license.

FAQ