ColorArea

A two-dimensional color picker area for selecting saturation and brightness at a given hue.

Basic

Prop	Type	Default	Description
`hue`	`number`	—	The hue value (0-360) that determines the base color.
`saturation`	`number`	—	The saturation value (0-100) on the x-axis (controlled).
`brightness`	`number`	—	The brightness value (0-100) on the y-axis (controlled).
`onSaturationChange`	`(value: number) => void`	—	Called when the saturation changes.
`onBrightnessChange`	`(value: number) => void`	—	Called when the brightness changes.
`size`	`number`	`160`	Width and height of the color area in pixels.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

hue

number

The hue value (0-360) that determines the base color.

saturation

number

The saturation value (0-100) on the x-axis (controlled).

brightness

number

The brightness value (0-100) on the y-axis (controlled).

onSaturationChange

(value: number) => void

Called when the saturation changes.

onBrightnessChange

(value: number) => void

Called when the brightness changes.

size160

number

Width and height of the color area in pixels.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}