# Color Picker

URL: https://ark-ui.com/docs/components/color-picker
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/color-picker.mdx

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

---

<ComponentPreview id="ColorPicker" />

## Anatomy

<Anatomy id="color-picker" />

```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

**Example: basic**

#### React

```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>
  )
}

```

#### Solid

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

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

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

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

```

#### Vue

```vue
<script setup lang="ts">
import { ColorPicker, parseColor } from '@ark-ui/vue/color-picker'
import { Pipette } from 'lucide-vue-next'
import styles from 'styles/color-picker.module.css'
</script>

<template>
  <ColorPicker.Root :class="styles.Root" :default-value="parseColor('#eb5e41')">
    <ColorPicker.Label :class="styles.Label">Color</ColorPicker.Label>

    <ColorPicker.Control :class="styles.Control">
      <ColorPicker.ChannelInput :class="styles.Input" channel="hex" />
      <ColorPicker.ChannelInput :class="styles.ChannelInput" channel="alpha" />
      <ColorPicker.Trigger :class="styles.Trigger">
        <div :class="styles.Swatch">
          <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
          <ColorPicker.ValueSwatch :class="styles.ValueSwatch" />
        </div>
      </ColorPicker.Trigger>
    </ColorPicker.Control>

    <ColorPicker.Positioner>
      <ColorPicker.Content :class="styles.Content">
        <ColorPicker.Area :class="styles.Area">
          <ColorPicker.AreaBackground :class="styles.AreaBackground" />
          <ColorPicker.AreaThumb :class="styles.AreaThumb" />
        </ColorPicker.Area>
        <div :class="styles.SliderGroup">
          <ColorPicker.EyeDropperTrigger :class="styles.EyeDropperTrigger">
            <Pipette />
          </ColorPicker.EyeDropperTrigger>
          <div :class="styles.ChannelSliders">
            <ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="hue">
              <ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
              <ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
            </ColorPicker.ChannelSlider>
            <ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="alpha">
              <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
              <ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
              <ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
            </ColorPicker.ChannelSlider>
          </div>
        </div>
      </ColorPicker.Content>
    </ColorPicker.Positioner>
    <ColorPicker.HiddenInput />
  </ColorPicker.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ColorPicker, parseColor } from '@ark-ui/svelte/color-picker'
  import { Pipette } from 'lucide-svelte'
  import styles from 'styles/color-picker.module.css'
</script>

<ColorPicker.Root class={styles.Root} defaultValue={parseColor('#eb5e41')}>
  <ColorPicker.Label class={styles.Label}>Color</ColorPicker.Label>

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

  <ColorPicker.Positioner>
    <ColorPicker.Content class={styles.Content}>
      <ColorPicker.Area class={styles.Area}>
        <ColorPicker.AreaBackground class={styles.AreaBackground} />
        <ColorPicker.AreaThumb class={styles.AreaThumb} />
      </ColorPicker.Area>
      <div class={styles.SliderGroup}>
        <ColorPicker.EyeDropperTrigger class={styles.EyeDropperTrigger}>
          <Pipette />
        </ColorPicker.EyeDropperTrigger>
        <div class={styles.ChannelSliders}>
          <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="hue">
            <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
            <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
          </ColorPicker.ChannelSlider>
          <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="alpha">
            <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
            <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
            <ColorPicker.ChannelSliderThumb class={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.

**Example: controlled**

#### React

```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>
  )
}

```

#### Solid

```tsx
import { ColorPicker, parseColor } from '@ark-ui/solid/color-picker'
import { Pipette } from 'lucide-solid'
import { createSignal } from 'solid-js'
import styles from 'styles/color-picker.module.css'

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

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

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

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

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

```

#### Vue

```vue
<script setup lang="ts">
import { ColorPicker, parseColor } from '@ark-ui/vue/color-picker'
import { Pipette } from 'lucide-vue-next'
import { ref } from 'vue'
import styles from 'styles/color-picker.module.css'

const value = ref(parseColor('hsl(20, 100%, 50%)'))
</script>

<template>
  <div class="stack">
    <output>Selected color: {{ value.toString('hex') }}</output>

    <ColorPicker.Root :class="styles.Root" v-model="value">
      <ColorPicker.Label :class="styles.Label">Color</ColorPicker.Label>
      <ColorPicker.Control :class="styles.Control">
        <ColorPicker.ChannelInput :class="styles.Input" channel="hex" />
        <ColorPicker.ChannelInput :class="styles.ChannelInput" channel="alpha" />
        <ColorPicker.Trigger :class="styles.Trigger">
          <div :class="styles.Swatch">
            <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
            <ColorPicker.ValueSwatch :class="styles.ValueSwatch" />
          </div>
        </ColorPicker.Trigger>
      </ColorPicker.Control>

      <ColorPicker.Positioner>
        <ColorPicker.Content :class="styles.Content">
          <ColorPicker.Area :class="styles.Area">
            <ColorPicker.AreaBackground :class="styles.AreaBackground" />
            <ColorPicker.AreaThumb :class="styles.AreaThumb" />
          </ColorPicker.Area>
          <div :class="styles.SliderGroup">
            <ColorPicker.EyeDropperTrigger :class="styles.EyeDropperTrigger">
              <Pipette />
            </ColorPicker.EyeDropperTrigger>
            <div :class="styles.ChannelSliders">
              <ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="hue">
                <ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
                <ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
              </ColorPicker.ChannelSlider>
              <ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="alpha">
                <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
                <ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
                <ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
              </ColorPicker.ChannelSlider>
            </div>
          </div>
        </ColorPicker.Content>
      </ColorPicker.Positioner>

      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ColorPicker, parseColor } from '@ark-ui/svelte/color-picker'
  import { Pipette } from 'lucide-svelte'
  import styles from 'styles/color-picker.module.css'

  let value = $state(parseColor('hsl(20, 100%, 50%)'))
