# Color Picker

URL: https://ark-ui.com/docs/components/color-picker
LLM: https://ark-ui.com/llms.txt/components/color-picker

A component that allows users to select a color from a color picker.

---



## Anatomy



```tsx
<ColorPicker.Root>
  <ColorPicker.Label />
  <ColorPicker.Control>
    <ColorPicker.ChannelInput />
    <ColorPicker.Trigger>
      <ColorPicker.ValueSwatch />
    </ColorPicker.Trigger>
  </ColorPicker.Control>
  <ColorPicker.Positioner>
    <ColorPicker.Content>
      <ColorPicker.Area>
        <ColorPicker.AreaBackground />
        <ColorPicker.AreaThumb />
      </ColorPicker.Area>
      <ColorPicker.EyeDropperTrigger />
      <ColorPicker.ChannelSlider>
        <ColorPicker.ChannelSliderTrack />
        <ColorPicker.ChannelSliderThumb />
      </ColorPicker.ChannelSlider>
      <ColorPicker.SwatchGroup>
        <ColorPicker.SwatchTrigger>
          <ColorPicker.Swatch />
        </ColorPicker.SwatchTrigger>
      </ColorPicker.SwatchGroup>
    </ColorPicker.Content>
  </ColorPicker.Positioner>
  <ColorPicker.HiddenInput />
</ColorPicker.Root>
```

## Examples

```tsx
import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
import { PipetteIcon } from 'lucide-react'
import styles from 'styles/color-picker.module.css'

export const Basic = () => {
  return (
    <ColorPicker.Root className={styles.Root} defaultValue={parseColor('#eb5e41')}>
      <ColorPicker.Label className={styles.Label}>Color</ColorPicker.Label>

      <ColorPicker.Control className={styles.Control}>
        <ColorPicker.ChannelInput className={styles.Input} channel="hex" />
        <ColorPicker.ChannelInput className={styles.ChannelInput} channel="alpha" />
        <ColorPicker.Trigger className={styles.Trigger}>
          <div className={styles.Swatch}>
            <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
            <ColorPicker.ValueSwatch className={styles.ValueSwatch} />
          </div>
        </ColorPicker.Trigger>
      </ColorPicker.Control>

      <ColorPicker.Positioner>
        <ColorPicker.Content className={styles.Content}>
          <ColorPicker.Area className={styles.Area}>
            <ColorPicker.AreaBackground className={styles.AreaBackground} />
            <ColorPicker.AreaThumb className={styles.AreaThumb} />
          </ColorPicker.Area>
          <div className={styles.SliderGroup}>
            <ColorPicker.EyeDropperTrigger className={styles.EyeDropperTrigger}>
              <PipetteIcon />
            </ColorPicker.EyeDropperTrigger>
            <div className={styles.ChannelSliders}>
              <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="hue">
                <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
                <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
              </ColorPicker.ChannelSlider>
              <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="alpha">
                <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
                <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
                <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
              </ColorPicker.ChannelSlider>
            </div>
          </div>
        </ColorPicker.Content>
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
  )
}
```

### Controlled

Use the `value` and `onValueChange` props to programatically control the color picker's state.

```tsx
import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
import { PipetteIcon } from 'lucide-react'
import { useState } from 'react'
import styles from 'styles/color-picker.module.css'

export const Controlled = () => {
  const [color, setColor] = useState(() => parseColor('hsl(20, 100%, 50%)'))

  return (
    <div className="stack">
      <output>Selected color: {color.toString('hex')}</output>

      <ColorPicker.Root className={styles.Root} value={color} onValueChange={(e) => setColor(e.value)}>
        <ColorPicker.Label className={styles.Label}>Color</ColorPicker.Label>
        <ColorPicker.Control className={styles.Control}>
          <ColorPicker.ChannelInput className={styles.Input} channel="hex" />
          <ColorPicker.ChannelInput className={styles.ChannelInput} channel="alpha" />
          <ColorPicker.Trigger className={styles.Trigger}>
            <div className={styles.Swatch}>
              <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
              <ColorPicker.ValueSwatch className={styles.ValueSwatch} />
            </div>
          </ColorPicker.Trigger>
        </ColorPicker.Control>

        <ColorPicker.Positioner>
          <ColorPicker.Content className={styles.Content}>
            <ColorPicker.Area className={styles.Area}>
              <ColorPicker.AreaBackground className={styles.AreaBackground} />
              <ColorPicker.AreaThumb className={styles.AreaThumb} />
            </ColorPicker.Area>
            <div className={styles.SliderGroup}>
              <ColorPicker.EyeDropperTrigger className={styles.EyeDropperTrigger}>
                <PipetteIcon />
              </ColorPicker.EyeDropperTrigger>
              <div className={styles.ChannelSliders}>
                <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="hue">
                  <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
                  <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
                </ColorPicker.ChannelSlider>
                <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="alpha">
                  <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
                  <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
                  <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
                </ColorPicker.ChannelSlider>
              </div>
            </div>
          </ColorPicker.Content>
        </ColorPicker.Positioner>

        <ColorPicker.HiddenInput />
      </ColorPicker.Root>
    </div>
  )
}
```

