# vanilla-picker

> A simple, easy to use vanilla JS color picker with alpha selection.

Latest version **2.12.3** (published 2024-03-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install vanilla-picker
pnpm add vanilla-picker
yarn add vanilla-picker
bun add vanilla-picker
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.12.3 |
| Published | 2024-03-23 |
| First published | 2018-02-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 214.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 223 |
| Author | Andreas Borgen |
| Maintainers | sphinxxxx |
| Keywords | ux, ui, color, colour, picker, vanilla, vanilla-js, color picker, color-picker, colorpicker, rgb, rgba, hsl, hsla, hex, alpha |

## Links

- npm: https://www.npmjs.com/package/vanilla-picker
- Repository: https://github.com/Sphinxxxx/vanilla-picker
- Homepage: https://vanilla-picker.js.org
- Issues: https://github.com/Sphinxxxx/vanilla-picker/issues
- npm.io page: https://npm.io/package/vanilla-picker

## Dependencies (1)

- [@sphinxxxx/color-conversion](https://npm.io/package/@sphinxxxx/color-conversion.md) ^2.2.2

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 2.12.3 (latest) — 2024-03-23
- 2.12.2 — 2023-08-20
- 2.12.1 — 2021-10-28
- 2.12.0 — 2021-10-27
- 2.11.2 — 2021-01-23
- 2.11.1 — 2021-01-23
- 2.11.0 — 2020-11-12
- 2.10.1 — 2019-12-29
- 2.10.0 — 2019-09-03
- 2.9.2 — 2019-07-23
- 2.9.1 — 2019-07-17
- 2.9.0 — 2019-06-28
- 2.8.2 — 2019-06-28
- 2.8.1 — 2019-06-09
- 2.8.0 — 2019-04-19
- … 21 more at https://npm.io/package/vanilla-picker/versions

## README

# vanilla-picker

[![License](https://img.shields.io/npm/l/vanilla-picker.svg)](https://github.com/Sphinxxxx/vanilla-picker/blob/master/LICENSE.md)
[![Version](https://img.shields.io/npm/v/vanilla-picker.svg)](https://npmjs.com/vanilla-picker)
[![Size](https://badgen.net/badgesize/gzip/sphinxxxx/vanilla-picker/master/dist/vanilla-picker.min.js?label=min%2Bgzip)](https://unpkg.com/vanilla-picker)
[![Downloads](https://img.shields.io/npm/dm/vanilla-picker.svg)](https://npmjs.com/vanilla-picker)

A simple, easy to use vanilla JS (no dependencies) color picker with alpha selection.

#### Demo

https://codepen.io/Sphinxxxx/pen/zRmKBX


## Getting Started

#### Installing

* For the pros:

  + ```npm install vanilla-picker --save```
  + ```import Picker from 'vanilla-picker';```

* For the rest of us:

```
<script src="https://unpkg.com/vanilla-picker@2"></script>
```

> **_Note:_**
> 
> The script adds a `<style>` element to the page, with all the needed CSS. If your site's [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) doesn't allow that, use the CSP build with a separate CSS file instead:
> ```
> import Picker from 'vanilla-picker/csp';
> import 'vanilla-picker/dist/vanilla-picker.csp.css';
> ```
> ..or
> ```
> <script src="vanilla-picker.csp.min.js"></script>
> <link  href="vanilla-picker.csp.css" rel="stylesheet">
> ```

#### Usage

```html
<div id="parent">Click me</div>

<script>

    /*
        Create a new Picker instance and set the parent element.
        By default, the color picker is a popup which appears when you click the parent.
    */
    var parent = document.querySelector('#parent');
    var picker = new Picker(parent);

    /*
        You can do what you want with the chosen color using two callbacks: onChange and onDone.
    */
    picker.onChange = function(color) {
        parent.style.background = color.rgbaString;
    };

    /* onDone is similar to onChange, but only called when you click 'Ok' */

</script>
```


## API and advanced options

https://vanilla-picker.js.org/gen/Picker.html


## Accessibility

The color picker is built to support basic keyboard navigation and use with screen readers.
I would be very interested in feedback on improvements that could be done here!


## Credits

* Based on https://github.com/dissimulate/Picker by **Adam Brooks**
* Built with https://github.com/Joudee/color-conversion by **Joudee**
* Built with https://gist.github.com/mjackson/5311256 by **Michael Jackson**


## License

The ISC license - see the [LICENSE.md](LICENSE.md) file for details.

---
_Source: https://npm.io/package/vanilla-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._