colorPalettes

TYPO3 provides a color picker component that supports color palettes, or swatches. The colors can be configured and assigned to palettes. This way, for example, colors defined in a corporate design can be selected with one click. Multiple color palettes can be configured.

Basic syntax

First, define the colors by name and RGB value:

EXT:my_sitepackage/Configuration/page.tsconfig

colorPalettes {
  colors {
    typo3 {
      value = #ff8700
      label = TYPO3 orange
    }
    blue {
      value = #0080c9
    }
    darkgrey {
      value = #515151
    }
    valid {
      value = #5abc55
      label = my_sitepackage.be:color.valid
    }
    error {
      value = #dd123d
    }
  }
}

New in version 13.4.25 | 14.2 Feature: #101843 - Allow configuration of color palettes in FormEngine

A color can have a label.

Changed in version 14.3.1

Before, the label could only be a static text.

A label is optional. Together with the value, it becomes the tooltip of the color's swatch, for example "TYPO3 orange (#ff8700)", and screen readers announce it. The swatch of a color without a label shows only the value.

The label can be a static text or a reference to a translated label, for example my_sitepackage.be:color.valid, see Translation domain mapping.

Then assign the colors to your palettes:

EXT:my_sitepackage/Configuration/page.tsconfig

colorPalettes {
  palettes {
    main = typo3
    key_colors = typo3, blue, darkgrey
    messages = valid, error
  }
}

Now you can assign a color palette to one field, to all fields of a table or as a global configuration, see TCEFORM.colorPalette.