beta

ColorWheel

A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.

install	`yarn add react-aria-components`
version	1.3.3
usage	`import {ColorWheel} from 'react-aria-components'`

View ARIA pattern

Example#

import {ColorWheel, ColorWheelTrack, ColorThumb} from 'react-aria-components';

<ColorWheel outerRadius={100} innerRadius={74}>
  <ColorWheelTrack />
  <ColorThumb />
</ColorWheel>

import {
  ColorThumb,
  ColorWheel,
  ColorWheelTrack
} from 'react-aria-components';

<ColorWheel outerRadius={100} innerRadius={74}>
  <ColorWheelTrack />
  <ColorThumb />
</ColorWheel>

import {
  ColorThumb,
  ColorWheel,
  ColorWheelTrack
} from 'react-aria-components';

<ColorWheel
  outerRadius={100}
  innerRadius={74}
>
  <ColorWheelTrack />
  <ColorThumb />
</ColorWheel>

Show CSS

.react-aria-ColorThumb {
  border: 2px solid white;
  box-shadow: 0 0 0 1px black, inset 0 0 0 1px black;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-sizing: border-box;

  &[data-focus-visible] {
    width: 24px;
    height: 24px;
  }
}

.react-aria-ColorThumb {
  border: 2px solid white;
  box-shadow: 0 0 0 1px black, inset 0 0 0 1px black;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-sizing: border-box;

  &[data-focus-visible] {
    width: 24px;
    height: 24px;
  }
}

.react-aria-ColorThumb {
  border: 2px solid white;
  box-shadow: 0 0 0 1px black, inset 0 0 0 1px black;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-sizing: border-box;

  &[data-focus-visible] {
    width: 24px;
    height: 24px;
  }
}

Features#

The <input type="color"> HTML element can be used to build a color picker, however it is very inconsistent across browsers and operating systems and consists of a complete color picker rather than only a hue color wheel. useColorWheel helps achieve accessible and touch-friendly color wheels that can be styled as needed.

Customizable – Support for adjusting the hue of an HSL or HSB color value, with customizable radius and track thickness.
High quality interactions – Mouse, touch, and keyboard input is supported via the useMove hook. Pressing the track moves the thumb to that position. Text selection and touch scrolling are prevented while dragging.
Accessible – Announces localized hue descriptions for screen reader users (e.g. "cyan blue"). Uses a visually hidden <input> element for mobile screen reader support and HTML form integration.

Anatomy#

A color wheel consists of a circular track and a thumb that the user can drag to change the color hue. A visually hidden <input> element is used to represent the value to assistive technologies.

import {ColorWheel, ColorWheelTrack, ColorThumb} from 'react-aria-components';

<ColorWheel>
  <ColorWheelTrack />
  <ColorThumb />
</ColorWheel>

import {
  ColorThumb,
  ColorWheel,
  ColorWheelTrack
} from 'react-aria-components';

<ColorWheel>
  <ColorWheelTrack />
  <ColorThumb />
</ColorWheel>

import {
  ColorThumb,
  ColorWheel,
  ColorWheelTrack
} from 'react-aria-components';

<ColorWheel>
  <ColorWheelTrack />
  <ColorThumb />
</ColorWheel>

Reusable wrappers#

If you will use a ColorWheel in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.

import type {ColorWheelProps} from 'react-aria-components';

interface MyColorWheelProps
  extends Omit<ColorWheelProps, 'outerRadius' | 'innerRadius'> {}

export function MyColorWheel(props: MyColorWheelProps) {
  return (
    <ColorWheel {...props} outerRadius={100} innerRadius={74}>
      <ColorWheelTrack />
      <ColorThumb />
    </ColorWheel>
  );
}

<MyColorWheel defaultValue="hsl(30, 100%, 50%)" />

import type {ColorWheelProps} from 'react-aria-components';

