ColorArea

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

colorSpace

xChannel

yChannel

isDisabled

import {ColorArea} from '@react-spectrum/s2';

<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 {ColorArea, parseColor} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
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 className={style({font: 'body'})}>
        onChange value: {currentValue.toString('hex')}{'\n'}
        onChangeEnd value: {finalValue.toString('hex')}
      </pre>
    </>
  );
}

API

Name	Type
`xName`	`string`
The name of the x channel input element, used when submitting an HTML form. See MDN.
`yName`	`string`
The name of the y channel input element, used when submitting an HTML form. See MDN.
`colorSpace`	`ColorSpace`
The color space that the color area operates in. The `xChannel` and `yChannel` must be in this color space. If not provided, this defaults to the color space of the `color` or `defaultColor` value.
`xChannel`	`ColorChannel`
Color channel for the horizontal axis.
`yChannel`	`ColorChannel`
Color channel for the vertical axis.
`isDisabled`	`boolean`
Whether the ColorArea is disabled.
`styles`	`StylesProp`
Spectrum-defined styles, returned by the `style()` macro.

`value`	`T`
The current value (controlled).
`defaultValue`	`T`
The default value (uncontrolled).
`onChange`	`(value: Color) => void`
Handler that is called when the value changes, as the user drags.
`onChangeEnd`	`(value: Color) => void`
Handler that is called when the user stops dragging.