Using Textbox.io - Customizing the color widget

HTML

<script src="https://s3.amazonaws.com/static.ephox.com/jsfiddle/2/textboxio/textboxio.js"></script>
<div id="editableDiv">
  <p>This is the Editor content</p>
  <table border="1" style="border-collapse: collapse; width: 100%;">
    <tbody>
      <tr>
        <td style="width: 33%;">
          <br />
        </td>
        <td style="width: 33%;">
          <br />
        </td>
        <td style="width: 33%;">
          <br />
        </td>
      </tr>
    </tbody>
  </table>
</div>

CSS

#editableDiv {
    margin:10px 0;
    height:250px;
}

JavaScript

// custom list of colors for font and table color widgets
textboxio.replace('#editableDiv', {
  ui: {
  	toolbar: {
    	items: [
      'style',
      [
      	'styles',
      	'font-menu',
        'font-face',
        'font-size',
        'font-color'
        ]
      ]
    },
    colors: {
      buttons: [
        { value: 'green' },
        { value: 'yellow' },
        { value: 'red' },
        { value: 'orange', text: 'A bright background color' },
        { value: '#062f70', text: 'navy' },
      ]
    }
  }
});