interface MyColorWheelProps
  extends
    Omit<ColorWheelProps, 'outerRadius' | 'innerRadius'> {}

export function MyColorWheel(props: MyColorWheelProps) {
  return (
    <ColorWheel
      {...props}
      outerRadius={100}
      innerRadius={74}
    >
      <ColorWheelTrack />
      <ColorThumb />
    </ColorWheel>
  );
}

<MyColorWheel defaultValue="hsl(30, 100%, 50%)" />

import type {ColorWheelProps} from 'react-aria-components';

interface MyColorWheelProps
  extends
    Omit<
      ColorWheelProps,
      | 'outerRadius'
      | 'innerRadius'
    > {}

export function MyColorWheel(
  props:
    MyColorWheelProps
) {
  return (
    <ColorWheel
      {...props}
      outerRadius={100}
      innerRadius={74}
    >
      <ColorWheelTrack />
      <ColorThumb />
    </ColorWheel>
  );
}

<MyColorWheel defaultValue="hsl(30, 100%, 50%)" />

Value#

A ColorWheel's value specifies the position of the ColorWheel's thumb on the track, and accepts a string or Color object.

Uncontrolled#

By default, ColorWheel is uncontrolled with a default value of red (hue = 0˚). You can change the default value using the defaultValue prop.

<MyColorWheel defaultValue="hsl(80, 100%, 50%)" />

<MyColorWheel defaultValue="hsl(80, 100%, 50%)" />

<MyColorWheel defaultValue="hsl(80, 100%, 50%)" />

Controlled#

A ColorWheel can be made controlled using the value prop. The parseColor function is used to parse the initial color from an HSL string, stored in state. The onChange prop is used to update the value in state when the user drags the thumb.

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

function Example() {
  let [color, setColor] = React.useState(parseColor('hsl(0, 100%, 50%)'));
  return (
    <>
      <MyColorWheel value={color} onChange={setColor} />
      <p>Current color value: {color.toString('hsl')}</p>
    </>
  );
}

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

function Example() {
  let [color, setColor] = React.useState(
    parseColor('hsl(0, 100%, 50%)')
  );
  return (
    <>
      <MyColorWheel value={color} onChange={setColor} />
      <p>Current color value: {color.toString('hsl')}</p>
    </>
  );
}

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

function Example() {
  let [color, setColor] =
    React.useState(
      parseColor(
        'hsl(0, 100%, 50%)'
      )
    );
  return (
    <>
      <MyColorWheel
        value={color}
        onChange={setColor}
      />
      <p>
        Current color
        value:{' '}
        {color.toString(
          'hsl'
        )}
      </p>
    </>
  );
}

HTML forms#

ColorWheel supports the name prop for integration with HTML forms. The value will be submitted as a number between 0 and 360 degrees.

<MyColorWheel name="hue" />

<MyColorWheel name="hue" />

<MyColorWheel name="hue" />

Events#

ColorWheel supports two events: onChange and onChangeEnd. onChange is triggered whenever the ColorWheel's handle is dragged, and onChangeEnd is triggered when the user stops dragging the handle. Both events receive a Color object as a parameter.

The example below uses onChange and onChangeEnd to update two separate elements with the ColorWheel's value.

function Example() {
  let [currentValue, setCurrentValue] = React.useState(
    parseColor('hsl(50, 100%, 50%)')
  );
  let [finalValue, setFinalValue] = React.useState(currentValue);

  return (
    <div>
      <MyColorWheel
        value={currentValue}
        onChange={setCurrentValue}
        onChangeEnd={setFinalValue}
      />
      <p>Current value: {currentValue.toString('hsl')}</p>
      <p>Final value: {finalValue.toString('hsl')}</p>
    </div>
  );
}

