# @npm-polymer/paper-swatch-picker

> A color picker element using all the Material Design colours

Latest version **2.0.0** (published 2017-06-03) · http://polymer.github.io/LICENSE.txt license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @npm-polymer/paper-swatch-picker
pnpm add @npm-polymer/paper-swatch-picker
yarn add @npm-polymer/paper-swatch-picker
bun add @npm-polymer/paper-swatch-picker
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2017-06-03 |
| First published | 2017-06-03 |
| Weekly downloads | 0 |
| License | http://polymer.github.io/LICENSE.txt |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 40 |
| Maintainers | npm-polymer |
| Keywords | web-components, polymer, color, picker |

## Links

- npm: https://www.npmjs.com/package/@npm-polymer/paper-swatch-picker
- Repository: https://github.com/PolymerElements/paper-swatch-picker
- Issues: https://github.com/PolymerElements/paper-swatch-picker/issues
- npm.io page: https://npm.io/package/@npm-polymer/paper-swatch-picker

## Dependencies (7)

- [@npm-polymer/polymer](https://npm.io/package/@npm-polymer/polymer.md) 2.0.1
- [@npm-polymer/paper-item](https://npm.io/package/@npm-polymer/paper-item.md) 1.2.2
- [@npm-polymer/paper-listbox](https://npm.io/package/@npm-polymer/paper-listbox.md) 2.0.0
- [@npm-polymer/iron-flex-layout](https://npm.io/package/@npm-polymer/iron-flex-layout.md) 1.3.7
- [@npm-polymer/iron-iconset-svg](https://npm.io/package/@npm-polymer/iron-iconset-svg.md) 1.1.1
- [@npm-polymer/paper-icon-button](https://npm.io/package/@npm-polymer/paper-icon-button.md) 1.1.6
- [@npm-polymer/paper-menu-button](https://npm.io/package/@npm-polymer/paper-menu-button.md) 2.0.0

## 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.0.0 (latest) — 2017-06-03

## README

<!---

This README is automatically generated from the comments in these files:
paper-swatch-picker.html

Edit those files, and our readme bot will duplicate them over here!
Edit this file, and the bot will squash your changes :)

The bot does some handling of markdown. Please file a bug if it does the wrong
thing! https://github.com/PolymerLabs/tedium/issues

-->

_[Demo and API docs](https://elements.polymer-project.org/elements/paper-swatch-picker)_


##&lt;paper-swatch-picker&gt;

This is a simple color picker element that will allow you to choose one
of the Material Design colors from a list of available swatches.

Example:

```html
<paper-swatch-picker></paper-swatch-picker>

<paper-swatch-picker color="{{selectedColor}}"></paper-swatch-picker>
```

You can configure the color palette being used using the `colorList` array and
the `columnCount` property, which specifies how many "generic" colours (i.e. columns
in the picker) you want to display.

```html
<paper-swatch-picker column-count=5 color-list='["#65a5f2", "#83be54", "#f0d551", "#e5943c", "#a96ddb"]'></paper-swatch-picker>
```

### Styling

The following custom properties and mixins are available for styling:

| Custom property | Description | Default |
| --- | --- | --- |
| `--paper-swatch-picker-color-size` | The size of each of the color boxes | `20px` |
| `--paper-swatch-picker-icon-size` | The size of the color picker icon | `24px` |
| `--paper-swatch-picker-icon` | Mixin applied to the color picker icon | `{}` |

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