color-picker
<color-picker> is a themable Web Component providing the possibility to select a color using sliders, inputs or palettes.
<color-picker>
<color-picker> is a themable Web Component providing the possibility to select a color using sliders, inputs or palettes.
Example Usage
<color-picker></color-picker>
Credits
Huge credits also go to the developers of TinyColor that is used for the internal color handling, released under the MIT license.
License
Apache License 2.0
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- @polymer/polymer#^3.0.0
- @vaadin/vaadin-control-state-mixin#^2.1.1
- @vaadin/vaadin-element-mixin#^2.0.0
- @vaadin/vaadin-themable-mixin#^1.2.1
- @polymer/iron-resizable-behavior#^3.0.1
- @vaadin/vaadin-button#^2.2.0
- @vaadin/vaadin-checkbox#^2.2.10
- @vaadin/vaadin-icons#^4.3.1
- @vaadin/vaadin-tabs#^3.0.0
- @vaadin/vaadin-text-field#^2.4.4
- @thebespokepixel/es-tinycolor#^1.0.7
- Released
- 2019-09-29
- Maturity
- IMPORTED
- License
- Apache License 2.0
Compatibility
- Framework
- Polymer 3.0+
- Polymer 2.0+ in 0.9.0
- Browser
- Browser Independent
color-picker - Vaadin Add-on Directory
](https://github.com/juchar/color-picker)
## Example Usage
```html
Issue tracker
API Documentation
View on NPM
Online Demo
color-picker version 0.8.1
### Dependencies
* polymer#^2.0.0
* vaadin-themable-mixin#vaadin/vaadin-themable-mixin#^1.2.0
* vaadin-element-mixin#vaadin/vaadin-element-mixin#^2.0.0
* vaadin-lumo-styles#vaadin/vaadin-lumo-styles#^1.4.1
* vaadin-material-styles#vaadin/vaadin-material-styles#^1.2.2
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^2.0.0
* vaadin-text-field#vaadin/vaadin-text-field#^2.4.4
* vaadin-button#vaadin/vaadin-button#^2.2.0
* vaadin-icons#vaadin/vaadin-icons#^4.3.1
* vaadin-tabs#vaadin/vaadin-tabs#^3.0.0
* chroma-js#^2.0.3
* vaadin-checkbox#vaadin/vaadin-checkbox#^2.2.10
color-picker version 0.9.0
Moved from Chroma.js to TinyColor as Chroma.js could not be deployed to webjars.org due to the SPDX expression used for the license.
### Dependencies
* polymer#^2.0.0
* vaadin-themable-mixin#vaadin/vaadin-themable-mixin#^1.2.0
* vaadin-element-mixin#vaadin/vaadin-element-mixin#^2.0.0
* vaadin-lumo-styles#vaadin/vaadin-lumo-styles#^1.4.1
* vaadin-material-styles#vaadin/vaadin-material-styles#^1.2.2
* iron-resizable-behavior#PolymerElements/iron-resizable-behavior#^2.0.0
* vaadin-text-field#vaadin/vaadin-text-field#^2.4.4
* vaadin-button#vaadin/vaadin-button#^2.2.0
* vaadin-icons#vaadin/vaadin-icons#^4.3.1
* vaadin-tabs#vaadin/vaadin-tabs#^3.0.0
* vaadin-checkbox#vaadin/vaadin-checkbox#^2.2.10
* tinycolor#bgrins/TinyColor#^1.4.1
color-picker version 2.0.0-alpha.1
### Dependencies
* @polymer/polymer#^3.3.0
* @polymer/iron-resizable-behavior#^3.0.1
* @vaadin/vaadin-button#^2.2.0
* @vaadin/vaadin-checkbox#^2.2.10
* @vaadin/vaadin-icons#^4.3.1
* @vaadin/vaadin-tabs#^3.0.0
* @vaadin/vaadin-text-field#^2.4.4
* tinycolor2#^1.4.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-themable-mixin#^1.4.4
* @vaadin/vaadin-control-state-mixin#^2.1.3
color-picker version 2.0.0-alpha.2
### Dependencies
* @polymer/polymer#^3.3.0
* @polymer/iron-resizable-behavior#^3.0.1
* @vaadin/vaadin-button#^2.2.0
* @vaadin/vaadin-checkbox#^2.2.10
* @vaadin/vaadin-icons#^4.3.1
* @vaadin/vaadin-tabs#^3.0.0
* @vaadin/vaadin-text-field#^2.4.4
* tinycolor2#^1.4.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-themable-mixin#^1.4.4
* @vaadin/vaadin-control-state-mixin#^2.1.3
color-picker version 2.0.0-alpha.3
### Dependencies
* @polymer/polymer#^3.3.0
* @polymer/iron-resizable-behavior#^3.0.1
* @vaadin/vaadin-button#^2.2.0
* @vaadin/vaadin-checkbox#^2.2.10
* @vaadin/vaadin-icons#^4.3.1
* @vaadin/vaadin-tabs#^3.0.0
* @vaadin/vaadin-text-field#^2.4.4
* tinycolor2#^1.4.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-themable-mixin#^1.2.0
* @vaadin/vaadin-control-state-mixin#^2.1.3
color-picker version 2.0.0-alpha.4
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-control-state-mixin#^2.1.1
* @vaadin/vaadin-element-mixin#^2.0.0
* @vaadin/vaadin-themable-mixin#^1.2.1
* @polymer/iron-resizable-behavior#^3.0.1
* @vaadin/vaadin-button#^2.2.0
* @vaadin/vaadin-checkbox#^2.2.10
* @vaadin/vaadin-icons#^4.3.1
* @vaadin/vaadin-tabs#^3.0.0
* @vaadin/vaadin-text-field#^2.4.4
* tinycolor2#^1.4.1
color-picker version 2.0.0-alpha.5
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-control-state-mixin#^2.1.1
* @vaadin/vaadin-element-mixin#^2.0.0
* @vaadin/vaadin-themable-mixin#^1.2.1
* @polymer/iron-resizable-behavior#^3.0.1
* @vaadin/vaadin-button#^2.2.0
* @vaadin/vaadin-checkbox#^2.2.10
* @vaadin/vaadin-icons#^4.3.1
* @vaadin/vaadin-tabs#^3.0.0
* @vaadin/vaadin-text-field#^2.4.4
* tinycolor2#^1.4.1
color-picker version 2.0.0-alpha.6
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-control-state-mixin#^2.1.1
* @vaadin/vaadin-element-mixin#^2.0.0
* @vaadin/vaadin-themable-mixin#^1.2.1
* @polymer/iron-resizable-behavior#^3.0.1
* @vaadin/vaadin-button#^2.2.0
* @vaadin/vaadin-checkbox#^2.2.10
* @vaadin/vaadin-icons#^4.3.1
* @vaadin/vaadin-tabs#^3.0.0
* @vaadin/vaadin-text-field#^2.4.4
* tinycolor2#^1.4.1
color-picker version 2.0.0-alpha.7
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-control-state-mixin#^2.1.1
* @vaadin/vaadin-element-mixin#^2.0.0
* @vaadin/vaadin-themable-mixin#^1.2.1
* @polymer/iron-resizable-behavior#^3.0.1
* @vaadin/vaadin-button#^2.2.0
* @vaadin/vaadin-checkbox#^2.2.10
* @vaadin/vaadin-icons#^4.3.1
* @vaadin/vaadin-tabs#^3.0.0
* @vaadin/vaadin-text-field#^2.4.4
* tinycolor2#^1.4.1
color-picker version 2.0.0-alpha.8
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-control-state-mixin#^2.1.1
* @vaadin/vaadin-element-mixin#^2.0.0
* @vaadin/vaadin-themable-mixin#^1.2.1
* @polymer/iron-resizable-behavior#^3.0.1
* @vaadin/vaadin-button#^2.2.0
* @vaadin/vaadin-checkbox#^2.2.10
* @vaadin/vaadin-icons#^4.3.1
* @vaadin/vaadin-tabs#^3.0.0
* @vaadin/vaadin-text-field#^2.4.4
* tinycolor2#^1.4.1
color-picker version 2.0.0-alpha.10
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-control-state-mixin#^2.1.1
* @vaadin/vaadin-element-mixin#^2.0.0
* @vaadin/vaadin-themable-mixin#^1.2.1
* @polymer/iron-resizable-behavior#^3.0.1
* @vaadin/vaadin-button#^2.2.0
* @vaadin/vaadin-checkbox#^2.2.10
* @vaadin/vaadin-icons#^4.3.1
* @vaadin/vaadin-tabs#^3.0.0
* @vaadin/vaadin-text-field#^2.4.4
* @thebespokepixel/es-tinycolor#^1.0.7
color-picker version 2.0.0-alpha.9
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-control-state-mixin#^2.1.1
* @vaadin/vaadin-element-mixin#^2.0.0
* @vaadin/vaadin-themable-mixin#^1.2.1
* @polymer/iron-resizable-behavior#^3.0.1
* @vaadin/vaadin-button#^2.2.0
* @vaadin/vaadin-checkbox#^2.2.10
* @vaadin/vaadin-icons#^4.3.1
* @vaadin/vaadin-tabs#^3.0.0
* @vaadin/vaadin-text-field#^2.4.4
* @thebespokepixel/es-tinycolor#^1.0.7
color-picker version 2.0.0-beta.1
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-control-state-mixin#^2.1.1
* @vaadin/vaadin-element-mixin#^2.0.0
* @vaadin/vaadin-themable-mixin#^1.2.1
* @polymer/iron-resizable-behavior#^3.0.1
* @vaadin/vaadin-button#^2.2.0
* @vaadin/vaadin-checkbox#^2.2.10
* @vaadin/vaadin-icons#^4.3.1
* @vaadin/vaadin-tabs#^3.0.0
* @vaadin/vaadin-text-field#^2.4.4
* @thebespokepixel/es-tinycolor#^1.0.7