colorPalettes¶

New in version 13.0

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 by a simple 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
    }
    blue {
      value = #0080c9
    }
    darkgrey {
      value = #515151
    }
    valid {
      value = #5abc55
    }
    error {
      value = #dd123d
    }
  }
}

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.