### Open Controlled

Control the open state of the color picker popover programmatically using the `open` and `onOpenChange` props.

```tsx
import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
import { PipetteIcon } from 'lucide-react'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/color-picker.module.css'

export const OpenControlled = () => {
  const [open, setOpen] = useState(false)

  return (
    <div className="stack">
      <button className={button.Root} onClick={() => setOpen(!open)}>
        Toggle
      </button>

      <ColorPicker.Root
        className={styles.Root}
        open={open}
        onOpenChange={(e) => setOpen(e.open)}
        defaultValue={parseColor('#eb5e41')}
      >
        <ColorPicker.Label className={styles.Label}>Color</ColorPicker.Label>
        <ColorPicker.Control className={styles.Control}>
          <ColorPicker.ChannelInput className={styles.Input} channel="hex" />
          <ColorPicker.Trigger className={styles.Trigger}>
            <div className={styles.Swatch}>
              <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
              <ColorPicker.ValueSwatch className={styles.ValueSwatch} />
            </div>
          </ColorPicker.Trigger>
        </ColorPicker.Control>

        <ColorPicker.Positioner>
          <ColorPicker.Content className={styles.Content}>
            <ColorPicker.Area className={styles.Area}>
              <ColorPicker.AreaBackground className={styles.AreaBackground} />
              <ColorPicker.AreaThumb className={styles.AreaThumb} />
            </ColorPicker.Area>
            <div className={styles.SliderGroup}>
              <ColorPicker.EyeDropperTrigger className={styles.EyeDropperTrigger}>
                <PipetteIcon />
              </ColorPicker.EyeDropperTrigger>
              <div className={styles.ChannelSliders}>
                <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="hue">
                  <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
                  <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
                </ColorPicker.ChannelSlider>
                <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="alpha">
                  <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
                  <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
                  <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
                </ColorPicker.ChannelSlider>
              </div>
            </div>
          </ColorPicker.Content>
        </ColorPicker.Positioner>
        <ColorPicker.HiddenInput />
      </ColorPicker.Root>
    </div>
  )
}
```

### Root Provider

An alternative way to control the color picker is to use the `RootProvider` component and the `useColorPicker` hook.
This way you can access the state and methods from outside the component.

```tsx
import { ColorPicker, parseColor, useColorPicker } from '@ark-ui/react/color-picker'
import { CheckIcon, PipetteIcon } from 'lucide-react'
import styles from 'styles/color-picker.module.css'

const swatches = ['red', 'blue', 'green', 'orange']

export const RootProvider = () => {
  const colorPicker = useColorPicker({ defaultValue: parseColor('#eb5e41') })

  return (
    <div className="stack">
      <output>Color: {colorPicker.valueAsString}</output>

      <ColorPicker.RootProvider className={styles.Root} value={colorPicker}>
        <ColorPicker.Label className={styles.Label}>Color</ColorPicker.Label>
        <ColorPicker.Control className={styles.Control}>
          <ColorPicker.ChannelInput className={styles.Input} channel="hex" />
          <ColorPicker.ChannelInput className={styles.ChannelInput} channel="alpha" />
          <ColorPicker.Trigger className={styles.Trigger}>
            <div className={styles.Swatch}>
              <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
              <ColorPicker.ValueSwatch className={styles.ValueSwatch} />
            </div>
          </ColorPicker.Trigger>
        </ColorPicker.Control>
        <ColorPicker.Positioner>
          <ColorPicker.Content className={styles.Content}>
            <ColorPicker.Area className={styles.Area}>
              <ColorPicker.AreaBackground className={styles.AreaBackground} />
              <ColorPicker.AreaThumb className={styles.AreaThumb} />
            </ColorPicker.Area>
            <div className={styles.SliderGroup}>
              <ColorPicker.EyeDropperTrigger className={styles.EyeDropperTrigger}>
                <PipetteIcon />
              </ColorPicker.EyeDropperTrigger>
              <div className={styles.ChannelSliders}>
                <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="hue">
                  <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
                  <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
                </ColorPicker.ChannelSlider>
                <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="alpha">
                  <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
                  <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
                  <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
                </ColorPicker.ChannelSlider>
              </div>
            </div>
            <ColorPicker.SwatchGroup className={styles.SwatchGroup}>
              {swatches.map((color) => (
                <ColorPicker.SwatchTrigger key={color} className={styles.SwatchTrigger} value={color}>
                  <ColorPicker.Swatch className={styles.Swatch} value={color}>
                    <ColorPicker.SwatchIndicator className={styles.SwatchIndicator}>
                      <CheckIcon />
                    </ColorPicker.SwatchIndicator>
                  </ColorPicker.Swatch>
                </ColorPicker.SwatchTrigger>
              ))}
            </ColorPicker.SwatchGroup>
            <ColorPicker.View className={styles.View} format="rgba">
              <div className={styles.ChannelInputGroup}>
                <ColorPicker.ChannelInput className={styles.ChannelInput} channel="hex" />
                <ColorPicker.ChannelInput className={styles.ChannelInput} channel="alpha" />
              </div>
            </ColorPicker.View>
            <ColorPicker.View className={styles.View} format="hsla">
              <div className={styles.ChannelInputGroup}>
                <ColorPicker.ChannelInput className={styles.ChannelInput} channel="hue" />
                <ColorPicker.ChannelInput className={styles.ChannelInput} channel="saturation" />
                <ColorPicker.ChannelInput className={styles.ChannelInput} channel="lightness" />
              </div>
            </ColorPicker.View>
          </ColorPicker.Content>
        </ColorPicker.Positioner>
        <ColorPicker.HiddenInput />
      </ColorPicker.RootProvider>
    </div>
  )
}
```

