color-picker - Vaadin Add-on Directory
A picker for color, that can use the native input[![Published on NPM](https://img.shields.io/npm/v/@fooloomanzoo/color-input.svg)](https://www.npmjs.com/package/@fooloomanzoo/color-picker)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@fooloomanzoo/color-picker)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/fooloomanzoocolor-picker)
_[API & Demo](https://fooloomanzoo.github.io/color-picker)_
## <color-picker>
### What is it for?
`color-picker` is a picker for color for **[Polymer](https://github.com/Polymer/polymer)** that can use the **native** input, too. It has the same approach like in [<datetime-picker>](https://fooloomanzoo.github.io/datetime-picker/components/datetime-picker/). If the **native** picker is choosen and is not supported, this element use the **polyfill** color-picker. The `` will come in place if the native picker is not available or is not explicitly wanted. The `value` and `color-string` will give you directly the css-string in the selected `format`.
### Motivation
Internally it tests the browser, if native input-type `color` is supported. You can decide to use the native or the replacements during runtime. `color-element` can also be used separately. By default, the polyfilled version is used.
It might be useful for you to use, if you like to keep the native approach of Browsers on Mobile Devices, or you like to have a different look or you would like to have a guaranteed working **color-picker**. Another use case could be for example, if you want on _mobile devices_ use the native picker, when supported, and on _desktop devices_ this polyfill.
For that purposes the attributes **native** and **native-on-mobile** are provided.
```html
```
### How?
The **[component page](https://fooloomanzoo.github.io/color-picker/components/color-picker/)** explains, which of the attributes you can use and how. You can see there a **[demo](https://fooloomanzoo.github.io/color-picker/components/color-picker/#/elements/color-picker/demos/demo/color-picker.html)**, too.
Examples:
#### color-picker
```html
red: [[r]]
green: [[g]]
blue: [[b]]
native color picker
auto confirm
format
alpha: [[alpha]]
red: [[r]]
green: [[g]]
blue: [[b]]
hue: [[h]]
saturation: [[s]]
lightness: [[l]]