piskel/palettes-proto/templates/dialogs/create-palette.html

<div class="dialog-wrapper">
  <h3 class="dialog-head">
    Create palette
    <span class="dialog-close">X</span>
  </h3>
  <div class="dialog-create-palette" style="font-size:1.3em">
      <div class="create-palette-section form-section">
        <span class="create-palette-name-label">Name</span>
        <input type="text" class="textfield create-palette-name-input" name="palette-name" placeholder="palette name ..."/>
        <div class="create-palette-import-section">
          <button
            type="button"
            rel="tooltip" data-placement="right" title="Import palette from an existing Image or from a palette file"
            class="button  button-primary create-palette-import-button">Import from file</button>
          <input style="display:none"
            class="create-palette-import-input"
            type="file" value="file" accept="*"/>
        </div>
      </div>
      <div class="colors-container">
        <ul class="colors-list"></ul>
        <div class="color-picker-container">
          <div class="color-picker-spectrum"></div>
          <div class="color-picker-slider">
            <span>H</span>
            <input type="range" data-model="hsv" data-dimension="h" value="0" min="0" max="359"/>
            <input type="text"  data-model="hsv" data-dimension="h" class="textfield" value="0"/>
          </div>
          <div class="color-picker-slider">
            <span>S</span>
            <input type="range" data-model="hsv" data-dimension="s" value="0" min="0" max="100"/>
            <input type="text"  data-model="hsv" data-dimension="s" class="textfield" value="0"/>
          </div>
          <div class="color-picker-slider">
            <span>V</span>
            <input type="range" data-model="hsv" data-dimension="v" value="0" min="0" max="100"/>
            <input type="text"  data-model="hsv" data-dimension="v" class="textfield" value="0"/>
          </div>
          <br/>
          <div class="color-picker-slider">
            <span>R</span>
            <input type="range" data-model="rgb" data-dimension="r" value="0" min="0" max="255"/>
            <input type="text"  data-model="rgb" data-dimension="r" class="textfield" value="0"/>
          </div>
          <div class="color-picker-slider">
            <span>G</span>
            <input type="range" data-model="rgb" data-dimension="g" value="0" min="0" max="255"/>
            <input type="text"  data-model="rgb" data-dimension="g" class="textfield" value="0"/>
          </div>
          <div class="color-picker-slider">
            <span>B</span>
            <input type="range" data-model="rgb" data-dimension="b" value="0" min="0" max="255"/>
            <input type="text"  data-model="rgb" data-dimension="b" class="textfield" value="0"/>
          </div>
          <div class="color-preview"></div>
        </div>
      </div>
      <div class="create-palette-actions">
        <button type="button" name="create-palette-cancel" class="button create-palette-cancel">Cancel</button>
        <button type="button" name="create-palette-submit" class="button button-primary create-palette-submit">Save</button>
      </div>
  </div>

  <script type="text/template" id="color-picker-slider-template">
    <div class="color-picker-slider">
      <span>{{dim|upper}}</span>
      <input type="range" data-model="{{model}}" data-dimension="{{dim}}" value="0" min="0" max="{{max}}"/>
      <input type="text"  data-model="{{model}}" data-dimension="{{dim}}" class="textfield" value="0"/>
    </div>
  </script>

  <script type="text/template" id="create-palette-color-template">
    <li
      class="create-palette-color {{:selected}} {{:light-color}}"
      style="background:{{color}}"
      data-palette-index="{{index}}"
      data-palette-color="{{color}}">
      <div class="create-palette-remove-color">X</div>
    </li>
  </script>

</div>