# 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 example
### ColorArea.tsx
```tsx
'use client';
import {
ColorArea as AriaColorArea,
ColorAreaProps
} from 'react-aria-components';
import {ColorThumb} from './ColorThumb';
import './ColorArea.css';
export function ColorArea(props: ColorAreaProps) {
return (
(
)
);
}
```
### ColorArea.css
```css
.react-aria-ColorArea {
width: 192px;
height: 192px;
border-radius: var(--radius);
flex-shrink: 0;
}
.react-aria-ColorArea {
&[data-disabled] {
background: gray !important;
}
}
```
## Tailwind example
### ColorArea.tsx
```tsx
'use client';
import React from 'react';
import {
ColorArea as AriaColorArea,
ColorAreaProps as AriaColorAreaProps
} from 'react-aria-components';
import { composeTailwindRenderProps } from './utils';
import { ColorThumb } from './ColorThumb';
export interface ColorAreaProps extends AriaColorAreaProps {}
export function ColorArea(props: ColorAreaProps) {
return (
({
...defaultStyle,
background: isDisabled ? undefined : defaultStyle.background
})}>
);
}
```
### ColorThumb.tsx
```tsx
'use client';
import React from 'react';
import {ColorThumb as AriaColorThumb, ColorThumbProps} from 'react-aria-components';
import { tv } from 'tailwind-variants';
const thumbStyles = tv({
base: 'w-6 h-6 top-[50%] left-[50%] rounded-full border-2 border-white',
variants: {
isFocusVisible: {
true: 'w-8 h-8'
},
isDragging: {
true: 'bg-gray-700 dark:bg-gray-300 forced-colors:bg-[ButtonBorder]'
},
isDisabled: {
true: 'border-gray-300 dark:border-zinc-700 forced-colors:border-[GrayText] bg-gray-300 dark:bg-zinc-800 forced-colors:bg-[GrayText]'
}
}
});
export function ColorThumb(props: ColorThumbProps) {
return (
({
...defaultStyle,
backgroundColor: isDisabled ? undefined : defaultStyle.backgroundColor,
boxShadow: '0 0 0 1px black, inset 0 0 0 1px black'}
)}
className={thumbStyles} />
);
}
```
### index.css
```css
@import 'tailwindcss';
@plugin 'tailwindcss-react-aria-components';
@plugin 'tailwindcss-animate';
/* Scale up hit targets on high resolution mobile devices. */
@media (min-resolution: 200dpi) {
html {
font-size: 18px;
}
.text-sm {
/* ensure minimum font size of 16px */
font-size: 0.9rem;
}
}
body {
@apply bg-white dark:bg-zinc-900;
color-scheme: dark light;
}
```
## 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.
```tsx
import {parseColor} from 'react-aria-components';
import {ColorArea} from 'vanilla-starter/ColorArea';
import {useState} from 'react';
function Example() {
let [currentValue, setCurrentValue] = useState(parseColor('#9B80FF'));
let [finalValue, setFinalValue] = useState(currentValue);
return (
<>
{/*- end highlight -*/}
onChange value: {currentValue.toString('hex')}{'\n'}
onChangeEnd value: {finalValue.toString('hex')}
);
}
```
## API
```tsx
```
### ColorArea
| Name | Type | Default | Description |
|------|------|---------|-------------|
| `aria-describedby` | `string | undefined` | — | Identifies the element (or elements) that describes the object. |
| `aria-details` | `string | undefined` | — | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| `aria-label` | `string | undefined` | — | Defines a string value that labels the current element. |
| `aria-labelledby` | `string | undefined` | — | Identifies the element (or elements) that labels the current element. |
| `children` | `ChildrenOrFunction` | — | The children of the component. A function may be provided to alter the children based on component state. |
| `className` | `ClassNameOrFunction | undefined` | 'react-aria-ColorArea' | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| `colorSpace` | `ColorSpace | undefined` | — | 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. |
| `defaultValue` | `string | Color | undefined` | — | The default value (uncontrolled). |
| `dir` | `string | undefined` | — | |
| `form` | `string | undefined` | — | The `