function Example() {
  let [currentValue, setCurrentValue] = React.useState(
    parseColor('hsl(50, 100%, 50%)')
  );
  let [finalValue, setFinalValue] = React.useState(
    currentValue
  );

  return (
    <div>
      <MyColorWheel
        value={currentValue}
        onChange={setCurrentValue}
        onChangeEnd={setFinalValue}
      />
      <p>Current value: {currentValue.toString('hsl')}</p>
      <p>Final value: {finalValue.toString('hsl')}</p>
    </div>
  );
}

function Example() {
  let [
    currentValue,
    setCurrentValue
  ] = React.useState(
    parseColor(
      'hsl(50, 100%, 50%)'
    )
  );
  let [
    finalValue,
    setFinalValue
  ] = React.useState(
    currentValue
  );

  return (
    <div>
      <MyColorWheel
        value={currentValue}
        onChange={setCurrentValue}
        onChangeEnd={setFinalValue}
      />
      <p>
        Current value:
        {' '}
        {currentValue
          .toString(
            'hsl'
          )}
      </p>
      <p>
        Final value:{' '}
        {finalValue
          .toString(
            'hsl'
          )}
      </p>
    </div>
  );
}

Disabled#

A ColorWheel can be disabled using the isDisabled prop. This prevents the thumb from being focused or dragged. It's up to you to style your color wheel to appear disabled accordingly.

<MyColorWheel defaultValue="hsl(80, 100%, 50%)" isDisabled />

<MyColorWheel
  defaultValue="hsl(80, 100%, 50%)"
  isDisabled
/>

<MyColorWheel
  defaultValue="hsl(80, 100%, 50%)"
  isDisabled
/>

Show CSS

.react-aria-ColorWheel {
  &[data-disabled] {
    .react-aria-ColorWheelTrack {
      background: gray !important;
    }

    .react-aria-ColorThumb {
      background: gray !important;
      opacity: 0.5;
    }
  }
}

.react-aria-ColorWheel {
  &[data-disabled] {
    .react-aria-ColorWheelTrack {
      background: gray !important;
    }

    .react-aria-ColorThumb {
      background: gray !important;
      opacity: 0.5;
    }
  }
}

.react-aria-ColorWheel {
  &[data-disabled] {
    .react-aria-ColorWheelTrack {
      background: gray !important;
    }

    .react-aria-ColorThumb {
      background: gray !important;
      opacity: 0.5;
    }
  }
}

Labeling#

By default, a localized string for the "hue" channel name is used as the aria-label for the ColorWheel. If you wish to override this with a more specific label, an aria-label or aria-labelledby prop may be passed to further identify the element to assistive technologies.

For example, for a ColorArea that adjusts a background color you might pass the aria-label prop, "Background color". If you provide your own aria-label or aria-labelledby, be sure to localize the string appropriately.

<div style={{ display: 'flex', gap: 8, alignItems: 'end', flexWrap: 'wrap' }}>
  <MyColorWheel
    aria-label="Background color"    defaultValue="hsl(0, 100%, 50%)"
  />
  <div>
    <label id="hsl-aria-labelledby-id">Background color</label>    <MyColorWheel
      aria-labelledby="hsl-aria-labelledby-id"      defaultValue="hsl(0, 100%, 50%)"
    />
  </div>
</div>

<div
  style={{
    display: 'flex',
    gap: 8,
    alignItems: 'end',
    flexWrap: 'wrap'
  }}
>
  <MyColorWheel
    aria-label="Background color"    defaultValue="hsl(0, 100%, 50%)"
  />
  <div>
    <label id="hsl-aria-labelledby-id">
      Background color
    </label>    <MyColorWheel
      aria-labelledby="hsl-aria-labelledby-id"      defaultValue="hsl(0, 100%, 50%)"
    />
  </div>
</div>

<div
  style={{
    display: 'flex',
    gap: 8,
    alignItems: 'end',
    flexWrap: 'wrap'
  }}
