Color Picker

A composable color picker component supporting multiple color models, alpha channel, and customizable UI.

<ColorPicker
  defaultValue="#DA2929"
  style={{
    width: "240px",
    height: "320px",
    padding: 20,
    background: "white",
  }}
>
  <ColorPicker.Area />
  <ColorPicker.Hue />
  <ColorPicker.Alpha />
  <Flex direction="row" gap={2}>
    <ColorPicker.Mode />
    <ColorPicker.Input />
  </Flex>
</ColorPicker>

Usage

import { ColorPicker } from '@raystack/apsara'

ColorPicker Props

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.

Prop	Type	Default
`value`	`string`	-
`defaultValue`	`string`	`'#ffffff'`
`onValueChange`	`((value: string, mode: string) => void)`	-
`defaultMode`	`"hex" \| "rgb" \| "hsl"`	`'hex'`
`mode`	`"hex" \| "rgb" \| "hsl"`	-
`onModeChange`	`((mode: string) => void)`	-

ColorPicker.Area Props

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

ColorPicker.Hue Props

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

ColorPicker.Alpha Props

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

ColorPicker.Mode Props

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

Prop	Type	Default
`options`	`("hex" \| "rgb" \| "hsl")[]`	`['hex', 'rgb', 'hsl']`

ColorPicker.Input Props

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

Examples

Basic Usage

<ColorPicker
  defaultValue="#00bcd4"
  style={{
    width: "240px",
    height: "220px",
    padding: 20,
    background: "white",
  }}
>
  <ColorPicker.Area />
  <ColorPicker.Hue />
</ColorPicker>

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

(function PopoverColorPicker() {
  const [color, setColor] = useState("#DA2929");
 
  return (
    <Popover>
      <Popover.Trigger asChild>
        <Button
          style={{
            width: 60,
            height: 60,
            background: color,
          }}
        />
      </Popover.Trigger>
      <Popover.Content>
        <ColorPicker
          value={color}
          onValueChange={setColor}
          style={{
            width: "100%",
            height: "320px",
          }}
        >
          <ColorPicker.Area />
          <ColorPicker.Hue />
          <ColorPicker.Alpha />
          <Flex direction="row" gap={2}>
            <ColorPicker.Mode />
            <ColorPicker.Input />
          </Flex>
        </ColorPicker>
      </Popover.Content>
    </Popover>
  );
})

Color PickernewNEW