</script>

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

  <ColorPicker.Root class={styles.Root} bind:value>
    <ColorPicker.Label class={styles.Label}>Color</ColorPicker.Label>
    <ColorPicker.Control class={styles.Control}>
      <ColorPicker.ChannelInput class={styles.Input} channel="hex" />
      <ColorPicker.ChannelInput class={styles.ChannelInput} channel="alpha" />
      <ColorPicker.Trigger class={styles.Trigger}>
        <div class={styles.Swatch}>
          <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
          <ColorPicker.ValueSwatch class={styles.ValueSwatch} />
        </div>
      </ColorPicker.Trigger>
    </ColorPicker.Control>

    <ColorPicker.Positioner>
      <ColorPicker.Content class={styles.Content}>
        <ColorPicker.Area class={styles.Area}>
          <ColorPicker.AreaBackground class={styles.AreaBackground} />
          <ColorPicker.AreaThumb class={styles.AreaThumb} />
        </ColorPicker.Area>
        <div class={styles.SliderGroup}>
          <ColorPicker.EyeDropperTrigger class={styles.EyeDropperTrigger}>
            <Pipette />
          </ColorPicker.EyeDropperTrigger>
          <div class={styles.ChannelSliders}>
            <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="hue">
              <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
              <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
            </ColorPicker.ChannelSlider>
            <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="alpha">
              <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
              <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
              <ColorPicker.ChannelSliderThumb class={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.

**Example: open-controlled**

#### React

```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>
  )
}

```

#### Solid

```tsx
import { ColorPicker, parseColor } from '@ark-ui/solid/color-picker'
import { Pipette } from 'lucide-solid'
import { createSignal } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/color-picker.module.css'

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

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

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

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

```

#### Vue

```vue
<script setup lang="ts">
import { ColorPicker, parseColor } from '@ark-ui/vue/color-picker'
import { Pipette } from 'lucide-vue-next'
import { ref } from 'vue'
import button from 'styles/button.module.css'
import styles from 'styles/color-picker.module.css'

const open = ref(false)
</script>

<template>
  <div class="stack">
    <button :class="button.Root" @click="open = !open">Toggle</button>

    <ColorPicker.Root :class="styles.Root" v-model:open="open" :default-value="parseColor('#eb5e41')">
      <ColorPicker.Label :class="styles.Label">Color</ColorPicker.Label>
      <ColorPicker.Control :class="styles.Control">
        <ColorPicker.ChannelInput :class="styles.Input" channel="hex" />
        <ColorPicker.Trigger :class="styles.Trigger">
          <div :class="styles.Swatch">
            <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
            <ColorPicker.ValueSwatch :class="styles.ValueSwatch" />
          </div>
        </ColorPicker.Trigger>
      </ColorPicker.Control>

      <ColorPicker.Positioner>
        <ColorPicker.Content :class="styles.Content">
          <ColorPicker.Area :class="styles.Area">
            <ColorPicker.AreaBackground :class="styles.AreaBackground" />
            <ColorPicker.AreaThumb :class="styles.AreaThumb" />
          </ColorPicker.Area>
          <div :class="styles.SliderGroup">
            <ColorPicker.EyeDropperTrigger :class="styles.EyeDropperTrigger">
              <Pipette />
            </ColorPicker.EyeDropperTrigger>
            <div :class="styles.ChannelSliders">
              <ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="hue">
                <ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
                <ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
              </ColorPicker.ChannelSlider>
              <ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="alpha">
                <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
                <ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
                <ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
              </ColorPicker.ChannelSlider>
            </div>
          </div>
        </ColorPicker.Content>
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ColorPicker, parseColor } from '@ark-ui/svelte/color-picker'
  import { Pipette } from 'lucide-svelte'
  import button from 'styles/button.module.css'
  import styles from 'styles/color-picker.module.css'

  let open = $state(false)
</script>

<div class="stack">
  <button class={button.Root} onclick={() => (open = !open)}>Toggle</button>

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

    <ColorPicker.Positioner>
      <ColorPicker.Content class={styles.Content}>
        <ColorPicker.Area class={styles.Area}>
          <ColorPicker.AreaBackground class={styles.AreaBackground} />
          <ColorPicker.AreaThumb class={styles.AreaThumb} />
        </ColorPicker.Area>
        <div class={styles.SliderGroup}>
          <ColorPicker.EyeDropperTrigger class={styles.EyeDropperTrigger}>
            <Pipette />
          </ColorPicker.EyeDropperTrigger>
          <div class={styles.ChannelSliders}>
            <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="hue">
              <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
              <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
            </ColorPicker.ChannelSlider>
            <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="alpha">
              <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
              <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
              <ColorPicker.ChannelSliderThumb class={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.

**Example: root-provider**

#### React

```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>
  )
}

```

#### Solid

```tsx
import { ColorPicker, parseColor, useColorPicker } from '@ark-ui/solid/color-picker'
import { Check, Pipette } from 'lucide-solid'
import { For } from 'solid-js'
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 class="stack">
      <output>Color: {colorPicker().valueAsString}</output>

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

```

#### Vue

```vue
<script setup lang="ts">
import { ColorPicker, parseColor, useColorPicker } from '@ark-ui/vue/color-picker'
import { Check, Pipette } from 'lucide-vue-next'
import styles from 'styles/color-picker.module.css'

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

const colorPicker = useColorPicker({ defaultValue: parseColor('#eb5e41') })
</script>

<template>
  <div class="stack">
    <output>Color: {{ colorPicker.valueAsString }}</output>

    <ColorPicker.RootProvider :class="styles.Root" :value="colorPicker">
      <ColorPicker.Label :class="styles.Label">Color</ColorPicker.Label>
      <ColorPicker.Control :class="styles.Control">
        <ColorPicker.ChannelInput :class="styles.Input" channel="hex" />
        <ColorPicker.ChannelInput :class="styles.ChannelInput" channel="alpha" />
        <ColorPicker.Trigger :class="styles.Trigger">
          <div :class="styles.Swatch">
            <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
            <ColorPicker.ValueSwatch :class="styles.ValueSwatch" />
          </div>
        </ColorPicker.Trigger>
      </ColorPicker.Control>
      <ColorPicker.Positioner>
        <ColorPicker.Content :class="styles.Content">
          <ColorPicker.Area :class="styles.Area">
            <ColorPicker.AreaBackground :class="styles.AreaBackground" />
            <ColorPicker.AreaThumb :class="styles.AreaThumb" />
          </ColorPicker.Area>
          <div :class="styles.SliderGroup">
            <ColorPicker.EyeDropperTrigger :class="styles.EyeDropperTrigger">
              <Pipette />
            </ColorPicker.EyeDropperTrigger>
            <div :class="styles.ChannelSliders">
              <ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="hue">
                <ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
                <ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
              </ColorPicker.ChannelSlider>
              <ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="alpha">
                <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
                <ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
                <ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
              </ColorPicker.ChannelSlider>
            </div>
          </div>
          <ColorPicker.SwatchGroup :class="styles.SwatchGroup">
            <ColorPicker.SwatchTrigger
              v-for="color in swatches"
              :key="color"
              :class="styles.SwatchTrigger"
              :value="color"
            >
              <ColorPicker.Swatch :class="styles.Swatch" :value="color">
                <ColorPicker.SwatchIndicator :class="styles.SwatchIndicator">
                  <Check />
                </ColorPicker.SwatchIndicator>
              </ColorPicker.Swatch>
            </ColorPicker.SwatchTrigger>
          </ColorPicker.SwatchGroup>
          <ColorPicker.View :class="styles.View" format="rgba">
            <div :class="styles.ChannelInputGroup">
              <ColorPicker.ChannelInput :class="styles.ChannelInput" channel="hex" />
              <ColorPicker.ChannelInput :class="styles.ChannelInput" channel="alpha" />
            </div>
          </ColorPicker.View>
          <ColorPicker.View :class="styles.View" format="hsla">
            <div :class="styles.ChannelInputGroup">
              <ColorPicker.ChannelInput :class="styles.ChannelInput" channel="hue" />
              <ColorPicker.ChannelInput :class="styles.ChannelInput" channel="saturation" />
              <ColorPicker.ChannelInput :class="styles.ChannelInput" channel="lightness" />
            </div>
          </ColorPicker.View>
        </ColorPicker.Content>
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.RootProvider>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ColorPicker, parseColor, useColorPicker } from '@ark-ui/svelte/color-picker'
  import { Check, Pipette } from 'lucide-svelte'
  import styles from 'styles/color-picker.module.css'

  const id = $props.id()
  const swatches = ['red', 'blue', 'green', 'orange']

  const colorPicker = useColorPicker({
    id,
    defaultValue: parseColor('#eb5e41'),
  })
