ColorPicker

A ColorPicker synchronizes a color value between multiple React Aria color components. It simplifies building color pickers with customizable layouts via composition.

label

Example

ColorPicker.tsx

ColorPicker.css

theme.css

Example

ColorPicker.tsx

ColorPicker.css

theme.css

import {ColorPicker} from './ColorPicker';

<ColorPicker
  label="Fill"
  defaultValue="#5100FF" />

Anatomy

A color picker does not render any UI by itself. You can render any combination of color components as children of a color picker, including ColorArea, ColorSlider, ColorWheel, ColorField, ColorSwatch, and ColorSwatchPicker. ColorPicker manages the state of the selected color, and coordinates the value between all of the components inside it.

import {ColorPicker} from 'react-aria-components';

<ColorPicker>
  {/* Color components here */}
</ColorPicker>

Value

Use the value or defaultValue prop to set the color value. This may be a string or Color object, parsed using the parseColor function. The onChange event is always called with a Color object.

Selected color: hsl(50, 100%, 50%)

import {parseColor} from 'react-aria-components';
import {ColorPicker} from './ColorPicker';
import {useState} from 'react';

function Example() {
  let [value, setValue] = useState(parseColor('hsl(50, 100%, 50%)'));

  return (
    <>
      <ColorPicker
        label="Color"
        value={value}
        onChange={setValue} />
      <p>Selected color: {value.toString('hsl')}</p>
    </>
  );
}

Examples

Channel sliders

This example uses ColorSlider to allow a user to adjust each channel of a color value, with a Select to switch between color spaces.

import type {ColorSpace} from 'react-aria-components';
import {getColorChannels} from 'react-aria-components';
import {ColorPicker} from './ColorPicker';
import {ColorSlider} from './ColorSlider';
import {Select, SelectItem} from './Select';
import {useState} from 'react';

function Example() {
  let [space, setSpace] = useState<ColorSpace>('rgb');

  return (
    <ColorPicker label="Fill color" defaultValue="#184">
      <Select aria-label="Color space" selectedKey={space} onSelectionChange={s => setSpace(s as ColorSpace)}>
        <SelectItem id="rgb">RGB</SelectItem>
        <SelectItem id="hsl">HSL</SelectItem>
        <SelectItem id="hsb">HSB</SelectItem>
      </Select>
      {getColorChannels(space).map(channel => (
        <ColorSlider
          key={channel}
          colorSpace={space}
          channel={channel} />
      ))}
      <ColorSlider channel="alpha" />
    </ColorPicker>
  );
}

Color wheel

This example combines a ColorWheel and ColorArea to build an HSB color picker.

import {ColorPicker} from './ColorPicker';
import {ColorWheel} from './ColorWheel';
import {ColorArea} from './ColorArea';

<ColorPicker label="Stroke color" defaultValue="#345">
  <ColorWheel />
  <ColorArea 
    colorSpace="hsb"
    xChannel="saturation"
    yChannel="brightness"
    style={{
      width: '100px',
      height: '100px',
      position: 'absolute',
      top: 'calc(50% - 50px)',
      left: 'calc(50% - 50px)'}} />
</ColorPicker>

Channel fields

This example uses ColorField to allow a user to edit the value of each color channel as a number, along with a Select to switch between color spaces.

import type {ColorSpace} from 'react-aria-components';
import {ColorPicker} from './ColorPicker';
import {getColorChannels} from 'react-aria-components';
import {ColorArea} from './ColorArea';
import {ColorSlider} from './ColorSlider';
import {Select, SelectItem} from './Select';
import {ColorField} from './ColorField';
import {useState} from 'react';

function Example() {
  let [space, setSpace] = useState<ColorSpace>('rgb');

  return (
    <ColorPicker label="Color" defaultValue="#f80">
      <ColorArea colorSpace="hsb" xChannel="saturation" yChannel="brightness" />
      <ColorSlider colorSpace="hsb" channel="hue" />
      <Select aria-label="Color space" selectedKey={space} onSelectionChange={s => setSpace(s as ColorSpace)}>
        <SelectItem id="rgb">RGB</SelectItem>
        <SelectItem id="hsl">HSL</SelectItem>
        <SelectItem id="hsb">HSB</SelectItem>
      </Select>
      <div style={{display: 'flex', gap: 4, width: 192}}>
        {getColorChannels(space).map(channel => (
          <ColorField
            key={channel}
            colorSpace={space}
            channel={channel}
            style={{flex: 1}} />
        ))}
      </div>
    </ColorPicker>
  );
}

Swatches

This example uses a ColorSwatchPicker to provide color presets for a color picker.

import {ColorPicker} from './ColorPicker';
import {ColorArea} from './ColorArea';
import {ColorSlider} from './ColorSlider';
import {ColorSwatchPicker, ColorSwatchPickerItem} from './ColorSwatchPicker';

<ColorPicker label="Color" defaultValue="#A00">
  <ColorArea colorSpace="hsb" xChannel="saturation" yChannel="brightness" />
  <ColorSlider colorSpace="hsb" channel="hue" />
  <ColorSwatchPicker>
    <ColorSwatchPickerItem color="#A00" />
    <ColorSwatchPickerItem color="#f80" />
    <ColorSwatchPickerItem color="#080" />
    <ColorSwatchPickerItem color="#08f" />
    <ColorSwatchPickerItem color="#008" />
  </ColorSwatchPicker>
</ColorPicker>

API

Name	Type
`children`	`ChildrenOrFunction<T>`
The children of the component. A function may be provided to alter the children based on component state.

`value`	`string \| Color`
The current value (controlled).
`defaultValue`	`string \| Color`
The default value (uncontrolled).
`onChange`	`(value: Color) => void`
Handler that is called when the value changes.

Default className: react-aria-ColorPicker

Render Prop	Description
`color`	The currently selected color.