January Savings: 20% Off On All Plans + 3 Months of Platinum Support

Days

Hours

Minutes

Seconds

x

Colors Plugin

Options
Methods
Examples

Plugins are fully functional during your trial once you've added your trial key to the setup.

Adds the possibility to change the background and text colors. You can build your own color palette.

Plugin options:

colorsBackground Array -	An array of colors used in the colors popup for background. Passing REMOVE as a value in the array will display the Clear Formatting button for colors. Default: [ '#61BD6D', '#1ABC9C', '#54ACD2', '#2C82C9', '#9365B8', '#475577', '#CCCCCC', '#41A85F', '#00A885', '#3D8EB9', '#2969B0', '#553982', '#28324E', '#000000', '#F7DA64', '#FBA026', '#EB6B56', '#E25041', '#A38F84', '#EFEFEF', '#FFFFFF',, '#FAC51C', '#F37934', '#D14841', '#B8312F', '#7C706B', '#D1D5D8', 'REMOVE' ]
colorsButtons Array -	Set the colors popup buttons. Default: ["colorsBack", "\|", "-"]
colorsHEXInput Boolean -	Show HEX input to choose custom color. Default: true
colorsStep Number -	The number of colors displayed on a line in the colors popup. Default: 7
colorsText Array -	An array of colors used in the colors popup for text. Passing REMOVE as a value in the array will display the Clear Formatting button for colors. Default: [ '#61BD6D', '#1ABC9C', '#54ACD2', '#2C82C9', '#9365B8', '#475577', '#CCCCCC', '#41A85F', '#00A885', '#3D8EB9', '#2969B0', '#553982', '#28324E', '#000000', '#F7DA64', '#FBA026', '#EB6B56', '#E25041', '#A38F84', '#EFEFEF', '#FFFFFF', '#FAC51C', '#F37934', '#D14841', '#B8312F', '#7C706B', '#D1D5D8', 'REMOVE' ]

Plugin methods:

colors.background (value) returns: Object	Set the background color of the selected text. ● Value: The color to be set. Type: String
colors.text (value) returns: Object	Set the text color of the selected text. ● Value: The color to be set. Type: String
colors.back () returns:	Hides the color picker popup.

Add Plugin to your code:

Plugin name: colors

Plugin JS Script: ../js/plugins/colors.min.js

Or from CDN https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/colors.min.js

Plugin CSS link: ../css/plugins/colors.min.css

Or from CDN https://cdn.jsdelivr.net/npm/froala-editor@latest/css/plugins/colors.min.css

Example:

● Custom Color Picker

Additional Resources

Ready to dive in ? Explore our plans

Sign up

Download the code by signing up for our newsletter

Note: By registering, you confirm that you agree to the processing of your personal data by Froala, Inc. – Froala as described in the Privacy Statement. Froala, Inc. – Froala is part of the Idera group and may share your information with its parent company Idera, Inc., and its affiliates. For further details on how your data is used, stored, and shared, please review our Privacy Statement .