color-input
an input for color values
<color-input>
An input for color. It can use the formats rgb
, hsl
or hex
. Additionally you can use text
for automatically transform a color-string like red
to its rgb-representation.
If you are looking for a picker for color, please have a look at color-picker.
Example
<span>color-input: </span><color-input value="{{color}}" alpha="{{alpha}}" r="{{r}}" g="{{g}}" b="{{b}}" h="{{h}}" s="{{s}}" l="{{l}}" format="{{format}}"></color-input>
<br>
<br>
<span>color-text-input: </span><color-text-input value="{{color}}" alpha="{{alpha}}" format="{{format}}"></color-text-input>
<p>
<span>format </span>
<select id="formats" value="{{format::change}}">
<option value="auto">auto</option>
<option value="rgb">rgb</option>
<option value="hex">hex</option>
<option value="hsl">hsl</option>
</select>
<br>
<input type="range" min="0" max="1" step="0.01" value="{{alpha::change}}"><span> alpha: [[alpha]] </span>
<br>
<input type="range" min="0" max="255" step="1" value="{{r::input}}"><span> red: [[r]] </span>
<br>
<input type="range" min="0" max="255" step="1" value="{{g::input}}"><span> green: [[g]] </span>
<br>
<input type="range" min="0" max="255" step="1" value="{{b::input}}"><span> blue: [[b]] </span>
<br>
<input type="range" min="0" max="359" step="1" value="{{h::input}}"><span> hue: [[h]] </span>
<br>
<input type="range" min="0" max="1" step="0.001" value="{{s::input}}"><span> saturation: [[s]] </span>
<br>
<input type="range" min="0" max="1" step="0.001" value="{{l::input}}"><span> lightness: [[l]] </span>
<br>
</p>
Styling
Have a look at input-picker-pattern#input-shared-style to see how to style the element.
Installation
npm i --save @fooloomanzoo/color-input
License
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
- @fooloomanzoo/input-picker-pattern#^3.0.10
- @fooloomanzoo/number-input#^3.0.10
- @fooloomanzoo/property-mixins#^3.0.10
- @fooloomanzoo/text-input#^3.0.8
- @polymer/polymer#^3
- Released
- 2018-11-17
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 3.0+
- Browser
- Browser Independent
color-input - Vaadin Add-on Directory
an input for color valuescolor-text-input:
format
alpha: [[alpha]]
red: [[r]]
green: [[g]]
blue: [[b]]
hue: [[h]]
saturation: [[s]]
lightness: [[l]]
View on NPM
color-input version 2.1.3
### Dependencies
* @polymer/polymer#^2
* @fooloomanzoo/input-picker-pattern#^2
* @fooloomanzoo/number-input#^2
* @fooloomanzoo/text-input#^2
* @fooloomanzoo/property-mixins#^2
color-input version 2.1.4
### Dependencies
* @polymer/polymer#^2
* @fooloomanzoo/input-picker-pattern#^2
* @fooloomanzoo/number-input#^2
* @fooloomanzoo/text-input#^2
* @fooloomanzoo/property-mixins#^2
color-input version 2.1.5
### Dependencies
* @polymer/polymer#^2
* @fooloomanzoo/input-picker-pattern#^2
* @fooloomanzoo/number-input#^2
* @fooloomanzoo/text-input#^2
* @fooloomanzoo/property-mixins#^2
color-input version 2.1.6
### Dependencies
* @polymer/polymer#^2.6.1
* @fooloomanzoo/input-picker-pattern#^2
* @fooloomanzoo/number-input#^2
* @fooloomanzoo/text-input#^2
* @fooloomanzoo/property-mixins#^2
color-input version 2.1.7
### Dependencies
* @polymer/polymer#^2.6.1
* @fooloomanzoo/input-picker-pattern#^2
* @fooloomanzoo/number-input#^2
* @fooloomanzoo/text-input#^2
* @fooloomanzoo/property-mixins#^2
color-input version 3.0.0
### Dependencies
* @polymer/polymer#^3
* @fooloomanzoo/input-picker-pattern#^3
* @fooloomanzoo/number-input#^3
* @fooloomanzoo/text-input#^3
* @fooloomanzoo/property-mixins#^3
color-input version 3.0.1
### Dependencies
* @polymer/polymer#^3
* @fooloomanzoo/input-picker-pattern#^3
* @fooloomanzoo/number-input#^3
* @fooloomanzoo/text-input#^3
* @fooloomanzoo/property-mixins#^3
color-input version 3.0.2
### Dependencies
* @fooloomanzoo/input-picker-pattern#^3.0.8
* @fooloomanzoo/number-input#^3.0.4
* @fooloomanzoo/property-mixins#^3
* @fooloomanzoo/text-input#^3.0.6
* @polymer/polymer#^3
color-input version 3.0.3
### Dependencies
* @fooloomanzoo/input-picker-pattern#^3.0.8
* @fooloomanzoo/number-input#^3.0.9
* @fooloomanzoo/property-mixins#^3.0.9
* @fooloomanzoo/text-input#^3.0.7
* @polymer/polymer#^3
color-input version 3.0.4
### Dependencies
* @fooloomanzoo/input-picker-pattern#^3.0.10
* @fooloomanzoo/number-input#^3.0.10
* @fooloomanzoo/property-mixins#^3.0.10
* @fooloomanzoo/text-input#^3.0.8
* @polymer/polymer#^3