kibana-123/src/ui/public/stringify/editors/color.html

Kibana is an open source (Apache Licensed), browser based analytics and search dashboard for Elasticsearch. Kibana is a snap to setup and start using. Kibana strives to be easy to get started with, while also being flexible and powerful, just like Elastic

<div class="form-group">
  <div ng-repeat="color in editor.formatParams.colors">
    <div class="editor-color">
      <button ng-if="editor.formatParams.colors.length > 1" aria-label="Remove Color" ng-click="removeColor($index)" tooltip="Remove Color" tooltip-append-to-body="true" type="button" class="btn btn-xs btn-danger editor-color-remove">
        <i aria-hidden="true" class="fa fa-times"></i>
      </button>
      <div class="form-group" ng-if="editor.formatParams.fieldType === 'number'">
        <label>Range <small>(min:max)</small></label>
        <input
          ng-model="color.range"
          class="form-control">
      </div>
      <div class="form-group" ng-if="editor.formatParams.fieldType === 'string'">
        <label>Pattern <small>(regular expression)</small></label>
        <input
            ng-model="color.regex"
            class="form-control">
      </div>
      <div class="form-group">
        <label>Font Color</label>
        <input
          ng-model="color.text"
          colorpicker
          type="text"
          class="form-control">
      </div>
      <div class="form-group">
        <label>Background Color</label>
        <input
          ng-model="color.background"
          colorpicker
          type="text"
          class="form-control">
      </div>
      <div class="form-group">
        <label>Example</label>
          <div class="form-control"
            ng-style="{color: color.text, 'background-color': color.background}"
            value="formatted">
            123456
        </div>
      </div>

    </div>
  </div>

  <button aria-label="Add Color" ng-click="addColor()" tooltip="Add Color" tooltip-append-to-body="true" type="button" class="btn btn-primary btn-xs">
      <span class="sr-only">Add Color</span>
      <i aria-hidden="true" class="fa fa-plus"></i> Add Color
  </button>

</div>