Custom Color Picker

Using the colors.min.js plugin you can add in the WYSIWYG HTML editor the color picker feature.

Try it yourself:

There are 4 options that can be used to customize the color picker:

• colorsBackground - An array of colors used in the colors popup for background.
• colorsDefaultTab - Specifies the default color tab from the colors popup.
• colorsStep - The number of colors displayed on a line in the colors popup.
• colorsText - An array of colors used in the colors popup for text.

Edit in JSFiddle

HTML

<div id="froala-editor"></div>

JAVASCRIPT

<script>
  $(function() {
    $('div#froala-editor').froalaEditor({
      toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'color', '|', 'paragraphFormat', 'align', 'undo', 'redo', 'html'],
      // Colors list.
      colorsBackground: [
        '#15E67F', '#E3DE8C', '#D8A076', '#D83762', '#76B6D8', 'REMOVE',
        '#1C7A90', '#249CB8', '#4ABED9', '#FBD75B', '#FBE571', '#FFFFFF'
      ],
      colorsDefaultTab: 'background',
      colorsStep: 6,
      colorsText: [
        '#15E67F', '#E3DE8C', '#D8A076', '#D83762', '#76B6D8', 'REMOVE',
        '#1C7A90', '#249CB8', '#4ABED9', '#FBD75B', '#FBE571', '#FFFFFF'
      ]
    })
  });
</script>