ColorArea

A color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.

Theme

colorSpace

xChannel

yChannel

isDisabled

Example

ColorArea.tsx

ColorArea.css

Example

ColorArea.tsx

ColorArea.css

import {ColorArea} from './ColorArea';

<ColorArea
  defaultValue="hsl(0, 100%, 50%)" />

Value

Use the value or defaultValue prop to set the color value, and the xChannel and yChannel props to specify which color channels to display. The value may be a string or Color object, parsed using the parseColor function.

The onChange event is called as the user drags, and onChangeEnd is called when the thumb is released. These are always called with a Color object.

onChange value: #9B80FF
onChangeEnd value: #9B80FF

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

function Example() {
  let [currentValue, setCurrentValue] = useState(parseColor('#9B80FF'));
  let [finalValue, setFinalValue] = useState(currentValue);

  return (
    <>
      <ColorArea
        xChannel="red"
        yChannel="green"
        value={currentValue}
        onChange={setCurrentValue}
        onChangeEnd={setFinalValue} />
      <pre style={{fontSize: 12}}>
        onChange value: {currentValue.toString('hex')}{'\n'}
        onChangeEnd value: {finalValue.toString('hex')}
      </pre>
    </>
  );
}

ColorArea

Value

API