What it does
vanilla-picker is an ISC-licensed JavaScript colour popup with alpha selection. Its separate live-change and confirmation callbacks support an editor that previews a choice before committing it.
Attach the picker to a parent element, choose the starting colour and set its position. A popup can sit on any side of the parent; disabling popup mode embeds it as a normal child. The text editor can show HEX, HSL or RGB while still accepting other supported input forms.
Use onChange for a preview and onDone for the OK action. A silent setColor update can restore an application value without firing another change callback. Returned values include CSS strings and numerical arrays.
The default build inserts its CSS through a style element. Where a content-security policy prevents that, the documented CSP build uses a separately linked stylesheet. The open-source package has no runtime dependencies.
Strengths
- Live preview and confirmed selection have separate callbacks.
- The same component supports popup and embedded layouts.
- A separate build accommodates restrictions on injected styles.
Watch out for
- The default stylesheet injection may conflict with a strict content-security policy.
Best for
- Small browser editors with colour previews and an OK action
Sources
- vanilla-picker installation and CSP guide (Oct 27, 2026)
- Picker options, callbacks and returned formats (Oct 27, 2026)
- vanilla-picker repository and ISC licence (Oct 27, 2026)