### Disabled

Use the `disabled` prop to disable the color picker.

```tsx
import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
import styles from 'styles/color-picker.module.css'

export const Disabled = () => {
  return (
    <ColorPicker.Root className={styles.Root} disabled defaultValue={parseColor('#eb5e41')}>
      <ColorPicker.Label className={styles.Label}>Color</ColorPicker.Label>
      <ColorPicker.Control className={styles.Control}>
        <ColorPicker.ChannelInput className={styles.Input} channel="hex" />
        <ColorPicker.Trigger className={styles.Trigger}>
          <div className={styles.Swatch}>
            <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
            <ColorPicker.ValueSwatch className={styles.ValueSwatch} />
          </div>
        </ColorPicker.Trigger>
      </ColorPicker.Control>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
  )
}
```

### Inline

Render the color picker inline without a popover by using the `inline` prop.

```tsx
import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
import { CheckIcon } from 'lucide-react'
import styles from 'styles/color-picker.module.css'

const swatches = ['red', 'blue', 'green', 'orange']

export const Inline = () => {
  return (
    <ColorPicker.Root className={styles.Root} inline defaultValue={parseColor('#eb5e41')}>
      <ColorPicker.Area className={styles.Area}>
        <ColorPicker.AreaBackground className={styles.AreaBackground} />
        <ColorPicker.AreaThumb className={styles.AreaThumb} />
      </ColorPicker.Area>

      <ColorPicker.SwatchGroup className={styles.SwatchGroup}>
        {swatches.map((color) => (
          <ColorPicker.SwatchTrigger key={color} className={styles.SwatchTrigger} value={color}>
            <ColorPicker.Swatch className={styles.Swatch} value={color}>
              <ColorPicker.SwatchIndicator className={styles.SwatchIndicator}>
                <CheckIcon />
              </ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
        ))}
      </ColorPicker.SwatchGroup>
    </ColorPicker.Root>
  )
}
```

### Input Only

A minimal color picker with just an input field, value swatch, and eye dropper trigger.

```tsx
import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
import { PipetteIcon } from 'lucide-react'
import styles from 'styles/color-picker.module.css'

export const InputOnly = () => {
  return (
    <ColorPicker.Root className={styles.Root} defaultValue={parseColor('#eb5e41')}>
      <ColorPicker.Label className={styles.Label}>Color</ColorPicker.Label>
      <ColorPicker.Control className={styles.Control}>
        <ColorPicker.ValueSwatch className={styles.Swatch} />
        <ColorPicker.ChannelInput className={styles.Input} channel="hex" />
        <ColorPicker.EyeDropperTrigger className={styles.EyeDropperTrigger}>
          <PipetteIcon />
        </ColorPicker.EyeDropperTrigger>
      </ColorPicker.Control>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
  )
}
```

### Slider Only

Display only the channel sliders for RGB color selection.

