form · Normal DOM only

ColorPicker

30-swatch palette of Twenty named tag colors. Picked value is a token name, not a hex.

Use ColorPicker when the user is naming a record colour: Tag, Kanban column, calendar category. The picked value is a string like `"blue"` or `"amber"` that maps to --t-color-* tokens — your storage stays theme-aware and the same record looks correct in both Light and Dark.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { ColorPicker } from '@8maverik8/twenty-design';

Examples

Palette

Selected: blue

tsx
<ColorPicker value={c} onChange={setC} />

Guidelines

✓

Store the picked name in the database, not a hex.A hex value freezes the colour — when Twenty shifts a palette step the rest of the UI updates but this single record stays old.

Use ColorPicker as a generic color input (#rrggbb).For free-form colour use a third-party hex picker — ours is intentionally palette-bound.