---
title: "colorPalettes"
manual: "TypoScript Explained"
version: "main"
permalink: "https://docs.typo3.org/permalink/t3tsref:pagecolorpalettes@main"
source: "PageTsconfig/ColorPalettes.rst"
rendered: "2026-09-18T06:55:17+00:00"
---

# colorPalettes {#colorpalettes}

TYPO3 provides a [color picker component](https://docs.typo3.org/m/typo3/reference-tca/main/en-us/ColumnsConfig/Type/Color/Index.html#columns-color) 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.

![Example of a color palette](../Images/ManualScreenshots/ColorPalettes/ColorPalette.png)

## Basic syntax {#basic-syntax}

First, define the colors by name and RGB value:

**EXT:my_sitepackage/Configuration/page.tsconfig**

```typoscript
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**

```typoscript
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](https://docs.typo3.org/permalink/t3tsref:pagetsconfigtceformcolorpalette@main).