```tsx
import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
import styles from 'styles/color-picker.module.css'

export const SliderOnly = () => {
  return (
    <ColorPicker.Root className={styles.Root} inline defaultValue={parseColor('#5dd016')}>
      <div className="hstack">
        <div className={styles.Swatch}>
          <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
          <ColorPicker.ValueSwatch className={styles.ValueSwatch} />
        </div>
        <ColorPicker.ValueText className={styles.ValueText} />
      </div>
      <ColorPicker.View className={styles.View} format="rgba">
        <div className={styles.ChannelSliderRow}>
          <span className={styles.ChannelSliderLabel}>R</span>
          <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="red">
            <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
            <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
            <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
          </ColorPicker.ChannelSlider>
        </div>
        <div className={styles.ChannelSliderRow}>
          <span className={styles.ChannelSliderLabel}>G</span>
          <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="green">
            <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
            <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
            <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
          </ColorPicker.ChannelSlider>
        </div>
        <div className={styles.ChannelSliderRow}>
          <span className={styles.ChannelSliderLabel}>B</span>
          <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="blue">
            <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
            <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
            <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
          </ColorPicker.ChannelSlider>
        </div>
      </ColorPicker.View>
    </ColorPicker.Root>
  )
}
```

### Swatch Only

A simple color picker with only preset color swatches.

```tsx
import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
import { CheckIcon } from 'lucide-react'
import styles from 'styles/color-picker.module.css'

const swatches = ['red', 'pink', 'orange', 'purple']

export const SwatchOnly = () => {
  return (
    <ColorPicker.Root className={styles.Root} inline defaultValue={parseColor('#eb5e41')}>
      <output>
        Selected color: <ColorPicker.ValueText className={styles.ValueText} />
      </output>
      <ColorPicker.SwatchGroup className={styles.SwatchGroup}>
        {swatches.map((color) => (
          <ColorPicker.SwatchTrigger key={color} className={styles.SwatchTrigger} value={color}>
            <ColorPicker.Swatch className={styles.Swatch} value={color}>
              <ColorPicker.SwatchIndicator className={styles.SwatchIndicator}>
                <CheckIcon />
              </ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
        ))}
      </ColorPicker.SwatchGroup>
    </ColorPicker.Root>
  )
}
```

### Swatches

Include preset color swatches in the color picker content for quick color selection.

```tsx
import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
import { CheckIcon, PipetteIcon } from 'lucide-react'
import styles from 'styles/color-picker.module.css'

const swatches = ['red', 'blue', 'green', 'orange']

export const Swatches = () => {
  return (
    <ColorPicker.Root className={styles.Root} defaultValue={parseColor('#eb5e41')}>
      <ColorPicker.Label className={styles.Label}>Color</ColorPicker.Label>

      <ColorPicker.Control className={styles.Control}>
        <ColorPicker.ChannelInput className={styles.Input} channel="hex" />
        <ColorPicker.ChannelInput className={styles.ChannelInput} channel="alpha" />
        <ColorPicker.Trigger className={styles.Trigger}>
          <div className={styles.Swatch}>
            <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
            <ColorPicker.ValueSwatch className={styles.ValueSwatch} />
          </div>
        </ColorPicker.Trigger>
      </ColorPicker.Control>

      <ColorPicker.Positioner>
        <ColorPicker.Content className={styles.Content}>
          <ColorPicker.Area className={styles.Area}>
            <ColorPicker.AreaBackground className={styles.AreaBackground} />
            <ColorPicker.AreaThumb className={styles.AreaThumb} />
          </ColorPicker.Area>
          <div className={styles.SliderGroup}>
            <ColorPicker.EyeDropperTrigger className={styles.EyeDropperTrigger}>
              <PipetteIcon />
            </ColorPicker.EyeDropperTrigger>
            <div className={styles.ChannelSliders}>
              <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="hue">
                <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
                <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
              </ColorPicker.ChannelSlider>
              <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="alpha">
                <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
                <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
                <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
              </ColorPicker.ChannelSlider>
            </div>
          </div>
          <ColorPicker.SwatchGroup className={styles.SwatchGroup}>
            {swatches.map((color) => (
              <ColorPicker.SwatchTrigger key={color} className={styles.SwatchTrigger} value={color}>
                <ColorPicker.Swatch className={styles.Swatch} value={color}>
                  <ColorPicker.SwatchIndicator className={styles.SwatchIndicator}>
                    <CheckIcon />
                  </ColorPicker.SwatchIndicator>
                </ColorPicker.Swatch>
              </ColorPicker.SwatchTrigger>
            ))}
          </ColorPicker.SwatchGroup>
        </ColorPicker.Content>
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
  )
}
```

### Value Swatch

Display the current color value as a swatch alongside the color area and sliders.

