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 (HEX, RGB, HSL, OKLCH) 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>

OKLCH Mode

The picker accepts and emits oklch() values. Pass an oklch(...) string as defaultValue and set defaultMode='oklch' to have the input render and emit oklch.

Note that the picker's sliders still operate in HSL — oklch here is an input/output format, not a perceptual editing mode. The emitted oklch value is the result of an HSL → sRGB → OKLCH conversion, so a value-in will not be bit-identical to the value-out.

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

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
7        render={
8          <Button
9            style={{
10              width: 60,
11              height: 60,
12              background: color,
13            }}
14          />
15        }

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