Contact us Create app

Directory

← Back

color-input

an input for color values

Author

Rating

Links

Popularity

<100

Published on NPM Published on webcomponents.org

API & Demo

<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

MIT

Compatibility

(Loading compatibility data...)

Last updated: 2000-01-01

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 values color-input - Vaadin Add-on Directory
[![Published on NPM](https://img.shields.io/npm/v/@fooloomanzoo/color-input.svg)](https://www.npmjs.com/package/@fooloomanzoo/color-input) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@fooloomanzoo/color-input) _[API & Demo](https://fooloomanzoo.github.io/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](https://github.com/fooloomanzoo/color-picker). ### Example ```html color-input:

color-text-input:

format
alpha: [[alpha]]
red: [[r]]
green: [[g]]
blue: [[b]]
hue: [[h]]
saturation: [[s]]
lightness: [[l]]

``` ### Styling Have a look at [input-picker-pattern#input-shared-style](https://github.com/fooloomanzoo/input-picker-pattern#input-shared-style) to see how to style the element. ### Installation ``` npm i --save @fooloomanzoo/color-input ``` ### License [MIT](https://github.com/fooloomanzoo/color-input/blob/master/LICENSE.txt)
View on GitHub
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

Online