</script>

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

  <ColorPicker.RootProvider class={styles.Root} value={colorPicker}>
    <ColorPicker.Label class={styles.Label}>Color</ColorPicker.Label>
    <ColorPicker.Control class={styles.Control}>
      <ColorPicker.ChannelInput class={styles.Input} channel="hex" />
      <ColorPicker.ChannelInput class={styles.ChannelInput} channel="alpha" />
      <ColorPicker.Trigger class={styles.Trigger}>
        <div class={styles.Swatch}>
          <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
          <ColorPicker.ValueSwatch class={styles.ValueSwatch} />
        </div>
      </ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.Positioner>
      <ColorPicker.Content class={styles.Content}>
        <ColorPicker.Area class={styles.Area}>
          <ColorPicker.AreaBackground class={styles.AreaBackground} />
          <ColorPicker.AreaThumb class={styles.AreaThumb} />
        </ColorPicker.Area>
        <div class={styles.SliderGroup}>
          <ColorPicker.EyeDropperTrigger class={styles.EyeDropperTrigger}>
            <Pipette />
          </ColorPicker.EyeDropperTrigger>
          <div class={styles.ChannelSliders}>
            <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="hue">
              <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
              <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
            </ColorPicker.ChannelSlider>
            <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="alpha">
              <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
              <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
              <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
            </ColorPicker.ChannelSlider>
          </div>
        </div>
        <ColorPicker.SwatchGroup class={styles.SwatchGroup}>
          {#each swatches as color}
            <ColorPicker.SwatchTrigger class={styles.SwatchTrigger} value={color}>
              <ColorPicker.Swatch class={styles.Swatch} value={color}>
                <ColorPicker.SwatchIndicator class={styles.SwatchIndicator}>
                  <Check />
                </ColorPicker.SwatchIndicator>
              </ColorPicker.Swatch>
            </ColorPicker.SwatchTrigger>
          {/each}
        </ColorPicker.SwatchGroup>
        <ColorPicker.View class={styles.View} format="rgba">
          <div class={styles.ChannelInputGroup}>
            <ColorPicker.ChannelInput class={styles.ChannelInput} channel="hex" />
            <ColorPicker.ChannelInput class={styles.ChannelInput} channel="alpha" />
          </div>
        </ColorPicker.View>
        <ColorPicker.View class={styles.View} format="hsla">
          <div class={styles.ChannelInputGroup}>
            <ColorPicker.ChannelInput class={styles.ChannelInput} channel="hue" />
            <ColorPicker.ChannelInput class={styles.ChannelInput} channel="saturation" />
            <ColorPicker.ChannelInput class={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.

**Example: disabled**

#### React

```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>
  )
}

```

#### Solid

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

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

```

#### Vue

```vue
<script setup lang="ts">
import { ColorPicker, parseColor } from '@ark-ui/vue/color-picker'
import styles from 'styles/color-picker.module.css'
</script>

<template>
  <ColorPicker.Root :class="styles.Root" disabled :default-value="parseColor('#eb5e41')">
    <ColorPicker.Label :class="styles.Label">Color</ColorPicker.Label>
    <ColorPicker.Control :class="styles.Control">
      <ColorPicker.ChannelInput :class="styles.Input" channel="hex" />
      <ColorPicker.Trigger :class="styles.Trigger">
        <div :class="styles.Swatch">
          <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
          <ColorPicker.ValueSwatch :class="styles.ValueSwatch" />
        </div>
      </ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.HiddenInput />
  </ColorPicker.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ColorPicker, parseColor } from '@ark-ui/svelte/color-picker'
  import styles from 'styles/color-picker.module.css'
</script>

<ColorPicker.Root class={styles.Root} disabled defaultValue={parseColor('#eb5e41')}>
  <ColorPicker.Label class={styles.Label}>Color</ColorPicker.Label>
  <ColorPicker.Control class={styles.Control}>
    <ColorPicker.ChannelInput class={styles.Input} channel="hex" />
    <ColorPicker.Trigger class={styles.Trigger}>
      <div class={styles.Swatch}>
        <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
        <ColorPicker.ValueSwatch class={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.

**Example: inline**

#### React

```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>
  )
}

```

#### Solid

```tsx
import { ColorPicker, parseColor } from '@ark-ui/solid/color-picker'
import { Check } from 'lucide-solid'
import { For } from 'solid-js'
import styles from 'styles/color-picker.module.css'

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

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

      <ColorPicker.SwatchGroup class={styles.SwatchGroup}>
        <For each={swatches}>
          {(color) => (
            <ColorPicker.SwatchTrigger class={styles.SwatchTrigger} value={color}>
              <ColorPicker.Swatch class={styles.Swatch} value={color}>
                <ColorPicker.SwatchIndicator class={styles.SwatchIndicator}>
                  <Check />
                </ColorPicker.SwatchIndicator>
              </ColorPicker.Swatch>
            </ColorPicker.SwatchTrigger>
          )}
        </For>
      </ColorPicker.SwatchGroup>
    </ColorPicker.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { ColorPicker, parseColor } from '@ark-ui/vue/color-picker'
import { Check } from 'lucide-vue-next'
import styles from 'styles/color-picker.module.css'

const swatches = ['red', 'blue', 'green', 'orange']
</script>

<template>
  <ColorPicker.Root :class="styles.Root" inline :default-value="parseColor('#eb5e41')">
    <ColorPicker.Area :class="styles.Area">
      <ColorPicker.AreaBackground :class="styles.AreaBackground" />
      <ColorPicker.AreaThumb :class="styles.AreaThumb" />
    </ColorPicker.Area>

    <ColorPicker.SwatchGroup :class="styles.SwatchGroup">
      <ColorPicker.SwatchTrigger v-for="color in swatches" :key="color" :class="styles.SwatchTrigger" :value="color">
        <ColorPicker.Swatch :class="styles.Swatch" :value="color">
          <ColorPicker.SwatchIndicator :class="styles.SwatchIndicator">
            <Check />
          </ColorPicker.SwatchIndicator>
        </ColorPicker.Swatch>
      </ColorPicker.SwatchTrigger>
    </ColorPicker.SwatchGroup>
  </ColorPicker.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ColorPicker, parseColor } from '@ark-ui/svelte/color-picker'
  import { Check } from 'lucide-svelte'
  import styles from 'styles/color-picker.module.css'

  const swatches = ['red', 'blue', 'green', 'orange']
</script>

<ColorPicker.Root class={styles.Root} inline defaultValue={parseColor('#eb5e41')}>
  <ColorPicker.Area class={styles.Area}>
    <ColorPicker.AreaBackground class={styles.AreaBackground} />
    <ColorPicker.AreaThumb class={styles.AreaThumb} />
  </ColorPicker.Area>

  <ColorPicker.SwatchGroup class={styles.SwatchGroup}>
    {#each swatches as color}
      <ColorPicker.SwatchTrigger class={styles.SwatchTrigger} value={color}>
        <ColorPicker.Swatch class={styles.Swatch} value={color}>
          <ColorPicker.SwatchIndicator class={styles.SwatchIndicator}>
            <Check />
          </ColorPicker.SwatchIndicator>
        </ColorPicker.Swatch>
      </ColorPicker.SwatchTrigger>
    {/each}
  </ColorPicker.SwatchGroup>
</ColorPicker.Root>

```

### Input Only

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

**Example: input-only**

#### React

```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>
  )
}

```

#### Solid

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

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

```

#### Vue

```vue
<script setup lang="ts">
import { ColorPicker, parseColor } from '@ark-ui/vue/color-picker'
import { Pipette } from 'lucide-vue-next'
import styles from 'styles/color-picker.module.css'
</script>

<template>
  <ColorPicker.Root :class="styles.Root" :default-value="parseColor('#eb5e41')">
    <ColorPicker.Label :class="styles.Label">Color</ColorPicker.Label>
    <ColorPicker.Control :class="styles.Control">
      <ColorPicker.ValueSwatch :class="styles.Swatch" />
      <ColorPicker.ChannelInput :class="styles.Input" channel="hex" />
      <ColorPicker.EyeDropperTrigger :class="styles.EyeDropperTrigger">
        <Pipette />
      </ColorPicker.EyeDropperTrigger>
    </ColorPicker.Control>
    <ColorPicker.HiddenInput />
  </ColorPicker.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ColorPicker, parseColor } from '@ark-ui/svelte/color-picker'
  import { Pipette } from 'lucide-svelte'
  import styles from 'styles/color-picker.module.css'
</script>

<ColorPicker.Root class={styles.Root} defaultValue={parseColor('#eb5e41')}>
  <ColorPicker.Label class={styles.Label}>Color</ColorPicker.Label>
  <ColorPicker.Control class={styles.Control}>
    <ColorPicker.ValueSwatch class={styles.Swatch} />
    <ColorPicker.ChannelInput class={styles.Input} channel="hex" />
    <ColorPicker.EyeDropperTrigger class={styles.EyeDropperTrigger}>
      <Pipette />
    </ColorPicker.EyeDropperTrigger>
  </ColorPicker.Control>
  <ColorPicker.HiddenInput />
</ColorPicker.Root>

```

### Slider Only

Display only the channel sliders for RGB color selection.

**Example: slider-only**

#### React

```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>
  )
}

```

#### Solid

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

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

```

#### Vue