>
  <MyColorWheel
    aria-label="Background color"    defaultValue="hsl(0, 100%, 50%)"
  />
  <div>
    <label id="hsl-aria-labelledby-id">
      Background color
    </label>    <MyColorWheel
      aria-labelledby="hsl-aria-labelledby-id"      defaultValue="hsl(0, 100%, 50%)"
    />
  </div>
</div>

Accessibility#

The aria-valuetext of the <input> element is formatted according to the user's locale automatically. It also includes a localized description of the selected color hue (e.g. "cyan blue").

Props#

ColorWheel#

Name	Type	Default	Description
`outerRadius`	`number`	—	The outer radius of the color wheel.
`innerRadius`	`number`	—	The inner radius of the color wheel.
`isDisabled`	`boolean`	—	Whether the ColorWheel is disabled.
`defaultValue`	`string \| Color`	`'hsl(0, 100%, 50%)'`	The default value (uncontrolled).
`value`	`T`	—	The current value (controlled).
`name`	`string`	—	The name of the input element, used when submitting an HTML form. See MDN.
`children`	`ReactNode \| ( (values: ColorWheelRenderProps & & {defaultChildren: ReactNode \| \| undefined } )) => ReactNode`	—	The children of the component. A function may be provided to alter the children based on component state.
`className`	`string \| ( (values: ColorWheelRenderProps & & {defaultClassName: string \| \| undefined } )) => string`	—	The CSS className for the element. A function may be provided to compute the class based on component state.
`style`	`CSSProperties \| ( (values: ColorWheelRenderProps & & {defaultStyle: CSSProperties } )) => CSSProperties \| undefined`	—	The inline style for the element. A function may be provided to compute the style based on component state.

Events

