
<div tabindex="-1" class="color-editor">
  <section>
    <div class="sliders">
      <div class="color-selection-field">
        <div class="saturation-gradient gradient-overlay"></div>
        <div class="luminosity-gradient gradient-overlay"></div>
        <div tabindex="0" class="selector-base">
          <div class="selector"></div>
        </div>
      </div>
      <div class="hue-slider slider">
        <div tabindex="0" class="selector-base">
          <div class="selector"></div>
        </div>
      </div>
      <div class="opacity-slider slider">
        <div class="opacity-gradient gradient-overlay"></div>
        <div tabindex="0" class="selector-base">
          <div class="selector"></div>
        </div>
      </div>
    </div>
    <footer>
      <input class="color-value" />
      <ul class="button-bar">
        <li class="selected" title="{{COLOR_EDITOR_RGBA_BUTTON_TIP}}"><a href="#" tabindex="0" class="rgba">RGBa</a></li>
        <li title="{{COLOR_EDITOR_HEX_BUTTON_TIP}}"><a href="#" tabindex="0" class="hex">Hex</a></li>
        <li title="{{COLOR_EDITOR_HSLA_BUTTON_TIP}}"><a href="#" tabindex="0" class="hsla">HSLa</a></li>
      </ul>
    </footer>
  </section>
  <aside>
    <header>
      <div class="large-swatches">
        <div class="current-color large-swatch" title="{{COLOR_EDITOR_CURRENT_COLOR_SWATCH_TIP}}"></div>
        <div class="original-color large-swatch" title="{{COLOR_EDITOR_ORIGINAL_COLOR_SWATCH_TIP}}"></div>
      </div>
    </header>
    <ul class="swatches"></ul>
  </aside>
</div>