```tsx
import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
import styles from 'styles/color-picker.module.css'

export const ValueSwatch = () => {
  return (
    <ColorPicker.Root className={styles.Root} inline defaultValue={parseColor('#eb5e41')}>
      <ColorPicker.Area className={styles.Area}>
        <ColorPicker.AreaBackground className={styles.AreaBackground} />
        <ColorPicker.AreaThumb className={styles.AreaThumb} />
      </ColorPicker.Area>
      <div className={styles.SliderGroup}>
        <div className={styles.Swatch}>
          <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
          <ColorPicker.ValueSwatch className={styles.ValueSwatch} />
        </div>
        <div className={styles.ChannelSliders}>
          <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="hue">
            <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
            <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
          </ColorPicker.ChannelSlider>
          <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="alpha">
            <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
            <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
            <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
          </ColorPicker.ChannelSlider>
        </div>
      </div>
    </ColorPicker.Root>
  )
}
```

### Field

The `Field` component helps manage form-related state and accessibility attributes of a color picker. It includes
handling ARIA labels, helper text, and error text to ensure proper accessibility.

```tsx
import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
import { Field } from '@ark-ui/react/field'
import field from 'styles/field.module.css'
import styles from 'styles/color-picker.module.css'

export const WithField = () => (
  <Field.Root className={field.Root}>
    <ColorPicker.Root className={styles.Root} defaultValue={parseColor('#eb5e41')}>
      <ColorPicker.Label className={styles.Label}>Label</ColorPicker.Label>
      <ColorPicker.Control className={styles.Control}>
        <ColorPicker.ChannelInput className={styles.Input} channel="hex" />
        <ColorPicker.ChannelInput className={styles.ChannelInput} channel="alpha" />
        <ColorPicker.Trigger className={styles.Trigger}>
          <div className={styles.Swatch}>
            <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
            <ColorPicker.ValueSwatch className={styles.ValueSwatch} />
          </div>
        </ColorPicker.Trigger>
      </ColorPicker.Control>
      <ColorPicker.Positioner>
        <ColorPicker.Content className={styles.Content} />
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
    <Field.HelperText className={field.HelperText}>Additional Info</Field.HelperText>
    <Field.ErrorText className={field.ErrorText}>Error Info</Field.ErrorText>
  </Field.Root>
)
```

### Form Usage

Integrate the color picker with form libraries like React Hook Form using the `HiddenInput` component.

```tsx
import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
import { PipetteIcon } from 'lucide-react'
import { useForm } from 'react-hook-form'
import button from 'styles/button.module.css'
import styles from 'styles/color-picker.module.css'

interface FieldValues {
  color: string
}

export const FormUsage = () => {
  const { register, handleSubmit } = useForm<FieldValues>()

  const onSubmit = (data: FieldValues) => {
    alert(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <ColorPicker.Root className={styles.Root} inline defaultValue={parseColor('#eb5e41')}>
        <ColorPicker.HiddenInput {...register('color')} />

        <ColorPicker.Area className={styles.Area}>
          <ColorPicker.AreaBackground className={styles.AreaBackground} />
          <ColorPicker.AreaThumb className={styles.AreaThumb} />
        </ColorPicker.Area>
        <div className={styles.SliderGroup}>
          <ColorPicker.EyeDropperTrigger className={styles.EyeDropperTrigger}>
            <PipetteIcon />
          </ColorPicker.EyeDropperTrigger>
          <div className={styles.ChannelSliders}>
            <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="hue">
              <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
              <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
            </ColorPicker.ChannelSlider>
            <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="alpha">
              <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
              <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
              <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
            </ColorPicker.ChannelSlider>
          </div>
        </div>

        <ColorPicker.View className={styles.View} format="rgba">
          <div className={styles.ChannelInputGroup}>
            <ColorPicker.ChannelInput className={styles.ChannelInput} channel="hex" />
            <ColorPicker.ChannelInput className={styles.ChannelInput} channel="alpha" />
          </div>
        </ColorPicker.View>

        <ColorPicker.View className={styles.View} format="hsla">
          <div className={styles.ChannelInputGroup}>
            <ColorPicker.ChannelInput className={styles.ChannelInput} channel="hue" />
            <ColorPicker.ChannelInput className={styles.ChannelInput} channel="saturation" />
            <ColorPicker.ChannelInput className={styles.ChannelInput} channel="lightness" />
          </div>
        </ColorPicker.View>

        <button className={button.Root} type="submit" data-variant="solid">
          Submit
        </button>
      </ColorPicker.Root>
    </form>
  )
}
```

### Inside Dialog

Here's an example of how to use the color picker inside a dialog.

