Theming

ColorPaletteEditor.

Interactive accent color and 11-shade token scale generator.

Real interactive component

Live demo

Color tokens

Choose a base accent to generate matching shades.

Accent color

The preview uses the actual shared component, including your current theme, rounding, border and motion preferences.

Props & API reference

Parameters available in the shared component, including value types, requirements and accepted options.

4 props

Parameter	Type	Required	Default	Possible values	Description
`value`	`string`	Yes	—	—	Source six-digit hex color.
`onValueChange`	`(hex: string) => void`	No	—	—	Receives the updated accent color.
`label`	`string`	No	`Accent color`	—	Accessible color picker name.
`className`	`string`	No	—	—	Additional CSS class on the outer component element.