```vue
<script setup lang="ts">
import { ColorPicker, parseColor } from '@ark-ui/vue/color-picker'
import styles from 'styles/color-picker.module.css'
</script>

<template>
  <ColorPicker.Root :class="styles.Root" inline :default-value="parseColor('#5dd016')">
    <div class="hstack">
      <div :class="styles.Swatch">
        <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
        <ColorPicker.ValueSwatch :class="styles.ValueSwatch" />
      </div>
      <ColorPicker.ValueText :class="styles.ValueText" />
    </div>
    <ColorPicker.View :class="styles.View" format="rgba">
      <div :class="styles.ChannelSliderRow">
        <span :class="styles.ChannelSliderLabel">R</span>
        <ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="red">
          <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
          <ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
          <ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
        </ColorPicker.ChannelSlider>
      </div>
      <div :class="styles.ChannelSliderRow">
        <span :class="styles.ChannelSliderLabel">G</span>
        <ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="green">
          <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
          <ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
          <ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
        </ColorPicker.ChannelSlider>
      </div>
      <div :class="styles.ChannelSliderRow">
        <span :class="styles.ChannelSliderLabel">B</span>
        <ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="blue">
          <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
          <ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
          <ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
        </ColorPicker.ChannelSlider>
      </div>
    </ColorPicker.View>
  </ColorPicker.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ColorPicker, parseColor } from '@ark-ui/svelte/color-picker'
  import styles from 'styles/color-picker.module.css'
</script>

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

```

### Swatch Only

A simple color picker with only preset color swatches.

**Example: swatch-only**

#### React

```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>
  )
}

```

#### Solid

```tsx
import { ColorPicker, parseColor } from '@ark-ui/solid/color-picker'
import { Check } from 'lucide-solid'
import { For } from 'solid-js'
import styles from 'styles/color-picker.module.css'

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

export const SwatchOnly = () => {
  return (
    <ColorPicker.Root class={styles.Root} inline defaultValue={parseColor('#eb5e41')}>
      <output>
        Selected color: <ColorPicker.ValueText class={styles.ValueText} />
      </output>
      <ColorPicker.SwatchGroup class={styles.SwatchGroup}>
        <For each={swatches}>
          {(color) => (
            <ColorPicker.SwatchTrigger class={styles.SwatchTrigger} value={color}>
              <ColorPicker.Swatch class={styles.Swatch} value={color}>
                <ColorPicker.SwatchIndicator class={styles.SwatchIndicator}>
                  <Check />
                </ColorPicker.SwatchIndicator>
              </ColorPicker.Swatch>
            </ColorPicker.SwatchTrigger>
          )}
        </For>
      </ColorPicker.SwatchGroup>
    </ColorPicker.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { ColorPicker, parseColor } from '@ark-ui/vue/color-picker'
import { Check } from 'lucide-vue-next'
import styles from 'styles/color-picker.module.css'

const swatches = ['red', 'pink', 'orange', 'purple']
</script>

<template>
  <ColorPicker.Root :class="styles.Root" inline :default-value="parseColor('#eb5e41')">
    <output>
      Selected color:
      <ColorPicker.ValueText :class="styles.ValueText" />
    </output>
    <ColorPicker.SwatchGroup :class="styles.SwatchGroup">
      <ColorPicker.SwatchTrigger v-for="color in swatches" :key="color" :class="styles.SwatchTrigger" :value="color">
        <ColorPicker.Swatch :class="styles.Swatch" :value="color">
          <ColorPicker.SwatchIndicator :class="styles.SwatchIndicator">
            <Check />
          </ColorPicker.SwatchIndicator>
        </ColorPicker.Swatch>
      </ColorPicker.SwatchTrigger>
    </ColorPicker.SwatchGroup>
  </ColorPicker.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ColorPicker, parseColor } from '@ark-ui/svelte/color-picker'
  import { Check } from 'lucide-svelte'
  import styles from 'styles/color-picker.module.css'

  const swatches = ['red', 'pink', 'orange', 'purple']
</script>

<ColorPicker.Root class={styles.Root} inline defaultValue={parseColor('#eb5e41')}>
  <output>
    Selected color: <ColorPicker.ValueText class={styles.ValueText} />
  </output>
  <ColorPicker.SwatchGroup class={styles.SwatchGroup}>
    {#each swatches as color}
      <ColorPicker.SwatchTrigger class={styles.SwatchTrigger} value={color}>
        <ColorPicker.Swatch class={styles.Swatch} value={color}>
          <ColorPicker.SwatchIndicator class={styles.SwatchIndicator}>
            <Check />
          </ColorPicker.SwatchIndicator>
        </ColorPicker.Swatch>
      </ColorPicker.SwatchTrigger>
    {/each}
  </ColorPicker.SwatchGroup>
</ColorPicker.Root>

```

### Swatches

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

**Example: swatches**

#### React

```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>
  )
}

```

#### Solid

```tsx
import { ColorPicker, parseColor } from '@ark-ui/solid/color-picker'
import { Check, Pipette } from 'lucide-solid'
import { For } from 'solid-js'
import styles from 'styles/color-picker.module.css'

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

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

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

      <ColorPicker.Positioner>
        <ColorPicker.Content class={styles.Content}>
          <ColorPicker.Area class={styles.Area}>
            <ColorPicker.AreaBackground class={styles.AreaBackground} />
            <ColorPicker.AreaThumb class={styles.AreaThumb} />
          </ColorPicker.Area>
          <div class={styles.SliderGroup}>
            <ColorPicker.EyeDropperTrigger class={styles.EyeDropperTrigger}>
              <Pipette />
            </ColorPicker.EyeDropperTrigger>
            <div class={styles.ChannelSliders}>
              <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="hue">
                <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
                <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
              </ColorPicker.ChannelSlider>
              <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="alpha">
                <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
                <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
                <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
              </ColorPicker.ChannelSlider>
            </div>
          </div>
          <ColorPicker.SwatchGroup class={styles.SwatchGroup}>
            <For each={swatches}>
              {(color) => (
                <ColorPicker.SwatchTrigger class={styles.SwatchTrigger} value={color}>
                  <ColorPicker.Swatch class={styles.Swatch} value={color}>
                    <ColorPicker.SwatchIndicator class={styles.SwatchIndicator}>
                      <Check />
                    </ColorPicker.SwatchIndicator>
                  </ColorPicker.Swatch>
                </ColorPicker.SwatchTrigger>
              )}
            </For>
          </ColorPicker.SwatchGroup>
        </ColorPicker.Content>
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { ColorPicker, parseColor } from '@ark-ui/vue/color-picker'
import { Check, Pipette } from 'lucide-vue-next'
import styles from 'styles/color-picker.module.css'

const swatches = ['red', 'blue', 'green', 'orange']
</script>

<template>
  <ColorPicker.Root :class="styles.Root" :default-value="parseColor('#eb5e41')">
    <ColorPicker.Label :class="styles.Label">Color</ColorPicker.Label>

    <ColorPicker.Control :class="styles.Control">
      <ColorPicker.ChannelInput :class="styles.Input" channel="hex" />
      <ColorPicker.ChannelInput :class="styles.ChannelInput" channel="alpha" />
      <ColorPicker.Trigger :class="styles.Trigger">
        <div :class="styles.Swatch">
          <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
          <ColorPicker.ValueSwatch :class="styles.ValueSwatch" />
        </div>
      </ColorPicker.Trigger>
    </ColorPicker.Control>

    <ColorPicker.Positioner>
      <ColorPicker.Content :class="styles.Content">
        <ColorPicker.Area :class="styles.Area">
          <ColorPicker.AreaBackground :class="styles.AreaBackground" />
          <ColorPicker.AreaThumb :class="styles.AreaThumb" />
        </ColorPicker.Area>
        <div :class="styles.SliderGroup">
          <ColorPicker.EyeDropperTrigger :class="styles.EyeDropperTrigger">
            <Pipette />
          </ColorPicker.EyeDropperTrigger>
          <div :class="styles.ChannelSliders">
            <ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="hue">
              <ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
              <ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
            </ColorPicker.ChannelSlider>
            <ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="alpha">
              <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
              <ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
              <ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
            </ColorPicker.ChannelSlider>
          </div>
        </div>
        <ColorPicker.SwatchGroup :class="styles.SwatchGroup">
          <ColorPicker.SwatchTrigger
            v-for="color in swatches"
            :key="color"
            :class="styles.SwatchTrigger"
            :value="color"
          >
            <ColorPicker.Swatch :class="styles.Swatch" :value="color">
              <ColorPicker.SwatchIndicator :class="styles.SwatchIndicator">
                <Check />
              </ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
        </ColorPicker.SwatchGroup>
      </ColorPicker.Content>
    </ColorPicker.Positioner>
    <ColorPicker.HiddenInput />
  </ColorPicker.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ColorPicker, parseColor } from '@ark-ui/svelte/color-picker'
  import { Check, Pipette } from 'lucide-svelte'
  import styles from 'styles/color-picker.module.css'

  const swatches = ['red', 'blue', 'green', 'orange']
</script>

<ColorPicker.Root class={styles.Root} defaultValue={parseColor('#eb5e41')}>
  <ColorPicker.Label class={styles.Label}>Color</ColorPicker.Label>

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

  <ColorPicker.Positioner>
    <ColorPicker.Content class={styles.Content}>
      <ColorPicker.Area class={styles.Area}>
        <ColorPicker.AreaBackground class={styles.AreaBackground} />
        <ColorPicker.AreaThumb class={styles.AreaThumb} />
      </ColorPicker.Area>
      <div class={styles.SliderGroup}>
        <ColorPicker.EyeDropperTrigger class={styles.EyeDropperTrigger}>
          <Pipette />
        </ColorPicker.EyeDropperTrigger>
        <div class={styles.ChannelSliders}>
          <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="hue">
            <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
            <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
          </ColorPicker.ChannelSlider>
          <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="alpha">
            <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
            <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
            <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
          </ColorPicker.ChannelSlider>
        </div>
      </div>
      <ColorPicker.SwatchGroup class={styles.SwatchGroup}>
        {#each swatches as color}
          <ColorPicker.SwatchTrigger class={styles.SwatchTrigger} value={color}>
            <ColorPicker.Swatch class={styles.Swatch} value={color}>
              <ColorPicker.SwatchIndicator class={styles.SwatchIndicator}>
                <Check />
              </ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
        {/each}
      </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.

**Example: value-swatch**

#### React

```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>
  )
}

