1<ColorPicker
2  defaultValue="#DA2929"
3  style={{
4    width: "240px",
5    height: "320px",
6    padding: 12,
7    background: "white",
8  }}
9>
10  <ColorPicker.Area />
11  <ColorPicker.Hue />
12  <ColorPicker.Alpha />
13  <Flex direction="row" gap={2}>
14    <ColorPicker.Mode />
15    <ColorPicker.Input />

Anatomy

Import and assemble the component:

1import { ColorPicker } from '@raystack/apsara'
2
3<ColorPicker>
4  <ColorPicker.Area />
5  <ColorPicker.Hue />
6  <ColorPicker.Alpha />
7  <ColorPicker.Mode />
8  <ColorPicker.Input />
9</ColorPicker>

API Reference

Root

The ColorPicker is composed of several subcomponents, each responsible for a specific aspect of color selection. The root component acts as a data provider for its children.

Area

Enables users to select a color from a palette. Typically used for choosing saturation and brightness.

Hue

Provides a slider for selecting the hue value of the color.

Alpha

Provides a slider for selecting the alpha value of the color.

Mode

Lets users switch between different color models (e.g., HEX, RGB, HSL) via a dropdown menu.

Input

Displays the current color value in the selected color model and allows direct text input.

Examples

Basic Usage

1<ColorPicker
2  defaultValue="#00bcd4"
3  style={{
4    width: "240px",
5    height: "220px",
6    padding: 12,
7    background: "white",
8  }}
9>
10  <ColorPicker.Area />
11  <ColorPicker.Hue />
12</ColorPicker>

Popover Integration

The ColorPicker can be embedded within a Popover component to create a more interactive and space-efficient color selection experience.

1(function PopoverColorPicker() {
2  const [color, setColor] = useState("#DA2929");
3
4  return (
5    <Popover>
6      <Popover.Trigger asChild>
7        <Button
8          style={{
9            width: 60,
10            height: 60,
11            background: color,
12          }}
13        />
14      </Popover.Trigger>
15      <Popover.Content>

Accessibility

• Provides aria-label attributes for color areas and sliders
• Supports keyboard navigation for hue, saturation, and alpha controls
• Color values are announced to screen readers on change