Color PickernewNEW

<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>

Overview

The ColorPicker component offers a flexible and composable solution for selecting colors in various formats, including HEX, RGB, and HSL. It supports optional alpha channel (transparency) and is designed for easy integration and customization within your application.

Getting Started

To use the ColorPicker, import it from @raystack/apsara and compose its subcomponents as needed. Below is a basic example:

import { ColorPicker } from "@raystack/apsara";
 
<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>

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.

ColorPicker.Area

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

ColorPicker.Hue

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

ColorPicker.Alpha

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

ColorPicker.Mode

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

ColorPicker.Input

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>

Popover Integration

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>
  );
})