causeway-standard-theme/causeway/docs/components/form-fields/forms-color.html

<div>
  <a id="forms-color"></a>
  <header class="content-header">
    <h1 class="title">
      Color
    </h1>
  </header>
  <p>A color component allows user to select a color within the application.</p>
  <h3 class="title">Default</h3>
  <form>
    <div class="form-group color">
      <label for="color1">Select a color: </label>
      <div class="input-group">
        <input type="text" id="color1" class="form-control" value='#cc3333'/>
        <span class="color-drop"></span>
        <span class="add-on"><span class="color-picker"></span></span>
      </div>
    </div>
    <div class="form-group color">
      <label for="color2">Select a color: </label>
      <div class="input-group">
        <input type="text" id="color2" class="form-control" value='red' data-color-set='{"colors":"ffffff, ebebeb, e1e1e1, d7d7d7, cccccc, c2c2c2, b7b7b7, acacac, a0a0a0, 959595, 898989, 7d7d7d, 707070, 626262, 555555, 464646, 363636, 262626, 111111, 000000"}'/>
        <span class="color-drop"></span>
        <span class="add-on"><span class="color-picker"></span></span>
      </div>
    </div>
  </form>

  <pre><code>
    &lt;form&gt;
    &lt;div class=&quot;form-group color&quot;&gt;
      &lt;label for=&quot;color1&quot;&gt;Select a color: &lt;/label&gt;
      &lt;div class=&quot;input-group&quot;&gt;
        &lt;input type=&quot;text&quot; id=&quot;color1&quot; class=&quot;form-control&quot; value='#cc3333'/&gt;
        &lt;span class=&quot;color-drop&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;add-on&quot;&gt;&lt;span class=&quot;color-picker&quot;&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group color&quot;&gt;
      &lt;label for=&quot;color2&quot;&gt;Select a color: &lt;/label&gt;
      &lt;div class=&quot;input-group&quot;&gt;
        &lt;input type=&quot;text&quot; id=&quot;color2&quot; class=&quot;form-control&quot; value='red' data-color-set='{&quot;colors&quot;:&quot;ffffff, ebebeb, e1e1e1, d7d7d7, cccccc, c2c2c2, b7b7b7, acacac, a0a0a0, 959595, 898989, 7d7d7d, 707070, 626262, 555555, 464646, 363636, 262626, 111111, 000000&quot;}'/&gt;
        &lt;span class=&quot;color-drop&quot;&gt;&lt;/span&gt;
        &lt;span class=&quot;add-on&quot;&gt;&lt;span class=&quot;color-picker&quot;&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
</div>