Colors

colors#

Type: object | string[]

Default: grouped object (see below)

Defines the color palette used by the built-in color picker (text color, background color, block color plugins, etc.).

You can pass:

• Object — colors grouped by name (each key is a column in the picker UI)
• Array — a flat list of colors shown as a single grid (no groups)

const app = Redactor('#entry', {
  colors: {
    brand: ['#111111', '#333333', '#666666'],
    accent: ['#137cec', '#4dabf7', '#a5d8ff']
  }
});

Flat array

const app = Redactor('#entry', {
  colors: ['#000000', '#ffffff', '#137cec', '#e03131', '#37b24d']
});

Default palette

By default, Redactor ships with grouped palettes:

{
  base:   ['#000000', '#ffffff'],
  gray:   ['#212529', '#343a40', '#495057', '#868e96', '#adb5bd', '#ced4da', '#dee2e6', '#e9ecef', '#f1f3f5', '#f8f9fa'],
  red:    ['#c92a2a', '#e03131', '#f03e3e', '#fa5252', '#ff6b6b', '#ff8787', '#ffa8a8', '#ffc9c9', '#ffe3e3', '#fff5f5'],
  pink:   ['#a61e4d', '#c2255c', '#d6336c', '#e64980', '#f06595', '#f783ac', '#faa2c1', '#fcc2d7', '#ffdeeb', '#fff0f6'],
  grape:  ['#862e9c', '#9c36b5', '#ae3ec9', '#be4bdb', '#cc5de8', '#da77f2', '#e599f7', '#eebefa', '#f3d9fa', '#f8f0fc'],
  violet: ['#5f3dc4', '#6741d9', '#7048e8', '#7950f2', '#845ef7', '#9775fa', '#b197fc', '#d0bfff', '#e5dbff', '#f3f0ff'],
  indigo: ['#364fc7', '#3b5bdb', '#4263eb', '#4c6ef5', '#5c7cfa', '#748ffc', '#91a7ff', '#bac8ff', '#dbe4ff', '#edf2ff'],
  blue:   ['#1864ab', '#1971c2', '#1c7ed6', '#228be6', '#339af0', '#4dabf7', '#74c0fc', '#a5d8ff', '#d0ebff', '#e7f5ff'],
  cyan:   ['#0b7285', '#0c8599', '#1098ad', '#15aabf', '#22b8cf', '#3bc9db', '#66d9e8', '#99e9f2', '#c5f6fa', '#e3fafc'],
  teal:   ['#087f5b', '#099268', '#0ca678', '#12b886', '#20c997', '#38d9a9', '#63e6be', '#96f2d7', '#c3fae8', '#e6fcf5'],
  green:  ['#2b8a3e', '#2f9e44', '#37b24d', '#40c057', '#51cf66', '#69db7c', '#8ce99a', '#b2f2bb', '#d3f9d8', '#ebfbee'],
  lime:   ['#5c940d', '#66a80f', '#74b816', '#82c91e', '#94d82d', '#a9e34b', '#c0eb75', '#d8f5a2', '#e9fac8', '#f4fce3'],
  yellow: ['#e67700', '#f08c00', '#f59f00', '#fab005', '#fcc419', '#ffd43b', '#ffe066', '#ffec99', '#fff3bf', '#fff9db'],
  orange: ['#d9480f', '#e8590c', '#f76707', '#fd7e14', '#ff922b', '#ffa94d', '#ffc078', '#ffd8a8', '#ffe8cc', '#fff4e6']
}