```tsx
import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
import { Dialog } from '@ark-ui/react/dialog'
import { Portal } from '@ark-ui/react/portal'
import { PipetteIcon, XIcon } from 'lucide-react'
import button from 'styles/button.module.css'
import dialog from 'styles/dialog.module.css'
import styles from 'styles/color-picker.module.css'

export const InsideDialog = () => (
  <Dialog.Root>
    <Dialog.Trigger className={button.Root}>Open Dialog</Dialog.Trigger>
    <Portal>
      <Dialog.Backdrop className={dialog.Backdrop} />
      <Dialog.Positioner className={dialog.Positioner}>
        <Dialog.Content className={dialog.Content}>
          <Dialog.CloseTrigger className={dialog.CloseTrigger}>
            <XIcon />
          </Dialog.CloseTrigger>
          <Dialog.Title className={dialog.Title}>Choose a color</Dialog.Title>
          <Dialog.Description className={dialog.Description}>
            Wrap the positioner in a portal so the popover appears above the dialog.
          </Dialog.Description>
          <div className={dialog.Body}>
            <ColorPicker.Root className={styles.Root} defaultValue={parseColor('#eb5e41')} lazyMount unmountOnExit>
              <ColorPicker.Label className={styles.Label}>Color</ColorPicker.Label>

              <ColorPicker.Control className={styles.Control}>
                <ColorPicker.ChannelInput className={styles.Input} channel="hex" />
                <ColorPicker.ChannelInput className={styles.ChannelInput} channel="alpha" />
                <ColorPicker.Trigger className={styles.Trigger}>
                  <div className={styles.Swatch}>
                    <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
                    <ColorPicker.ValueSwatch className={styles.ValueSwatch} />
                  </div>
                </ColorPicker.Trigger>
              </ColorPicker.Control>

              <Portal>
                <ColorPicker.Positioner>
                  <ColorPicker.Content className={styles.Content}>
                    <ColorPicker.Area className={styles.Area}>
                      <ColorPicker.AreaBackground className={styles.AreaBackground} />
                      <ColorPicker.AreaThumb className={styles.AreaThumb} />
                    </ColorPicker.Area>
                    <div className={styles.SliderGroup}>
                      <ColorPicker.EyeDropperTrigger className={styles.EyeDropperTrigger}>
                        <PipetteIcon />
                      </ColorPicker.EyeDropperTrigger>
                      <div className={styles.ChannelSliders}>
                        <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="hue">
                          <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
                          <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
                        </ColorPicker.ChannelSlider>
                        <ColorPicker.ChannelSlider className={styles.ChannelSlider} channel="alpha">
                          <ColorPicker.TransparencyGrid className={styles.TransparencyGrid} />
                          <ColorPicker.ChannelSliderTrack className={styles.ChannelSliderTrack} />
                          <ColorPicker.ChannelSliderThumb className={styles.ChannelSliderThumb} />
                        </ColorPicker.ChannelSlider>
                      </div>
                    </div>
                  </ColorPicker.Content>
                </ColorPicker.Positioner>
              </Portal>
              <ColorPicker.HiddenInput />
            </ColorPicker.Root>
          </div>
        </Dialog.Content>
      </Dialog.Positioner>
    </Portal>
  </Dialog.Root>
)
```

## API Reference

### Props

### Root

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`closeOnSelect`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to close the color picker when a swatch is selected

**`defaultFormat`**
Type: `ColorFormat`
Required: false
Default Value: `"rgba"`
Description: The initial color format when rendered.
Use when you don't need to control the color format of the color picker.

**`defaultOpen`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: The initial open state of the color picker when rendered.
Use when you don't need to control the open state of the color picker.

**`defaultValue`**
Type: `Color`
Required: false
Default Value: `#000000`
Description: The initial color value when rendered.
Use when you don't need to control the color value of the color picker.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the color picker is disabled

**`format`**
Type: `ColorFormat`
Required: false
Default Value: `undefined`
Description: The controlled color format to use

**`hideMode`**
Type: `HideMode`
Required: false
Default Value: `'display-none'`
Description: How to hide content when mounted but not present.
- `'display-none'`: HTML `hidden` attribute. Effects stay alive.
- `'activity'`: React 19 `<Activity mode="hidden">`. Effects pause. Requires React 19+.

**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.

**`ids`**
Type: `Partial<{ root: string; control: string; trigger: string; label: string; input: string; hiddenInput: string; content: string; area: string; areaGradient: string; positioner: string; formatSelect: string; areaThumb: string; channelInput: (id: string) => string; channelSliderTrack: (id: ColorChannel) => string; channe...`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the color picker. Useful for composition.

**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame

