ColorArea
A color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
Vanilla CSS theme
This sets the
--tint CSS variable used by the Vanilla CSS examples.Theme
colorSpace
xChannel
Color channel for the horizontal axis.
xChannel
yChannel
Color channel for the vertical axis.
yChannel
isDisabled
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>
</>
);
}