Name	Type	Description
`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.

Layout

Name	Type	Description
`slot`	`string \| null`	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.

Accessibility

Name	Type	Description
`id`	`string`	The element's unique identifier. See MDN.
`aria-label`	`string`	Defines a string value that labels the current element.
`aria-labelledby`	`string`	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	Identifies the element (or elements) that provide a detailed, extended description for the object.

ColorWheelTrack#

The <ColorWheelTrack> component renders a circular gradient repreresenting the colors that can be selected for the color channel.

Show props

Name	Type	Description
`className`	`string \| ( (values: ColorWheelTrackRenderProps & & {defaultClassName: string \| \| undefined } )) => string`	The CSS className for the element. A function may be provided to compute the class based on component state.
`style`	`CSSProperties \| ( (values: ColorWheelTrackRenderProps & & {defaultStyle: CSSProperties } )) => CSSProperties \| undefined`	The inline style for the element. A function may be provided to compute the style based on component state.

ColorThumb#

The <ColorThumb> component renders a draggable thumb with a preview of the selected color.

Show props

Name	Type	Description
`children`	`ReactNode \| ( (values: ColorThumbRenderProps & & {defaultChildren: ReactNode \| \| undefined } )) => ReactNode`	The children of the component. A function may be provided to alter the children based on component state.
`className`	`string \| ( (values: ColorThumbRenderProps & & {defaultClassName: string \| \| undefined } )) => string`	The CSS className for the element. A function may be provided to compute the class based on component state.
`style`	`CSSProperties \| ( (values: ColorThumbRenderProps & & {defaultStyle: CSSProperties } )) => CSSProperties \| undefined`	The inline style for the element. A function may be provided to compute the style based on component state.

Events

Name	Type	Description
`onHoverStart`	`( (e: HoverEvent )) => void`	Handler that is called when a hover interaction starts.
`onHoverEnd`	`( (e: HoverEvent )) => void`	Handler that is called when a hover interaction ends.
`onHoverChange`	`( (isHovering: boolean )) => void`	Handler that is called when the hover state changes.

Styling#

React Aria components can be styled in many ways, including using CSS classes, inline styles, utility classes (e.g. Tailwind), CSS-in-JS (e.g. Styled Components), etc. By default, all components include a builtin className attribute which can be targeted using CSS selectors. These follow the react-aria-ComponentName naming convention.

.react-aria-ColorWheel {
  /* ... */
}

.react-aria-ColorWheel {
  /* ... */
}

.react-aria-ColorWheel {
  /* ... */
}

A custom className can also be specified on any component. This overrides the default className provided by React Aria with your own.

<ColorWheel className="my-color-wheel">
  {/* ... */}
</ColorWheel>

<ColorWheel className="my-color-wheel">
  {/* ... */}
</ColorWheel>

<ColorWheel className="my-color-wheel">
  {/* ... */}
</ColorWheel>

In addition, some components support multiple UI states (e.g. focused, placeholder, readonly, etc.). React Aria components expose states using data attributes, which you can target in CSS selectors. For example:

.react-aria-ColorThumb[data-dragging] {
  /* ... */
}

.react-aria-ColorThumb[data-focused] {
  /* ... */
}

.react-aria-ColorThumb[data-dragging] {
  /* ... */
}

.react-aria-ColorThumb[data-focused] {
  /* ... */
}

.react-aria-ColorThumb[data-dragging] {
  /* ... */
}

.react-aria-ColorThumb[data-focused] {
  /* ... */
}

The className and style props also accept functions which receive states for styling. This lets you dynamically determine the classes or styles to apply, which is useful when using utility CSS libraries like Tailwind.

<ColorThumb
  className={({ isDragging }) => isDragging ? 'scale-150' : 'scale-100'}
/>

<ColorThumb
  className={({ isDragging }) =>
    isDragging ? 'scale-150' : 'scale-100'}
/>

<ColorThumb
  className={(
    { isDragging }
  ) =>
    isDragging
      ? 'scale-150'
      : 'scale-100'}
/>

The states, selectors, and render props for each component used in a ColorWheel are documented below.

ColorWheel#

The ColorWheel component can be targeted with the .react-aria-ColorWheel CSS selector, or by overriding with a custom className. It supports the following states:

Name	CSS Selector	Description
`isDisabled`	`[data-disabled]`	Whether the color wheel is disabled.
`state`	`—`	State of the color color wheel.

ColorWheelTrack#

The ColorWheelTrack component can be targeted with the .react-aria-ColorWheelTrack CSS selector, or by overriding with a custom className. It supports the following states:

Name	CSS Selector	Description
`isDisabled`	`[data-disabled]`	Whether the color wheel is disabled.
`state`	`—`	State of the color color wheel.

ColorThumb#

The ColorThumb component can be targeted with the .react-aria-ColorThumb CSS selector, or by overriding with a custom className. It supports the following states:

Name	CSS Selector	Description
`color`	`—`	The selected color, excluding the alpha channel.
`isDragging`	`[data-dragging]`	Whether this thumb is currently being dragged.
`isHovered`	`[data-hovered]`	Whether the thumb is currently hovered with a mouse.
`isFocused`	`[data-focused]`	Whether the thumb is currently focused.
`isFocusVisible`	`[data-focus-visible]`	Whether the thumb is keyboard focused.
`isDisabled`	`[data-disabled]`	Whether the thumb is disabled.

Advanced customization#

Contexts#

All React Aria Components export a corresponding context that can be used to send props to them from a parent element. This enables you to build your own compositional APIs similar to those found in React Aria Components itself. You can send any prop or ref via context that you could pass to the corresponding component. The local props and ref on the component are merged with the ones passed via context, with the local props taking precedence (following the rules documented in mergeProps).

Component	Context	Props	Ref
`ColorWheel`	`ColorWheelContext`	`ColorWheelProps`	`HTMLDivElement`

This example shows a ColorWheelDescription component that accepts a color wheel in its children and renders a description element below it. It uses the useId hook to generate a unique id for the description, and associates it with the color wheel via the aria-describedby attribute passed to the ColorWheelContext provider.

import {ColorWheelContext} from 'react-aria-components';
import {useId} from 'react-aria';

interface ColorWheelDescriptionProps {
  children?: React.ReactNode;
  description?: string;
}

function ColorWheelDescription(
  { children, description }: ColorWheelDescriptionProps
) {
  let descriptionId = useId();
  return (
    <div>
      <ColorWheelContext.Provider value={{ 'aria-describedby': descriptionId }}>        {children}
      </ColorWheelContext.Provider>
      <small id={descriptionId}>{description}</small>
    </div>
  );
}

<ColorWheelDescription description="Choose a background color for your profile.">
  <MyColorWheel />
</ColorWheelDescription>

import {ColorWheelContext} from 'react-aria-components';
import {useId} from 'react-aria';

interface ColorWheelDescriptionProps {
  children?: React.ReactNode;
  description?: string;
}

function ColorWheelDescription(
  { children, description }: ColorWheelDescriptionProps
) {
  let descriptionId = useId();
  return (
    <div>
      <ColorWheelContext.Provider
        value={{ 'aria-describedby': descriptionId }}
      >        {children}
      </ColorWheelContext.Provider>
      <small id={descriptionId}>{description}</small>
    </div>
  );
}

<ColorWheelDescription description="Choose a background color for your profile.">
  <MyColorWheel />
</ColorWheelDescription>

import {ColorWheelContext} from 'react-aria-components';
import {useId} from 'react-aria';

interface ColorWheelDescriptionProps {
  children?:
    React.ReactNode;
  description?: string;
}

function ColorWheelDescription(
  {
    children,
    description
  }: ColorWheelDescriptionProps
) {
  let descriptionId =
    useId();
  return (
    <div>
      <ColorWheelContext.Provider
        value={{
          'aria-describedby':
            descriptionId
        }}
      >        {children}
      </ColorWheelContext.Provider>
      <small
        id={descriptionId}
      >
        {description}
      </small>
    </div>
  );
}

<ColorWheelDescription description="Choose a background color for your profile.">
  <MyColorWheel />
</ColorWheelDescription>

State#

ColorWheel provides a ColorWheelState object to its children via ColorWheelStateContext. This can be used to access and manipulate the color wheel's state.

This example shows a HueField component that can be placed within a ColorWheel to allow the user to enter a number and update the hue.

import {ColorWheelStateContext, Input, NumberField, useLocale} from 'react-aria-components';

function HueField() {
  let state = React.useContext(ColorWheelStateContext)!;  let { locale } = useLocale();
  return (
    <NumberField
      aria-label={state.value.getChannelName('hue', locale)}
      value={state.value.getChannelValue('hue')}
      onChange={(v) => state.setValue(state.value.withChannelValue('hue', v))}
      formatOptions={state.value.getChannelFormatOptions('hue')}
    >
      <Input />
    </NumberField>
  );
}

<ColorWheel outerRadius={100} innerRadius={74}>
  <ColorWheelTrack />
  <ColorThumb />
  <HueField /></ColorWheel>

import {
  ColorWheelStateContext,
  Input,
  NumberField,
  useLocale
} from 'react-aria-components';

function HueField() {
  let state = React.useContext(ColorWheelStateContext)!;  let { locale } = useLocale();
  return (
    <NumberField
      aria-label={state.value.getChannelName('hue', locale)}
      value={state.value.getChannelValue('hue')}
      onChange={(v) =>
        state.setValue(
          state.value.withChannelValue('hue', v)
        )}
      formatOptions={state.value.getChannelFormatOptions(
        'hue'
      )}
    >
      <Input />
    </NumberField>
  );
}

<ColorWheel outerRadius={100} innerRadius={74}>
  <ColorWheelTrack />
  <ColorThumb />
  <HueField /></ColorWheel>

import {
  ColorWheelStateContext,
  Input,
  NumberField,
  useLocale
} from 'react-aria-components';

function HueField() {
  let state = React
    .useContext(
      ColorWheelStateContext
    )!;  let { locale } =
    useLocale();
  return (
    <NumberField
      aria-label={state
        .value
        .getChannelName(
          'hue',
          locale
        )}
      value={state.value
        .getChannelValue(
          'hue'
        )}
      onChange={(v) =>
        state.setValue(
          state.value
            .withChannelValue(
              'hue',
              v
            )
        )}
      formatOptions={state
        .value
        .getChannelFormatOptions(
          'hue'
        )}
    >
      <Input />
    </NumberField>
  );
}

<ColorWheel
  outerRadius={100}
  innerRadius={74}
>
  <ColorWheelTrack />
  <ColorThumb />
  <HueField /></ColorWheel>

Show CSS

.react-aria-Input {
  width: 4ch;
}

.react-aria-Input {
  width: 4ch;
}

.react-aria-Input {
  width: 4ch;
}

Hooks#

If you need to customize things even further, such as accessing internal state or customizing DOM structure, you can drop down to the lower level Hook-based API. See useColorWheel for more details.

Represents a color value.

Method	Description
`toFormat( (format: ColorFormat )): Color`	Converts the color to the given color format, and returns a new Color object.
`toString( (format?: ColorFormat \| \| 'css' )): string`	Converts the color to a string in the given format.
`clone(): Color`	Returns a duplicate of the color value.
`toHexInt(): number`	Converts the color to hex, and returns an integer representation.
`getChannelValue( (channel: ColorChannel )): number`	Returns the numeric value for a given channel. Throws an error if the channel is unsupported in the current color format.
`withChannelValue( (channel: ColorChannel, , value: number )): Color`	Sets the numeric value for a given channel, and returns a new Color object. Throws an error if the channel is unsupported in the current color format.
`getChannelRange( (channel: ColorChannel )): ColorChannelRange`	Returns the minimum, maximum, and step values for a given channel.
`getChannelName( (channel: ColorChannel, , locale: string )): string`	Returns a localized color channel name for a given channel and locale, for use in visual or accessibility labels.
`getChannelFormatOptions( (channel: ColorChannel )): Intl.NumberFormatOptions`	Returns the number formatting options for the given channel.
`formatChannelValue( (channel: ColorChannel, , locale: string )): string`	Formats the numeric value for a given channel for display according to the provided locale.
`getColorSpace(): ColorSpace`	Returns the color space, 'rgb', 'hsb' or 'hsl', for the current color.
`getColorSpaceAxes( (xyChannels: {xChannel?: ColorChannel, yChannel?: ColorChannel } )): ColorAxes`	Returns the color space axes, xChannel, yChannel, zChannel.
`getColorChannels(): [ ColorChannel, ColorChannel, ColorChannel ]`	Returns an array of the color channels within the current color space space.
`getColorName( (locale: string )): string`	Returns a localized name for the color, for use in visual or accessibility labels.
`getHueName( (locale: string )): string`	Returns a localized name for the hue, for use in visual or accessibility labels.

A list of supported color formats.

'hex'
  | 'hexa'
  | 'rgb'
  | 'rgba'
  | 'hsl'
  | 'hsla'
  | 'hsb'
  | 'hsba'

A list of color channels.

'hue'
  | 'saturation'
  | 'brightness'
  | 'lightness'
  | 'red'
  | 'green'
  | 'blue'
  | 'alpha'

Name	Type	Description
`minValue`	`number`	The minimum value of the color channel.
`maxValue`	`number`	The maximum value of the color channel.
`step`	`number`	The step value of the color channel, used when incrementing and decrementing.
`pageSize`	`number`	The page step value of the color channel, used when incrementing and decrementing.

'rgb'
  | 'hsl'
  | 'hsb'

{xChannel: ColorChannel,
yChannel: ColorChannel,
zChannel: ColorChannel
}

Parses a color from a string value. Throws an error if the string could not be parsed.

parseColor(
  (value: string
)): Color

Name	Type	Description
`isDisabled`	`boolean`	Whether the color wheel is disabled.
`state`	`ColorWheelState`	State of the color color wheel.

Properties

Name	Type	Description
`value`	`Color`	The current color value represented by the color wheel.
`hue`	`number`	The current value of the hue channel displayed by the color wheel.
`isDragging`	`boolean`	Whether the color wheel is currently being dragged.
`step`	`number`	The step value of the hue channel, used when incrementing and decrementing.
`pageStep`	`number`	The page step value of the hue channel, used when incrementing and decrementing.
`isDisabled`	`boolean`	Whether the color wheel is disabled.

Methods

Method	Description
`setValue( (value: string \| \| Color )): void`	Sets the color value represented by the color wheel, and triggers `onChange`.
`setHue( (value: number )): void`	Sets the hue channel of the current color value and triggers `onChange`.
`setHueFromPoint( x: number, y: number, radius: number ): void`	Sets the hue channel of the current color value based on the given coordinates and radius of the color wheel, and triggers `onChange`.
`getThumbPosition( (radius: number )): {x: number, y: number }`	Returns the coordinates of the thumb relative to the center point of the color wheel.
`increment( (stepSize?: number )): void`	Increments the hue by the given amount (defaults to 1).
`decrement( (stepSize?: number )): void`	Decrements the hue by the given amount (defaults to 1).
`setDragging( (value: boolean )): void`	Sets whether the color wheel is being dragged.
`getDisplayColor(): Color`	Returns the color that should be displayed in the color wheel instead of `value`.

Name	Type	Description
`isDisabled`	`boolean`	Whether the color wheel is disabled.
`state`	`ColorWheelState`	State of the color color wheel.

Name	Type	Description
`color`	`Color`	The selected color, excluding the alpha channel.
`isDragging`	`boolean`	Whether this thumb is currently being dragged.
`isHovered`	`boolean`	Whether the thumb is currently hovered with a mouse.
`isFocused`	`boolean`	Whether the thumb is currently focused.
`isFocusVisible`	`boolean`	Whether the thumb is keyboard focused.
`isDisabled`	`boolean`	Whether the thumb is disabled.

Name	Type	Description
`type`	`'hoverstart' \| 'hoverend'`	The type of hover event being fired.
`pointerType`	`'mouse' \| 'pen'`	The pointer type that triggered the hover event.
`target`	`HTMLElement`	The target element of the hover event.

Name	Type	Default	Description
`outerRadius`	`number`	—	The outer radius of the color wheel.
`innerRadius`	`number`	—	The inner radius of the color wheel.
`isDisabled`	`boolean`	—	Whether the ColorWheel is disabled.
`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.
`defaultValue`	`string \| Color`	`'hsl(0, 100%, 50%)'`	The default value (uncontrolled).
`value`	`T`	—	The current value (controlled).
`name`	`string`	—	The name of the input element, used when submitting an HTML form. See MDN.
`id`	`string`	—	The element's unique identifier. See MDN.
`aria-label`	`string`	—	Defines a string value that labels the current element.
`aria-labelledby`	`string`	—	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	—	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	—	Identifies the element (or elements) that provide a detailed, extended description for the object.
`children`	`ReactNode \| ( (values: ColorWheelRenderProps & & {defaultChildren: ReactNode \| \| undefined } )) => ReactNode`	—	The children of the component. A function may be provided to alter the children based on component state.
`className`	`string \| ( (values: ColorWheelRenderProps & & {defaultClassName: string \| \| undefined } )) => string`	—	The CSS className for the element. A function may be provided to compute the class based on component state.
`style`	`CSSProperties \| ( (values: ColorWheelRenderProps & & {defaultStyle: CSSProperties } )) => CSSProperties \| undefined`	—	The inline style for the element. A function may be provided to compute the style based on component state.
`slot`	`string \| null`	—	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.