Color picker

The ColorPicker component provides an interactive interface for selecting colors with support for different color modes (HEX, RGB, HSL) and alpha channel control.

Basic usage

import { ColorPicker } from '@raystack/apsara';

function App() {
  return (
    <ColorPicker>
      <ColorPicker.Area />
      <ColorPicker.Hue />
      <ColorPicker.Alpha />
      <ColorPicker.Input />
      <ColorPicker.Mode />
    </ColorPicker>
  );
}

Props

ColorPicker (Root)

ColorLike

The controlled color value. Can be any valid CSS color string.

ColorLike

default:"'#ffffff'"

The default color value for uncontrolled usage.

(value: string, mode: string) => void

Callback fired when the color value changes. Receives the color string and current mode.

'hex' | 'rgb' | 'hsl'

The controlled color mode.

'hex' | 'rgb' | 'hsl'

default:"'hex'"

The default color mode for uncontrolled usage.

(mode: ModeType) => void

Callback fired when the color mode changes.

ColorPicker.Area

The 2D color selection area for saturation and lightness.

ColorPicker.Hue

The hue slider for selecting the base color.

ColorPicker.Alpha

The alpha/opacity slider.

ColorPicker.Input

The text input for entering color values.

ColorPicker.Mode

The mode selector for switching between HEX, RGB, and HSL.

Controlled color picker

function ControlledColorPicker() {
  const [color, setColor] = useState('#ff0000');

  return (
    <div>
      <ColorPicker value={color} onValueChange={(value) => setColor(value)}>
        <ColorPicker.Area />
        <ColorPicker.Hue />
        <ColorPicker.Input />
      </ColorPicker>
      <p>Selected color: {color}</p>
    </div>
  );
}

With alpha channel

<ColorPicker defaultValue="rgba(255, 0, 0, 0.5)">
  <ColorPicker.Area />
  <ColorPicker.Hue />
  <ColorPicker.Alpha />
  <ColorPicker.Input />
</ColorPicker>

With mode selector

<ColorPicker>
  <ColorPicker.Area />
  <ColorPicker.Hue />
  <ColorPicker.Alpha />
  <ColorPicker.Mode />
  <ColorPicker.Input />
</ColorPicker>

Controlled mode

function ColorPickerWithMode() {
  const [color, setColor] = useState('#3b82f6');
  const [mode, setMode] = useState('hex');

  return (
    <ColorPicker
      value={color}
      onValueChange={setColor}
      mode={mode}
      onModeChange={setMode}
    >
      <ColorPicker.Area />
      <ColorPicker.Hue />
      <ColorPicker.Mode />
      <ColorPicker.Input />
    </ColorPicker>
  );
}

Without alpha

<ColorPicker defaultValue="#00ff00">
  <ColorPicker.Area />
  <ColorPicker.Hue />
  <ColorPicker.Input />
</ColorPicker>

Custom layout

<ColorPicker>
  <div style={{ display: 'flex', gap: '1rem' }}>
    <div style={{ flex: 1 }}>
      <ColorPicker.Area />
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
      <ColorPicker.Hue />
      <ColorPicker.Alpha />
    </div>
  </div>
  <div style={{ marginTop: '1rem' }}>
    <ColorPicker.Input />
    <ColorPicker.Mode />
  </div>
</ColorPicker>

Theme color picker example

function ThemeColorPicker() {
  const [primaryColor, setPrimaryColor] = useState('#3b82f6');
  const [secondaryColor, setSecondaryColor] = useState('#8b5cf6');

  return (
    <div>
      <div>
        <h4>Primary Color</h4>
        <ColorPicker
          value={primaryColor}
          onValueChange={(value) => setPrimaryColor(value)}
        >
          <ColorPicker.Area />
          <ColorPicker.Hue />
          <ColorPicker.Input />
        </ColorPicker>
      </div>
      
      <div>
        <h4>Secondary Color</h4>
        <ColorPicker
          value={secondaryColor}
          onValueChange={(value) => setSecondaryColor(value)}
        >
          <ColorPicker.Area />
          <ColorPicker.Hue />
          <ColorPicker.Input />
        </ColorPicker>
      </div>
      
      <div>
        <p>Primary: {primaryColor}</p>
        <p>Secondary: {secondaryColor}</p>
      </div>
    </div>
  );
}

With preview swatch

function ColorPickerWithPreview() {
  const [color, setColor] = useState('#ff6b6b');

  return (
    <div>
      <div
        style={{
          width: '50px',
          height: '50px',
          borderRadius: '8px',
          backgroundColor: color,
          border: '2px solid #ddd'
        }}
      />
      <ColorPicker value={color} onValueChange={setColor}>
        <ColorPicker.Area />
        <ColorPicker.Hue />
        <ColorPicker.Alpha />
        <ColorPicker.Input />
      </ColorPicker>
    </div>
  );
}

Different color formats

// HEX
<ColorPicker defaultValue="#ff0000" defaultMode="hex">
  <ColorPicker.Area />
  <ColorPicker.Hue />
  <ColorPicker.Input />
</ColorPicker>

// RGB
<ColorPicker defaultValue="rgb(255, 0, 0)" defaultMode="rgb">
  <ColorPicker.Area />
  <ColorPicker.Hue />
  <ColorPicker.Input />
</ColorPicker>

// HSL
<ColorPicker defaultValue="hsl(0, 100%, 50%)" defaultMode="hsl">
  <ColorPicker.Area />
  <ColorPicker.Hue />
  <ColorPicker.Input />
</ColorPicker>

Accessibility

All interactive elements (area, sliders, inputs) are keyboard accessible.
The color area supports arrow key navigation for precise color selection.
Sliders support arrow keys for adjusting values.
The input field allows direct color value entry.
Focus states are clearly visible on all interactive elements.
Color values are properly validated and converted between formats.

Get Started

Guides

Layout Components

Navigation Components

Data Display

Form Components

Feedback Components

Overlay Components

Utility Components

Basic usage

Props

ColorPicker (Root)

ColorPicker.Area

ColorPicker.Hue

ColorPicker.Alpha

ColorPicker.Input

ColorPicker.Mode

Controlled color picker

With alpha channel

With mode selector

Controlled mode

Without alpha

Custom layout

Theme color picker example

With preview swatch

Different color formats

Accessibility

​Basic usage

​Props

​ColorPicker (Root)

​ColorPicker.Area

​ColorPicker.Hue

​ColorPicker.Alpha

​ColorPicker.Input

​ColorPicker.Mode

​Controlled color picker

​With alpha channel

​With mode selector

​Controlled mode

​Without alpha

​Custom layout

​Theme color picker example

​With preview swatch

​Different color formats

​Accessibility

Basic usage

Props

ColorPicker (Root)

ColorPicker.Area

ColorPicker.Hue

ColorPicker.Alpha

ColorPicker.Input

ColorPicker.Mode

Controlled color picker

With alpha channel

With mode selector

Controlled mode

Without alpha

Custom layout

Theme color picker example

With preview swatch

Different color formats

Accessibility