```

#### Solid

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

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

```

#### Vue

```vue
<script setup lang="ts">
import { ColorPicker, parseColor } from '@ark-ui/vue/color-picker'
import styles from 'styles/color-picker.module.css'
</script>

<template>
  <ColorPicker.Root :class="styles.Root" inline :default-value="parseColor('#eb5e41')">
    <ColorPicker.Area :class="styles.Area">
      <ColorPicker.AreaBackground :class="styles.AreaBackground" />
      <ColorPicker.AreaThumb :class="styles.AreaThumb" />
    </ColorPicker.Area>
    <div :class="styles.SliderGroup">
      <div :class="styles.Swatch">
        <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
        <ColorPicker.ValueSwatch :class="styles.ValueSwatch" />
      </div>
      <div :class="styles.ChannelSliders">
        <ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="hue">
          <ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
          <ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
        </ColorPicker.ChannelSlider>
        <ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="alpha">
          <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
          <ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
          <ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
        </ColorPicker.ChannelSlider>
      </div>
    </div>
  </ColorPicker.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ColorPicker, parseColor } from '@ark-ui/svelte/color-picker'
  import styles from 'styles/color-picker.module.css'
</script>

<ColorPicker.Root class={styles.Root} inline defaultValue={parseColor('#eb5e41')}>
  <ColorPicker.Area class={styles.Area}>
    <ColorPicker.AreaBackground class={styles.AreaBackground} />
    <ColorPicker.AreaThumb class={styles.AreaThumb} />
  </ColorPicker.Area>
  <div class={styles.SliderGroup}>
    <div class={styles.Swatch}>
      <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
      <ColorPicker.ValueSwatch class={styles.ValueSwatch} />
    </div>
    <div class={styles.ChannelSliders}>
      <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="hue">
        <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
        <ColorPicker.ChannelSliderThumb class={styles.ChannelSliderThumb} />
      </ColorPicker.ChannelSlider>
      <ColorPicker.ChannelSlider class={styles.ChannelSlider} channel="alpha">
        <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
        <ColorPicker.ChannelSliderTrack class={styles.ChannelSliderTrack} />
        <ColorPicker.ChannelSliderThumb class={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.

**Example: with-field**

#### React

```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>
)

```

#### Solid

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

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

```

#### Vue

```vue
<script setup lang="ts">
import { ColorPicker, parseColor } from '@ark-ui/vue/color-picker'
import { Field } from '@ark-ui/vue/field'
import field from 'styles/field.module.css'
import styles from 'styles/color-picker.module.css'
</script>

<template>
  <Field.Root :class="field.Root">
    <ColorPicker.Root :class="styles.Root" :default-value="parseColor('#eb5e41')">
      <ColorPicker.Label :class="styles.Label">Label</ColorPicker.Label>
      <ColorPicker.Control :class="styles.Control">
        <ColorPicker.ChannelInput :class="styles.Input" channel="hex" />
        <ColorPicker.ChannelInput :class="styles.ChannelInput" channel="alpha" />
        <ColorPicker.Trigger :class="styles.Trigger">
          <div :class="styles.Swatch">
            <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
            <ColorPicker.ValueSwatch :class="styles.ValueSwatch" />
          </div>
        </ColorPicker.Trigger>
      </ColorPicker.Control>
      <ColorPicker.Positioner>
        <ColorPicker.Content :class="styles.Content" />
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
    <Field.HelperText :class="field.HelperText">Additional Info</Field.HelperText>
    <Field.ErrorText :class="field.ErrorText">Error Info</Field.ErrorText>
  </Field.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ColorPicker, parseColor } from '@ark-ui/svelte/color-picker'
  import { Field } from '@ark-ui/svelte/field'
  import field from 'styles/field.module.css'
  import styles from 'styles/color-picker.module.css'
</script>

<Field.Root class={field.Root}>
  <ColorPicker.Root class={styles.Root} defaultValue={parseColor('#eb5e41')}>
    <ColorPicker.Label class={styles.Label}>Label</ColorPicker.Label>
    <ColorPicker.Control class={styles.Control}>
      <ColorPicker.ChannelInput class={styles.Input} channel="hex" />
      <ColorPicker.ChannelInput class={styles.ChannelInput} channel="alpha" />
      <ColorPicker.Trigger class={styles.Trigger}>
        <div class={styles.Swatch}>
          <ColorPicker.TransparencyGrid class={styles.TransparencyGrid} />
          <ColorPicker.ValueSwatch class={styles.ValueSwatch} />
        </div>
      </ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.Positioner>
      <ColorPicker.Content class={styles.Content} />
    </ColorPicker.Positioner>
    <ColorPicker.HiddenInput />
  </ColorPicker.Root>
  <Field.HelperText class={field.HelperText}>Additional Info</Field.HelperText>
  <Field.ErrorText class={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.

**Example: form-usage**

#### React

```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>
  )
}

```

#### Solid

```tsx
import { ColorPicker, parseColor } from '@ark-ui/solid/color-picker'
import { createForm, setValue } from '@modular-forms/solid'
import { Pipette } from 'lucide-solid'
import button from 'styles/button.module.css'
import styles from 'styles/color-picker.module.css'