**`initialFocusEl`**
Type: `() => HTMLElement | null`
Required: false
Default Value: `undefined`
Description: The initial focus element when the color picker is opened.

**`inline`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to render the color picker inline

**`invalid`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the color picker is invalid

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`name`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The name for the form input

**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state

**`onFocusOutside`**
Type: `(event: FocusOutsideEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when the focus is moved outside the component

**`onFormatChange`**
Type: `(details: FormatChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function called when the color format changes

**`onInteractOutside`**
Type: `(event: InteractOutsideEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when an interaction happens outside the component

**`onOpenChange`**
Type: `(details: OpenChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Handler that is called when the user opens or closes the color picker.

**`onPointerDownOutside`**
Type: `(event: PointerDownOutsideEvent) => void`
Required: false
Default Value: `undefined`
Description: Function called when the pointer is pressed down outside the component

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Handler that is called when the value changes, as the user drags.

**`onValueChangeEnd`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Handler that is called when the user stops dragging.

**`open`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: The controlled open state of the color picker

**`openAutoFocus`**
Type: `boolean`
Required: false
Default Value: `true`
Description: Whether to auto focus the color picker when it is opened

**`positioning`**
Type: `PositioningOptions`
Required: false
Default Value: `undefined`
Description: The positioning options for the color picker

**`present`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the node is present (controlled by the user)

**`readOnly`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the color picker is read-only

**`required`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the color picker is required

**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

**`value`**
Type: `Color`
Required: false
Default Value: `undefined`
Description: The controlled color value of the color picker

#### Data Attributes

**`data-scope`**: color-picker
**`data-part`**: root
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only
**`data-invalid`**: Present when invalid

### AreaBackground

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: color-picker
**`data-part`**: area-background
**`data-invalid`**: Present when invalid
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only

### Area

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`xChannel`**
Type: `ColorChannel`
Required: false
Default Value: `undefined`
Description: undefined

**`yChannel`**
Type: `ColorChannel`
Required: false
Default Value: `undefined`
Description: undefined

#### Data Attributes

**`data-scope`**: color-picker
**`data-part`**: area
**`data-invalid`**: Present when invalid
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only

### AreaThumb

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: color-picker
**`data-part`**: area-thumb
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-readonly`**: Present when read-only

### ChannelInput

#### Props

**`channel`**
Type: `ExtendedColorChannel`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`orientation`**
Type: `Orientation`
Required: false
Default Value: `undefined`
Description: undefined

#### Data Attributes

**`data-scope`**: color-picker
**`data-part`**: channel-input
**`data-channel`**: The color channel of the channelinput
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-readonly`**: Present when read-only

### ChannelSliderLabel

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: color-picker
**`data-part`**: channel-slider-label
**`data-channel`**: The color channel of the channelsliderlabel

### ChannelSlider

#### Props

**`channel`**
Type: `ColorChannel`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`orientation`**
Type: `Orientation`
Required: false
Default Value: `undefined`
Description: undefined

#### Data Attributes

**`data-scope`**: color-picker
**`data-part`**: channel-slider
**`data-channel`**: The color channel of the channelslider
**`data-orientation`**: The orientation of the channelslider

### ChannelSliderThumb

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: color-picker
**`data-part`**: channel-slider-thumb
**`data-channel`**: The color channel of the channelsliderthumb
**`data-disabled`**: Present when disabled
**`data-orientation`**: The orientation of the channelsliderthumb

### ChannelSliderTrack

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: color-picker
**`data-part`**: channel-slider-track
**`data-channel`**: The color channel of the channelslidertrack
**`data-orientation`**: The orientation of the channelslidertrack

### ChannelSliderValueText

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: color-picker
**`data-part`**: channel-slider-value-text
**`data-channel`**: The color channel of the channelslidervaluetext

### Content

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: color-picker
**`data-part`**: content
**`data-placement`**: The placement of the content
**`data-nested`**: popover
**`data-has-nested`**: popover
**`data-side`**: The side of the trigger that the content is positioned on
**`data-state`**: "open" | "closed"

### Control

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: color-picker
**`data-part`**: control
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only
**`data-invalid`**: Present when invalid
**`data-state`**: "open" | "closed"
**`data-focus`**: Present when focused

### EyeDropperTrigger

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: color-picker
**`data-part`**: eye-dropper-trigger
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-readonly`**: Present when read-only

### FormatSelect

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### FormatTrigger

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### HiddenInput

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Label

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: color-picker
**`data-part`**: label
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only
**`data-invalid`**: Present when invalid
**`data-required`**: Present when required
**`data-focus`**: Present when focused

### Positioner

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### RootProvider

#### Props

**`value`**
Type: `UseColorPickerReturn`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`hideMode`**
Type: `HideMode`
Required: false
Default Value: `'display-none'`
Description: How to hide content when mounted but not present.
- `'display-none'`: HTML `hidden` attribute. Effects stay alive.
- `'activity'`: React 19 `<Activity mode="hidden">`. Effects pause. Requires React 19+.

**`immediate`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to synchronize the present change immediately or defer it to the next frame

**`lazyMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to enable lazy mounting

**`onExitComplete`**
Type: `VoidFunction`
Required: false
Default Value: `undefined`
Description: Function called when the animation ends in the closed state

**`present`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the node is present (controlled by the user)

**`skipAnimationOnMount`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to allow the initial presence animation.

**`unmountOnExit`**
Type: `boolean`
Required: false
Default Value: `false`
Description: Whether to unmount on exit.

### SwatchGroup

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### SwatchIndicator

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Swatch

#### Props

**`value`**
Type: `string | Color`
Required: true
Default Value: `undefined`
Description: The color value

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`respectAlpha`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to include the alpha channel in the color

#### Data Attributes

**`data-scope`**: color-picker
**`data-part`**: swatch
**`data-state`**: "checked" | "unchecked"
**`data-value`**: The value of the item

### SwatchTrigger

#### Props

**`value`**
Type: `string | Color`
Required: true
Default Value: `undefined`
Description: The color value

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the swatch trigger is disabled

#### Data Attributes

**`data-scope`**: color-picker
**`data-part`**: swatch-trigger
**`data-state`**: "checked" | "unchecked"
**`data-value`**: The value of the item
**`data-disabled`**: Present when disabled

### TransparencyGrid

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`size`**
Type: `string`
Required: false
Default Value: `undefined`
Description: undefined

### Trigger

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: color-picker
**`data-part`**: trigger
**`data-disabled`**: Present when disabled
**`data-readonly`**: Present when read-only
**`data-invalid`**: Present when invalid
**`data-placement`**: The placement of the trigger
**`data-side`**: The side of the trigger that the trigger is positioned on
**`data-state`**: "open" | "closed"
**`data-focus`**: Present when focused

### ValueSwatch

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`respectAlpha`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether to include the alpha channel in the color

### ValueText

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`format`**
Type: `ColorStringFormat`
Required: false
Default Value: `undefined`
Description: undefined

#### Data Attributes

**`data-scope`**: color-picker
**`data-part`**: value-text
**`data-disabled`**: Present when disabled
**`data-focus`**: Present when focused

### View

#### Props

**`format`**
Type: `ColorFormat`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `dragging` | `boolean` | Whether the color picker is being dragged |
| `open` | `boolean` | Whether the color picker is open |
| `inline` | `boolean` | Whether the color picker is rendered inline |
| `value` | `Color` | The current color value (as a string) |
| `valueAsString` | `string` | The current color value (as a Color object) |
| `setValue` | `(value: string | Color) => void` | Function to set the color value |
| `getChannelValue` | `(channel: ColorChannel) => string` | Function to set the color value |
| `getChannelValueText` | `(channel: ColorChannel, locale: string) => string` | Function to get the formatted and localized value of a specific channel |
| `setChannelValue` | `(channel: ColorChannel, value: number) => void` | Function to set the color value of a specific channel |
| `format` | `ColorFormat` | The current color format |
| `setFormat` | `(format: ColorFormat) => void` | Function to set the color format |
| `alpha` | `number` | The alpha value of the color |
| `setAlpha` | `(value: number) => void` | Function to set the color alpha |
| `setOpen` | `(open: boolean) => void` | Function to open or close the color picker |


## Accessibility

### Keyboard Support

**`Enter`**
Description: <span>When focus is on the trigger, opens the color picker<br />When focus is on a trigger of a swatch, selects the color (and closes the color picker)<br />When focus is on the input or channel inputs, selects the color</span>

**`ArrowLeft`**
Description: <span>When focus is on the color area, decreases the hue value of the color<br />When focus is on the channel sliders, decreases the value of the channel</span>

**`ArrowRight`**
Description: <span>When focus is on the color area, increases the hue value of the color<br />When focus is on the channel sliders, increases the value of the channel</span>

**`ArrowUp`**
Description: <span>When focus is on the color area, increases the saturation value of the color<br />When focus is on the channel sliders, increases the value of the channel</span>

**`ArrowDown`**
Description: <span>When focus is on the color area, decreases the saturation value of the color<br />When focus is on the channel sliders, decreases the value of the channel</span>

**`Esc`**
Description: Closes the color picker and moves focus to the trigger