export const FormUsage = () => {
  const [formStore, { Form, Field }] = createForm<{ color: string }>()

  return (
    <Form
      class="stack"
      onSubmit={(data) => {
        window.alert(JSON.stringify(data))
      }}
    >
      <Field name="color">
        {(field) => (
          <ColorPicker.Root
            class={styles.Root}
            inline
            name={field.name}
            defaultValue={parseColor('#eb5e41')}
            onValueChange={(details) => setValue(formStore, 'color', details.valueAsString)}
          >
            <ColorPicker.HiddenInput />

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

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

            <ColorPicker.View class={styles.View} format="hsla">
              <div class={styles.ChannelInputGroup}>
                <ColorPicker.ChannelInput class={styles.ChannelInput} channel="hue" />
                <ColorPicker.ChannelInput class={styles.ChannelInput} channel="saturation" />
                <ColorPicker.ChannelInput class={styles.ChannelInput} channel="lightness" />
              </div>
            </ColorPicker.View>
          </ColorPicker.Root>
        )}
      </Field>
      <button class={button.Root} data-variant="solid" type="submit">
        Submit
      </button>
    </Form>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { ColorPicker, parseColor } from '@ark-ui/vue/color-picker'
import { useForm, useField } from 'vee-validate'
import { Pipette } from 'lucide-vue-next'
import button from 'styles/button.module.css'
import styles from 'styles/color-picker.module.css'

const { handleSubmit } = useForm<{ color: string }>()

const { setValue } = useField<string>('color')

const onSubmit = handleSubmit((values) => {
  window.alert(JSON.stringify(values))
})
</script>

<template>
  <form class="stack" @submit="onSubmit">
    <ColorPicker.Root
      :class="styles.Root"
      inline
      name="color"
      :default-value="parseColor('#eb5e41')"
      @value-change="(e) => setValue(e.valueAsString)"
    >
      <ColorPicker.HiddenInput />

      <ColorPicker.Area :class="styles.Area">
        <ColorPicker.AreaBackground :class="styles.AreaBackground" />
        <ColorPicker.AreaThumb :class="styles.AreaThumb" />
      </ColorPicker.Area>
      <div :class="styles.SliderGroup">
        <ColorPicker.EyeDropperTrigger :class="styles.EyeDropperTrigger">
          <Pipette />
        </ColorPicker.EyeDropperTrigger>
        <div :class="styles.ChannelSliders">
          <ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="hue">
            <ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
            <ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
          </ColorPicker.ChannelSlider>
          <ColorPicker.ChannelSlider :class="styles.ChannelSlider" channel="alpha">
            <ColorPicker.TransparencyGrid :class="styles.TransparencyGrid" />
            <ColorPicker.ChannelSliderTrack :class="styles.ChannelSliderTrack" />
            <ColorPicker.ChannelSliderThumb :class="styles.ChannelSliderThumb" />
          </ColorPicker.ChannelSlider>
        </div>
      </div>

      <ColorPicker.View :class="styles.View" format="rgba">
        <div :class="styles.ChannelInputGroup">
          <ColorPicker.ChannelInput :class="styles.ChannelInput" channel="hex" />
          <ColorPicker.ChannelInput :class="styles.ChannelInput" channel="alpha" />
        </div>
      </ColorPicker.View>

      <ColorPicker.View :class="styles.View" format="hsla">
        <div :class="styles.ChannelInputGroup">
          <ColorPicker.ChannelInput :class="styles.ChannelInput" channel="hue" />
          <ColorPicker.ChannelInput :class="styles.ChannelInput" channel="saturation" />
          <ColorPicker.ChannelInput :class="styles.ChannelInput" channel="lightness" />
        </div>
      </ColorPicker.View>
    </ColorPicker.Root>
    <button :class="button.Root" data-variant="solid" type="submit">Submit</button>
  </form>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { ColorPicker, parseColor } from '@ark-ui/svelte/color-picker'
  import { createForm } from '@tanstack/svelte-form'
  import { Pipette } from 'lucide-svelte'
  import button from 'styles/button.module.css'
  import styles from 'styles/color-picker.module.css'

  const form = createForm(() => ({
    defaultValues: {
      color: '',
    },
    onSubmit: async ({ value }) => {
      window.alert(JSON.stringify(value))
    },
  }))
</script>

<form
  class="stack"
  onsubmit={(e) => {
    e.preventDefault()
    form.handleSubmit()
  }}
>
  <form.Field name="color">
    {#snippet children(field)}
      <ColorPicker.Root
        class={styles.Root}
        inline
        name={field.name}
        defaultValue={parseColor('#eb5e41')}
        onValueChange={(details) => field.handleChange(details.valueAsString)}
      >
        <ColorPicker.HiddenInput />

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

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

        <ColorPicker.View class={styles.View} format="hsla">
          <div class={styles.ChannelInputGroup}>
            <ColorPicker.ChannelInput class={styles.ChannelInput} channel="hue" />
            <ColorPicker.ChannelInput class={styles.ChannelInput} channel="saturation" />
            <ColorPicker.ChannelInput class={styles.ChannelInput} channel="lightness" />
          </div>
        </ColorPicker.View>
      </ColorPicker.Root>
    {/snippet}
  </form.Field>
  <button class={button.Root} data-variant="solid" type="submit">Submit</button>
</form>

```

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `closeOnSelect` | `boolean` | No | Whether to close the color picker when a swatch is selected |
| `defaultFormat` | `ColorFormat` | No | The initial color format when rendered.
Use when you don't need to control the color format of the color picker. |
| `defaultOpen` | `boolean` | No | 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` | `Color` | No | The initial color value when rendered.
Use when you don't need to control the color value of the color picker. |
| `disabled` | `boolean` | No | Whether the color picker is disabled |
| `format` | `ColorFormat` | No | The controlled color format to use |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `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...` | No | The ids of the elements in the color picker. Useful for composition. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `initialFocusEl` | `() => HTMLElement | null` | No | The initial focus element when the color picker is opened. |
| `inline` | `boolean` | No | Whether to render the color picker inline |
| `invalid` | `boolean` | No | Whether the color picker is invalid |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `name` | `string` | No | The name for the form input |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `onFocusOutside` | `(event: FocusOutsideEvent) => void` | No | Function called when the focus is moved outside the component |
| `onFormatChange` | `(details: FormatChangeDetails) => void` | No | Function called when the color format changes |
| `onInteractOutside` | `(event: InteractOutsideEvent) => void` | No | Function called when an interaction happens outside the component |
| `onOpenChange` | `(details: OpenChangeDetails) => void` | No | Handler that is called when the user opens or closes the color picker. |
| `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | No | Function called when the pointer is pressed down outside the component |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Handler that is called when the value changes, as the user drags. |
| `onValueChangeEnd` | `(details: ValueChangeDetails) => void` | No | Handler that is called when the user stops dragging. |
| `open` | `boolean` | No | The controlled open state of the color picker |
| `openAutoFocus` | `boolean` | No | Whether to auto focus the color picker when it is opened |
| `positioning` | `PositioningOptions` | No | The positioning options for the color picker |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `readOnly` | `boolean` | No | Whether the color picker is read-only |
| `required` | `boolean` | No | Whether the color picker is required |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |
| `value` | `Color` | No | The controlled color value of the color picker |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | root |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |
| `[data-invalid]` | Present when invalid |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--value` | The current value |


**AreaBackground Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**AreaBackground Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `xChannel` | `ColorChannel` | No |  |
| `yChannel` | `ColorChannel` | No |  |


**Area Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**AreaThumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | area-thumb |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**AreaThumb CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--color` | The text color |


**ChannelInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `channel` | `ExtendedColorChannel` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `orientation` | `Orientation` | No |  |


**ChannelInput Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ChannelSliderLabel Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | channel-slider-label |
| `[data-channel]` | The color channel of the channelsliderlabel |


**ChannelSlider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `channel` | `ColorChannel` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `orientation` | `Orientation` | No |  |


**ChannelSlider Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ChannelSliderThumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ChannelSliderTrack Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ChannelSliderValueText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | channel-slider-value-text |
| `[data-channel]` | The color channel of the channelslidervaluetext |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | content |
| `[data-placement]` | The placement of the content |
| `[data-nested]` | popover |
| `[data-has-nested]` | popover |
| `[data-state]` | "open" | "closed" |


**Content CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--layer-index` | The index of the dismissable in the layer stack |
| `--nested-layer-count` | The number of nested color-pickers |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**EyeDropperTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**FormatTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Positioner CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--reference-width` | The width of the reference element |
| `--reference-height` | The height of the root |
| `--available-width` | The available width in viewport |
| `--available-height` | The available height in viewport |
| `--x` | The x position for transform |
| `--y` | The y position for transform |
| `--z-index` | The z-index value |
| `--transform-origin` | The transform origin for animations |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseColorPickerReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**SwatchGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**SwatchIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Swatch Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string | Color` | Yes | The color value |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `respectAlpha` | `boolean` | No | Whether to include the alpha channel in the color |


**Swatch Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | swatch |
| `[data-state]` | "checked" | "unchecked" |
| `[data-value]` | The value of the item |


**Swatch CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--color` | The text color |


**SwatchTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string | Color` | Yes | The color value |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No | Whether the swatch trigger is disabled |


**SwatchTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | swatch-trigger |
| `[data-state]` | "checked" | "unchecked" |
| `[data-value]` | The value of the item |
| `[data-disabled]` | Present when disabled |


**SwatchTrigger CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--color` | The text color |


**TransparencyGrid Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `size` | `string` | No |  |


**TransparencyGrid CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--size` | The size (width and height) of the element |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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-state]` | "open" | "closed" |
| `[data-focus]` | Present when focused |


**ValueSwatch Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `respectAlpha` | `boolean` | No | Whether to include the alpha channel in the color |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `format` | `ColorStringFormat` | No |  |


**ValueText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | value-text |
| `[data-disabled]` | Present when disabled |
| `[data-focus]` | Present when focused |


**View Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `format` | `ColorFormat` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `closeOnSelect` | `boolean` | No | Whether to close the color picker when a swatch is selected |
| `defaultFormat` | `ColorFormat` | No | The initial color format when rendered.
Use when you don't need to control the color format of the color picker. |
| `defaultOpen` | `boolean` | No | 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` | `Color` | No | The initial color value when rendered.
Use when you don't need to control the color value of the color picker. |
| `disabled` | `boolean` | No | Whether the color picker is disabled |
| `format` | `ColorFormat` | No | The controlled color format to use |
| `ids` | `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...` | No | The ids of the elements in the color picker. Useful for composition. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `initialFocusEl` | `() => HTMLElement | null` | No | The initial focus element when the color picker is opened. |
| `inline` | `boolean` | No | Whether to render the color picker inline |
| `invalid` | `boolean` | No | Whether the color picker is invalid |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `name` | `string` | No | The name for the form input |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `onFocusOutside` | `(event: FocusOutsideEvent) => void` | No | Function called when the focus is moved outside the component |
| `onFormatChange` | `(details: FormatChangeDetails) => void` | No | Function called when the color format changes |
| `onInteractOutside` | `(event: InteractOutsideEvent) => void` | No | Function called when an interaction happens outside the component |
| `onOpenChange` | `(details: OpenChangeDetails) => void` | No | Handler that is called when the user opens or closes the color picker. |
| `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | No | Function called when the pointer is pressed down outside the component |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Handler that is called when the value changes, as the user drags. |
| `onValueChangeEnd` | `(details: ValueChangeDetails) => void` | No | Handler that is called when the user stops dragging. |
| `open` | `boolean` | No | The controlled open state of the color picker |
| `openAutoFocus` | `boolean` | No | Whether to auto focus the color picker when it is opened |
| `positioning` | `PositioningOptions` | No | The positioning options for the color picker |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `readOnly` | `boolean` | No | Whether the color picker is read-only |
| `required` | `boolean` | No | Whether the color picker is required |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |
| `value` | `Color` | No | The controlled color value of the color picker |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | root |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |
| `[data-invalid]` | Present when invalid |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--value` | The current value |


**AreaBackground Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**AreaBackground Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `xChannel` | `ColorChannel` | No |  |
| `yChannel` | `ColorChannel` | No |  |


**Area Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**AreaThumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | area-thumb |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**AreaThumb CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--color` | The text color |


**ChannelInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `channel` | `ExtendedColorChannel` | Yes |  |
| `asChild` | `(props: ParentProps<'input'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `orientation` | `Orientation` | No |  |


**ChannelInput Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'label'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ChannelSliderLabel Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | channel-slider-label |
| `[data-channel]` | The color channel of the channelsliderlabel |


**ChannelSlider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `channel` | `ColorChannel` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `orientation` | `Orientation` | No |  |


**ChannelSlider Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ChannelSliderThumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ChannelSliderTrack Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ChannelSliderValueText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | channel-slider-value-text |
| `[data-channel]` | The color channel of the channelslidervaluetext |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | content |
| `[data-placement]` | The placement of the content |
| `[data-nested]` | popover |
| `[data-has-nested]` | popover |
| `[data-state]` | "open" | "closed" |


**Content CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--layer-index` | The index of the dismissable in the layer stack |
| `--nested-layer-count` | The number of nested color-pickers |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**EyeDropperTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'select'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**FormatTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'input'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'label'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Positioner CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--reference-width` | The width of the reference element |
| `--reference-height` | The height of the root |
| `--available-width` | The available width in viewport |
| `--available-height` | The available height in viewport |
| `--x` | The x position for transform |
| `--y` | The y position for transform |
| `--z-index` | The z-index value |
| `--transform-origin` | The transform origin for animations |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseColorPickerReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**SwatchGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**SwatchIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Swatch Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string | Color` | Yes | The color value |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `respectAlpha` | `boolean` | No | Whether to include the alpha channel in the color |


**Swatch Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | swatch |
| `[data-state]` | "checked" | "unchecked" |
| `[data-value]` | The value of the item |


**Swatch CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--color` | The text color |


**SwatchTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string | Color` | Yes | The color value |
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No | Whether the swatch trigger is disabled |


**SwatchTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | swatch-trigger |
| `[data-state]` | "checked" | "unchecked" |
| `[data-value]` | The value of the item |
| `[data-disabled]` | Present when disabled |


**SwatchTrigger CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--color` | The text color |


**TransparencyGrid Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `size` | `string` | No |  |


**TransparencyGrid CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--size` | The size (width and height) of the element |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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-state]` | "open" | "closed" |
| `[data-focus]` | Present when focused |


**ValueSwatch Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `respectAlpha` | `boolean` | No | Whether to include the alpha channel in the color |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `format` | `ColorStringFormat` | No |  |


**ValueText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | value-text |
| `[data-disabled]` | Present when disabled |
| `[data-focus]` | Present when focused |


**View Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `format` | `ColorFormat` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `closeOnSelect` | `boolean` | No | Whether to close the color picker when a swatch is selected |
| `defaultFormat` | `ColorFormat` | No | The initial color format when rendered.
Use when you don't need to control the color format of the color picker. |
| `defaultOpen` | `boolean` | No | 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` | `Color` | No | The initial color value when rendered.
Use when you don't need to control the color value of the color picker. |
| `disabled` | `boolean` | No | Whether the color picker is disabled |
| `format` | `ColorFormat` | No | The controlled color format to use |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `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; channelSliderT...` | No | The ids of the elements in the color picker. Useful for composition. |
| `initialFocusEl` | `() => HTMLElement | null` | No | The initial focus element when the color picker is opened. |
| `inline` | `boolean` | No | Whether the color picker is inline |
| `invalid` | `boolean` | No | Whether the color picker is invalid |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `modelValue` | `Color` | No | The v-model value of the color picker |
| `name` | `string` | No | The name for the form input |
| `open` | `boolean` | No | The controlled open state of the color picker |
| `openAutoFocus` | `boolean` | No | Whether to auto focus the color picker when it is opened |
| `positioning` | `PositioningOptions` | No | The positioning options for the color picker |
| `readOnly` | `boolean` | No | Whether the color picker is read-only |
| `required` | `boolean` | No | Whether the color picker is required |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | root |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |
| `[data-invalid]` | Present when invalid |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--value` | The current value |


**AreaBackground Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**AreaBackground Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `xChannel` | `ColorChannel` | No |  |
| `yChannel` | `ColorChannel` | No |  |


**Area Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**AreaThumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | area-thumb |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**AreaThumb CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--color` | The text color |


**ChannelInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `channel` | `ExtendedColorChannel` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `orientation` | `Orientation` | No |  |


**ChannelInput Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ChannelSliderLabel Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | channel-slider-label |
| `[data-channel]` | The color channel of the channelsliderlabel |


**ChannelSlider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `channel` | `ColorChannel` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `orientation` | `Orientation` | No |  |


**ChannelSlider Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ChannelSliderThumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ChannelSliderTrack Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**ChannelSliderValueText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | channel-slider-value-text |
| `[data-channel]` | The color channel of the channelslidervaluetext |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | content |
| `[data-placement]` | The placement of the content |
| `[data-nested]` | popover |
| `[data-has-nested]` | popover |
| `[data-state]` | "open" | "closed" |


**Content CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--layer-index` | The index of the dismissable in the layer stack |
| `--nested-layer-count` | The number of nested color-pickers |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**EyeDropperTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**FormatTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Positioner CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--reference-width` | The width of the reference element |
| `--reference-height` | The height of the root |
| `--available-width` | The available width in viewport |
| `--available-height` | The available height in viewport |
| `--x` | The x position for transform |
| `--y` | The y position for transform |
| `--z-index` | The z-index value |
| `--transform-origin` | The transform origin for animations |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `ColorPickerApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**SwatchGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**SwatchIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Swatch Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string | Color` | Yes | The color value |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `respectAlpha` | `boolean` | No | Whether to include the alpha channel in the color |


**Swatch Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | swatch |
| `[data-state]` | "checked" | "unchecked" |
| `[data-value]` | The value of the item |


**Swatch CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--color` | The text color |


**SwatchTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string | Color` | Yes | The color value |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No | Whether the swatch trigger is disabled |


**SwatchTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | swatch-trigger |
| `[data-state]` | "checked" | "unchecked" |
| `[data-value]` | The value of the item |
| `[data-disabled]` | Present when disabled |


**SwatchTrigger CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--color` | The text color |


**TransparencyGrid Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `size` | `string` | No |  |


**TransparencyGrid CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--size` | The size (width and height) of the element |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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-state]` | "open" | "closed" |
| `[data-focus]` | Present when focused |


**ValueSwatch Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `respectAlpha` | `boolean` | No | Whether to include the alpha channel in the color |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `format` | `ColorStringFormat` | No |  |


**ValueText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | value-text |
| `[data-disabled]` | Present when disabled |
| `[data-focus]` | Present when focused |


**View Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `format` | `ColorFormat` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `closeOnSelect` | `boolean` | No | Whether to close the color picker when a swatch is selected |
| `defaultFormat` | `ColorFormat` | No | The initial color format when rendered.
Use when you don't need to control the color format of the color picker. |
| `defaultOpen` | `boolean` | No | 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` | `Color` | No | The initial color value when rendered.
Use when you don't need to control the color value of the color picker. |
| `disabled` | `boolean` | No | Whether the color picker is disabled |
| `format` | `ColorFormat` | No | The controlled color format to use |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `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...` | No | The ids of the elements in the color picker. Useful for composition. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `initialFocusEl` | `() => HTMLElement | null` | No | The initial focus element when the color picker is opened. |
| `inline` | `boolean` | No | Whether to render the color picker inline |
| `invalid` | `boolean` | No | Whether the color picker is invalid |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `name` | `string` | No | The name for the form input |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `onFocusOutside` | `(event: FocusOutsideEvent) => void` | No | Function called when the focus is moved outside the component |
| `onFormatChange` | `(details: FormatChangeDetails) => void` | No | Function called when the color format changes |
| `onInteractOutside` | `(event: InteractOutsideEvent) => void` | No | Function called when an interaction happens outside the component |
| `onOpenChange` | `(details: OpenChangeDetails) => void` | No | Handler that is called when the user opens or closes the color picker. |
| `onPointerDownOutside` | `(event: PointerDownOutsideEvent) => void` | No | Function called when the pointer is pressed down outside the component |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Handler that is called when the value changes, as the user drags. |
| `onValueChangeEnd` | `(details: ValueChangeDetails) => void` | No | Handler that is called when the user stops dragging. |
| `open` | `boolean` | No | The controlled open state of the color picker |
| `openAutoFocus` | `boolean` | No | Whether to auto focus the color picker when it is opened |
| `positioning` | `PositioningOptions` | No | The positioning options for the color picker |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `readOnly` | `boolean` | No | Whether the color picker is read-only |
| `ref` | `Element` | No |  |
| `required` | `boolean` | No | Whether the color picker is required |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |
| `value` | `Color` | No | The controlled color value of the color picker |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | root |
| `[data-disabled]` | Present when disabled |
| `[data-readonly]` | Present when read-only |
| `[data-invalid]` | Present when invalid |


**Root CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--value` | The current value |


**AreaBackground Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**AreaBackground Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |
| `xChannel` | `ColorChannel` | No |  |
| `yChannel` | `ColorChannel` | No |  |


**Area Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**AreaThumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | area-thumb |
| `[data-disabled]` | Present when disabled |
| `[data-invalid]` | Present when invalid |
| `[data-readonly]` | Present when read-only |


**AreaThumb CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--color` | The text color |


**ChannelInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `channel` | `ExtendedColorChannel` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'input'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `orientation` | `Orientation` | No |  |
| `ref` | `Element` | No |  |


**ChannelInput Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ChannelSliderLabel Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | channel-slider-label |
| `[data-channel]` | The color channel of the channelsliderlabel |


**ChannelSlider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `channel` | `ColorChannel` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `orientation` | `Orientation` | No |  |
| `ref` | `Element` | No |  |


**ChannelSlider Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ChannelSliderThumb Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ChannelSliderTrack Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**ChannelSliderValueText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | channel-slider-value-text |
| `[data-channel]` | The color channel of the channelslidervaluetext |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | content |
| `[data-placement]` | The placement of the content |
| `[data-nested]` | popover |
| `[data-has-nested]` | popover |
| `[data-state]` | "open" | "closed" |


**Content CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--layer-index` | The index of the dismissable in the layer stack |
| `--nested-layer-count` | The number of nested color-pickers |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseColorPickerContext]>` | Yes |  |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**EyeDropperTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'select'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**FormatTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'input'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Positioner CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--reference-width` | The width of the reference element |
| `--reference-height` | The height of the root |
| `--available-width` | The available width in viewport |
| `--available-height` | The available height in viewport |
| `--x` | The x position for transform |
| `--y` | The y position for transform |
| `--z-index` | The z-index value |
| `--transform-origin` | The transform origin for animations |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseColorPickerReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `immediate` | `boolean` | No | Whether to synchronize the present change immediately or defer it to the next frame |
| `lazyMount` | `boolean` | No | Whether to enable lazy mounting |
| `onExitComplete` | `VoidFunction` | No | Function called when the animation ends in the closed state |
| `present` | `boolean` | No | Whether the node is present (controlled by the user) |
| `ref` | `Element` | No |  |
| `skipAnimationOnMount` | `boolean` | No | Whether to allow the initial presence animation. |
| `unmountOnExit` | `boolean` | No | Whether to unmount on exit. |


**SwatchGroup Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**SwatchIndicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Swatch Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string | Color` | Yes | The color value |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |
| `respectAlpha` | `boolean` | No | Whether to include the alpha channel in the color |


**Swatch Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | swatch |
| `[data-state]` | "checked" | "unchecked" |
| `[data-value]` | The value of the item |


**Swatch CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--color` | The text color |


**SwatchTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `string | Color` | Yes | The color value |
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `disabled` | `boolean` | No | Whether the swatch trigger is disabled |
| `ref` | `Element` | No |  |


**SwatchTrigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | swatch-trigger |
| `[data-state]` | "checked" | "unchecked" |
| `[data-value]` | The value of the item |
| `[data-disabled]` | Present when disabled |


**SwatchTrigger CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--color` | The text color |


**TransparencyGrid Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |
| `size` | `string` | No |  |


**TransparencyGrid CSS Variables:**

| Variable | Description |
|----------|-------------|
| `--size` | The size (width and height) of the element |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[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-state]` | "open" | "closed" |
| `[data-focus]` | Present when focused |


**ValueSwatch Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |
| `respectAlpha` | `boolean` | No | Whether to include the alpha channel in the color |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `format` | `ColorStringFormat` | No |  |
| `ref` | `Element` | No |  |


**ValueText Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | color-picker |
| `[data-part]` | value-text |
| `[data-disabled]` | Present when disabled |
| `[data-focus]` | Present when focused |


**View Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `format` | `ColorFormat` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


### 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

<KeyBindingsTable id="color-picker" />