# 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

To set up the color picker correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="color-picker" />

## Examples

Learn how to use the `ColorPicker` component in your project. Let's take a look at the most basic example

**Example: basic**

#### React

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

export const Basic = () => {
  return (
    <ColorPicker.Root defaultValue={parseColor('#eb5e41')}>
      <ColorPicker.Label>Color</ColorPicker.Label>
      <ColorPicker.Control>
        <ColorPicker.ChannelInput channel="hex" />
        <ColorPicker.ChannelInput channel="alpha" />
        <ColorPicker.ValueText />
        <ColorPicker.Trigger>
          <ColorPicker.TransparencyGrid />
          <ColorPicker.ValueSwatch />
        </ColorPicker.Trigger>
      </ColorPicker.Control>
      <ColorPicker.Positioner>
        <ColorPicker.Content>
          <ColorPicker.FormatTrigger>Toggle ColorFormat</ColorPicker.FormatTrigger>
          <ColorPicker.FormatSelect />
          <ColorPicker.Area>
            <ColorPicker.AreaBackground />
            <ColorPicker.AreaThumb />
          </ColorPicker.Area>
          <ColorPicker.ChannelSlider channel="hue">
            <ColorPicker.ChannelSliderTrack />
            <ColorPicker.ChannelSliderThumb />
          </ColorPicker.ChannelSlider>
          <ColorPicker.ChannelSlider channel="alpha">
            <ColorPicker.TransparencyGrid />
            <ColorPicker.ChannelSliderTrack />
            <ColorPicker.ChannelSliderThumb />
          </ColorPicker.ChannelSlider>
          <ColorPicker.SwatchGroup>
            <ColorPicker.SwatchTrigger value="red">
              <ColorPicker.Swatch value="red">
                <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
              </ColorPicker.Swatch>
            </ColorPicker.SwatchTrigger>
            <ColorPicker.SwatchTrigger value="blue">
              <ColorPicker.Swatch value="blue">
                <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
              </ColorPicker.Swatch>
            </ColorPicker.SwatchTrigger>
            <ColorPicker.SwatchTrigger value="green">
              <ColorPicker.Swatch value="green">
                <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
              </ColorPicker.Swatch>
            </ColorPicker.SwatchTrigger>
          </ColorPicker.SwatchGroup>
          <ColorPicker.View format="rgba">
            <ColorPicker.ChannelInput channel="hex" />
            <ColorPicker.ChannelInput channel="alpha" />
          </ColorPicker.View>
          <ColorPicker.View format="hsla">
            <ColorPicker.ChannelInput channel="hue" />
            <ColorPicker.ChannelInput channel="saturation" />
            <ColorPicker.ChannelInput channel="lightness" />
          </ColorPicker.View>
          <ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
        </ColorPicker.Content>
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
  )
}

```

#### Solid

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

export const Basic = () => {
  return (
    <ColorPicker.Root defaultValue={parseColor('#eb5e41')}>
      <ColorPicker.Label>Color</ColorPicker.Label>
      <ColorPicker.Control>
        <ColorPicker.ChannelInput channel="hex" />
        <ColorPicker.ChannelInput channel="alpha" />
        <ColorPicker.ValueText />
        <ColorPicker.Trigger>
          <ColorPicker.TransparencyGrid />
          <ColorPicker.ValueSwatch />
        </ColorPicker.Trigger>
      </ColorPicker.Control>
      <ColorPicker.Positioner>
        <ColorPicker.Content>
          <ColorPicker.FormatTrigger>Toggle ColorFormat</ColorPicker.FormatTrigger>
          <ColorPicker.FormatSelect />
          <ColorPicker.Area>
            <ColorPicker.AreaBackground />
            <ColorPicker.AreaThumb />
          </ColorPicker.Area>
          <ColorPicker.ChannelSlider channel="hue">
            <ColorPicker.ChannelSliderTrack />
            <ColorPicker.ChannelSliderThumb />
          </ColorPicker.ChannelSlider>
          <ColorPicker.ChannelSlider channel="alpha">
            <ColorPicker.TransparencyGrid />
            <ColorPicker.ChannelSliderTrack />
            <ColorPicker.ChannelSliderThumb />
          </ColorPicker.ChannelSlider>
          <ColorPicker.SwatchGroup>
            <ColorPicker.SwatchTrigger value="red">
              <ColorPicker.Swatch value="red">
                <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
              </ColorPicker.Swatch>
            </ColorPicker.SwatchTrigger>
            <ColorPicker.SwatchTrigger value="blue">
              <ColorPicker.Swatch value="blue">
                <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
              </ColorPicker.Swatch>
            </ColorPicker.SwatchTrigger>
            <ColorPicker.SwatchTrigger value="green">
              <ColorPicker.Swatch value="green">
                <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
              </ColorPicker.Swatch>
            </ColorPicker.SwatchTrigger>
          </ColorPicker.SwatchGroup>
          <ColorPicker.View format="rgba">
            <ColorPicker.ChannelInput channel="hex" />
            <ColorPicker.ChannelInput channel="alpha" />
          </ColorPicker.View>
          <ColorPicker.View format="hsla">
            <ColorPicker.ChannelInput channel="hue" />
            <ColorPicker.ChannelInput channel="saturation" />
            <ColorPicker.ChannelInput channel="lightness" />
          </ColorPicker.View>
          <ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
        </ColorPicker.Content>
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { ColorPicker } from '@ark-ui/vue/color-picker'
</script>

<template>
  <ColorPicker.Root>
    <ColorPicker.Label>Color</ColorPicker.Label>
    <ColorPicker.Control>
      <ColorPicker.ChannelInput channel="hex" />
      <ColorPicker.ChannelInput channel="alpha" />
      <ColorPicker.ValueText />
      <ColorPicker.Trigger>
        <ColorPicker.TransparencyGrid />
        <ColorPicker.ValueSwatch />
      </ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.Positioner>
      <ColorPicker.Content>
        <ColorPicker.FormatTrigger>Toggle ColorFormat</ColorPicker.FormatTrigger>
        <ColorPicker.FormatSelect />
        <ColorPicker.Area>
          <ColorPicker.AreaBackground />
          <ColorPicker.AreaThumb />
        </ColorPicker.Area>
        <ColorPicker.ChannelSlider channel="hue">
          <ColorPicker.ChannelSliderTrack />
          <ColorPicker.ChannelSliderThumb />
        </ColorPicker.ChannelSlider>
        <ColorPicker.ChannelSlider channel="alpha">
          <ColorPicker.TransparencyGrid />
          <ColorPicker.ChannelSliderTrack />
          <ColorPicker.ChannelSliderThumb />
        </ColorPicker.ChannelSlider>
        <ColorPicker.SwatchGroup>
          <ColorPicker.SwatchTrigger value="red">
            <ColorPicker.Swatch value="red">
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
          <ColorPicker.SwatchTrigger value="blue">
            <ColorPicker.Swatch value="blue">
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
          <ColorPicker.SwatchTrigger value="green">
            <ColorPicker.Swatch value="green">
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
        </ColorPicker.SwatchGroup>
        <ColorPicker.View format="rgba">
          <ColorPicker.ChannelInput channel="hex" />
          <ColorPicker.ChannelInput channel="alpha" />
        </ColorPicker.View>
        <ColorPicker.View format="hsla">
          <ColorPicker.ChannelInput channel="hue" />
          <ColorPicker.ChannelInput channel="saturation" />
          <ColorPicker.ChannelInput channel="lightness" />
        </ColorPicker.View>
        <ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
      </ColorPicker.Content>
    </ColorPicker.Positioner>
    <ColorPicker.HiddenInput />
  </ColorPicker.Root>
</template>

```

#### Svelte

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

<ColorPicker.Root defaultValue={parseColor('#eb5e41')}>
  <ColorPicker.Label>Color</ColorPicker.Label>
  <ColorPicker.Control>
    <ColorPicker.ChannelInput channel="hex" />
    <ColorPicker.ChannelInput channel="alpha" />
    <ColorPicker.ValueText />
    <ColorPicker.Trigger>
      <ColorPicker.TransparencyGrid />
      <ColorPicker.ValueSwatch />
    </ColorPicker.Trigger>
  </ColorPicker.Control>
  <ColorPicker.Positioner>
    <ColorPicker.Content>
      <ColorPicker.FormatTrigger>Toggle ColorFormat</ColorPicker.FormatTrigger>
      <ColorPicker.FormatSelect />
      <ColorPicker.Area>
        <ColorPicker.AreaBackground />
        <ColorPicker.AreaThumb />
      </ColorPicker.Area>
      <ColorPicker.ChannelSlider channel="hue">
        <ColorPicker.ChannelSliderTrack />
        <ColorPicker.ChannelSliderThumb />
      </ColorPicker.ChannelSlider>
      <ColorPicker.ChannelSlider channel="alpha">
        <ColorPicker.TransparencyGrid />
        <ColorPicker.ChannelSliderTrack />
        <ColorPicker.ChannelSliderThumb />
      </ColorPicker.ChannelSlider>
      <ColorPicker.SwatchGroup>
        <ColorPicker.SwatchTrigger value="red">
          <ColorPicker.Swatch value="red">
            <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
          </ColorPicker.Swatch>
        </ColorPicker.SwatchTrigger>
        <ColorPicker.SwatchTrigger value="blue">
          <ColorPicker.Swatch value="blue">
            <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
          </ColorPicker.Swatch>
        </ColorPicker.SwatchTrigger>
        <ColorPicker.SwatchTrigger value="green">
          <ColorPicker.Swatch value="green">
            <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
          </ColorPicker.Swatch>
        </ColorPicker.SwatchTrigger>
      </ColorPicker.SwatchGroup>
      <ColorPicker.View format="rgba">
        <ColorPicker.ChannelInput channel="hex" />
        <ColorPicker.ChannelInput channel="alpha" />
      </ColorPicker.View>
      <ColorPicker.View format="hsla">
        <ColorPicker.ChannelInput channel="hue" />
        <ColorPicker.ChannelInput channel="saturation" />
        <ColorPicker.ChannelInput channel="lightness" />
      </ColorPicker.View>
      <ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
    </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 { useState } from 'react'

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

  return (
    <ColorPicker.Root format="hsla" value={color} onValueChange={(e) => setColor(e.value)}>
      <ColorPicker.Label>Color</ColorPicker.Label>
      <ColorPicker.Control>
        <ColorPicker.ChannelInput channel="hex" />
        <ColorPicker.ChannelInput channel="alpha" />
        <ColorPicker.ValueText />
        <ColorPicker.Trigger>
          <ColorPicker.TransparencyGrid />
          <ColorPicker.ValueSwatch />
        </ColorPicker.Trigger>
      </ColorPicker.Control>

      <ColorPicker.Positioner>
        <ColorPicker.Content>
          <ColorPicker.Area>
            <ColorPicker.AreaBackground />
            <ColorPicker.AreaThumb />
          </ColorPicker.Area>

          <ColorPicker.ChannelSlider channel="hue">
            <ColorPicker.ChannelSliderTrack />
            <ColorPicker.ChannelSliderThumb />
          </ColorPicker.ChannelSlider>
          <ColorPicker.ChannelSlider channel="alpha">
            <ColorPicker.TransparencyGrid />
            <ColorPicker.ChannelSliderTrack />
            <ColorPicker.ChannelSliderThumb />
          </ColorPicker.ChannelSlider>

          <ColorPicker.SwatchGroup>
            <ColorPicker.SwatchTrigger value="red">
              <ColorPicker.Swatch value="red">
                <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
              </ColorPicker.Swatch>
            </ColorPicker.SwatchTrigger>
            <ColorPicker.SwatchTrigger value="blue">
              <ColorPicker.Swatch value="blue">
                <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
              </ColorPicker.Swatch>
            </ColorPicker.SwatchTrigger>
            <ColorPicker.SwatchTrigger value="green">
              <ColorPicker.Swatch value="green">
                <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
              </ColorPicker.Swatch>
            </ColorPicker.SwatchTrigger>
          </ColorPicker.SwatchGroup>

          <ColorPicker.View format="rgba">
            <ColorPicker.ChannelInput channel="hex" />
            <ColorPicker.ChannelInput channel="alpha" />
          </ColorPicker.View>

          <ColorPicker.View format="hsla">
            <ColorPicker.ChannelInput channel="hue" />
            <ColorPicker.ChannelInput channel="saturation" />
            <ColorPicker.ChannelInput channel="lightness" />
          </ColorPicker.View>

          <ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
        </ColorPicker.Content>
      </ColorPicker.Positioner>

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

```

#### Solid

```tsx
import { ColorPicker, parseColor } from '@ark-ui/solid/color-picker'
import { createSignal } from 'solid-js'

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

  return (
    <ColorPicker.Root
      value={color()}
      onValueChange={(e) => setColor(e.value)}
      onValueChangeEnd={(e) => console.log(e.valueAsString)}
    >
      <ColorPicker.Label>Color</ColorPicker.Label>
      <ColorPicker.Control>
        <ColorPicker.ChannelInput channel="hex" />
        <ColorPicker.ChannelInput channel="alpha" />
        <ColorPicker.ValueText />
        <ColorPicker.Trigger>
          <ColorPicker.TransparencyGrid />
          <ColorPicker.ValueSwatch />
        </ColorPicker.Trigger>
      </ColorPicker.Control>
      <ColorPicker.Positioner>
        <ColorPicker.Content>
          <ColorPicker.Area>
            <ColorPicker.AreaBackground />
            <ColorPicker.AreaThumb />
          </ColorPicker.Area>
          <ColorPicker.ChannelSlider channel="hue">
            <ColorPicker.ChannelSliderTrack />
            <ColorPicker.ChannelSliderThumb />
          </ColorPicker.ChannelSlider>
          <ColorPicker.ChannelSlider channel="alpha">
            <ColorPicker.TransparencyGrid />
            <ColorPicker.ChannelSliderTrack />
            <ColorPicker.ChannelSliderThumb />
          </ColorPicker.ChannelSlider>
          <ColorPicker.SwatchGroup>
            <ColorPicker.SwatchTrigger value="red">
              <ColorPicker.Swatch value="red">
                <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
              </ColorPicker.Swatch>
            </ColorPicker.SwatchTrigger>
            <ColorPicker.SwatchTrigger value="blue">
              <ColorPicker.Swatch value="blue">
                <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
              </ColorPicker.Swatch>
            </ColorPicker.SwatchTrigger>
            <ColorPicker.SwatchTrigger value="green">
              <ColorPicker.Swatch value="green">
                <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
              </ColorPicker.Swatch>
            </ColorPicker.SwatchTrigger>
          </ColorPicker.SwatchGroup>
          <ColorPicker.View format="rgba">
            <ColorPicker.ChannelInput channel="hex" />
            <ColorPicker.ChannelInput channel="alpha" />
          </ColorPicker.View>
          <ColorPicker.View format="hsla">
            <ColorPicker.ChannelInput channel="hue" />
            <ColorPicker.ChannelInput channel="saturation" />
            <ColorPicker.ChannelInput channel="lightness" />
          </ColorPicker.View>
          <ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
        </ColorPicker.Content>
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
  )
}

```

#### Vue

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

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

<template>
  <ColorPicker.Root format="hsla" v-model="value">
    <ColorPicker.Label>Color</ColorPicker.Label>
    <ColorPicker.Control>
      <ColorPicker.ChannelInput channel="hex" />
      <ColorPicker.ChannelInput channel="alpha" />
      <ColorPicker.ValueText />
      <ColorPicker.Trigger>
        <ColorPicker.TransparencyGrid />
        <ColorPicker.ValueSwatch />
      </ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.Positioner>
      <ColorPicker.Content>
        <ColorPicker.Area>
          <ColorPicker.AreaBackground />
          <ColorPicker.AreaThumb />
        </ColorPicker.Area>
        <ColorPicker.ChannelSlider channel="hue">
          <ColorPicker.ChannelSliderTrack />
          <ColorPicker.ChannelSliderThumb />
        </ColorPicker.ChannelSlider>
        <ColorPicker.ChannelSlider channel="alpha">
          <ColorPicker.TransparencyGrid />
          <ColorPicker.ChannelSliderTrack />
          <ColorPicker.ChannelSliderThumb />
        </ColorPicker.ChannelSlider>
        <ColorPicker.SwatchGroup>
          <ColorPicker.SwatchTrigger value="red">
            <ColorPicker.Swatch value="red">
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
          <ColorPicker.SwatchTrigger value="blue">
            <ColorPicker.Swatch value="blue">
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
          <ColorPicker.SwatchTrigger value="green">
            <ColorPicker.Swatch value="green">
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
        </ColorPicker.SwatchGroup>
        <ColorPicker.View format="rgba">
          <ColorPicker.ChannelInput channel="hex" />
          <ColorPicker.ChannelInput channel="alpha" />
        </ColorPicker.View>
        <ColorPicker.View format="hsla">
          <ColorPicker.ChannelInput channel="hue" />
          <ColorPicker.ChannelInput channel="saturation" />
          <ColorPicker.ChannelInput channel="lightness" />
        </ColorPicker.View>
        <ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
      </ColorPicker.Content>
    </ColorPicker.Positioner>
    <ColorPicker.HiddenInput />
  </ColorPicker.Root>
</template>

```

#### Svelte

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

  let value = $state(parseColor('#eb5e41'))
</script>

<div>
  <p>Selected color: {value.toString('hex')}</p>
  <ColorPicker.Root bind:value>
    <ColorPicker.Label>Color</ColorPicker.Label>
    <ColorPicker.Control>
      <ColorPicker.ValueText />
      <ColorPicker.Trigger>
        <ColorPicker.ValueSwatch />
      </ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.Positioner>
      <ColorPicker.Content>
        <ColorPicker.FormatTrigger>Toggle ColorFormat</ColorPicker.FormatTrigger>
        <ColorPicker.FormatSelect />
        <ColorPicker.Area>
          <ColorPicker.AreaBackground />
          <ColorPicker.AreaThumb />
        </ColorPicker.Area>
        <ColorPicker.ChannelSlider channel="hue">
          <ColorPicker.ChannelSliderTrack />
          <ColorPicker.ChannelSliderThumb />
        </ColorPicker.ChannelSlider>
        <ColorPicker.ChannelSlider channel="alpha">
          <ColorPicker.TransparencyGrid />
          <ColorPicker.ChannelSliderTrack />
          <ColorPicker.ChannelSliderThumb />
        </ColorPicker.ChannelSlider>
        <ColorPicker.SwatchGroup>
          <ColorPicker.SwatchTrigger value="red">
            <ColorPicker.Swatch value="red">
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
          <ColorPicker.SwatchTrigger value="blue">
            <ColorPicker.Swatch value="blue">
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
          <ColorPicker.SwatchTrigger value="green">
            <ColorPicker.Swatch value="green">
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
        </ColorPicker.SwatchGroup>
        <ColorPicker.View format="rgba">
          <ColorPicker.ChannelInput channel="hex" />
          <ColorPicker.ChannelInput channel="alpha" />
        </ColorPicker.View>
        <ColorPicker.View format="hsla">
          <ColorPicker.ChannelInput channel="hue" />
          <ColorPicker.ChannelInput channel="saturation" />
          <ColorPicker.ChannelInput channel="lightness" />
        </ColorPicker.View>
        <ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
      </ColorPicker.Content>
    </ColorPicker.Positioner>
    <ColorPicker.HiddenInput />
  </ColorPicker.Root>
</div>

```

> Alternatively, the `onValueChangeEnd` prop can be used to listen for when the user has finished selecting a color.

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

export const WithField = (props: Field.RootProps) => (
  <Field.Root {...props}>
    <ColorPicker.Root defaultValue={parseColor('#eb5e41')}>
      <ColorPicker.Label>Label</ColorPicker.Label>
      <ColorPicker.Control>
        <ColorPicker.ChannelInput channel="hex" />
        <ColorPicker.ChannelInput channel="alpha" />
        <ColorPicker.ValueText />
        <ColorPicker.Trigger>
          <ColorPicker.TransparencyGrid />
          <ColorPicker.ValueSwatch />
        </ColorPicker.Trigger>
      </ColorPicker.Control>
      <ColorPicker.Positioner>
        <ColorPicker.Content />
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
    <Field.HelperText>Additional Info</Field.HelperText>
    <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'

export const WithField = (props: Field.RootProps) => (
  <Field.Root {...props}>
    <ColorPicker.Root defaultValue={parseColor('#eb5e41')}>
      <ColorPicker.Label>Label</ColorPicker.Label>
      <ColorPicker.Control>
        <ColorPicker.ChannelInput channel="hex" />
        <ColorPicker.ChannelInput channel="alpha" />
        <ColorPicker.ValueText />
        <ColorPicker.Trigger>
          <ColorPicker.TransparencyGrid />
          <ColorPicker.ValueSwatch />
        </ColorPicker.Trigger>
      </ColorPicker.Control>
      <ColorPicker.Positioner>
        <ColorPicker.Content />
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
    <Field.HelperText>Additional Info</Field.HelperText>
    <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, type FieldRootProps } from '@ark-ui/vue/field'

const defaultValue = parseColor('hsl(20, 100%, 50%)')

const props = defineProps<FieldRootProps>()
</script>

<template>
  <Field.Root v-bind="props">
    <ColorPicker.Root :defaultValue>
      <ColorPicker.Label>Label</ColorPicker.Label>
      <ColorPicker.Control>
        <ColorPicker.ChannelInput channel="hex" />
        <ColorPicker.ChannelInput channel="alpha" />
        <ColorPicker.ValueText />
        <ColorPicker.Trigger>
          <ColorPicker.TransparencyGrid />
          <ColorPicker.ValueSwatch />
        </ColorPicker.Trigger>
      </ColorPicker.Control>
      <ColorPicker.Positioner>
        <ColorPicker.Content />
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
    <Field.HelperText>Additional Info</Field.HelperText>
    <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'
</script>

<Field.Root>
  <ColorPicker.Root defaultValue={parseColor('#eb5e41')}>
    <ColorPicker.Label>Label</ColorPicker.Label>
    <ColorPicker.Control>
      <ColorPicker.ChannelInput channel="hex" />
      <ColorPicker.ChannelInput channel="alpha" />
      <ColorPicker.ValueText />
      <ColorPicker.Trigger>
        <ColorPicker.TransparencyGrid />
        <ColorPicker.ValueSwatch />
      </ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.Positioner>
      <ColorPicker.Content />
    </ColorPicker.Positioner>
    <ColorPicker.HiddenInput />
  </ColorPicker.Root>
  <Field.HelperText>Additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

```

### Root Provider

Use the `useColorPicker` hook to create the color picker store and pass it to the `ColorPicker.RootProvider` component.
This allows you to have maximum control over the color picker programmatically.

**Example: root-provider**

#### React

```tsx
import { ColorPicker, parseColor, useColorPicker } from '@ark-ui/react/color-picker'

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

  return (
    <>
      <span>Color: {colorPicker.valueAsString}</span>

      <ColorPicker.RootProvider value={colorPicker}>
        <ColorPicker.Label>Color</ColorPicker.Label>
        <ColorPicker.Control>
          <ColorPicker.ChannelInput channel="hex" />
          <ColorPicker.ChannelInput channel="alpha" />
          <ColorPicker.ValueText />
          <ColorPicker.Trigger>
            <ColorPicker.TransparencyGrid />
            <ColorPicker.ValueSwatch />
          </ColorPicker.Trigger>
        </ColorPicker.Control>
        <ColorPicker.Positioner>
          <ColorPicker.Content>
            <ColorPicker.FormatTrigger>Toggle ColorFormat</ColorPicker.FormatTrigger>
            <ColorPicker.FormatSelect />
            <ColorPicker.Area>
              <ColorPicker.AreaBackground />
              <ColorPicker.AreaThumb />
            </ColorPicker.Area>
            <ColorPicker.ChannelSlider channel="hue">
              <ColorPicker.ChannelSliderTrack />
              <ColorPicker.ChannelSliderThumb />
            </ColorPicker.ChannelSlider>
            <ColorPicker.ChannelSlider channel="alpha">
              <ColorPicker.TransparencyGrid />
              <ColorPicker.ChannelSliderTrack />
              <ColorPicker.ChannelSliderThumb />
            </ColorPicker.ChannelSlider>
            <ColorPicker.SwatchGroup>
              <ColorPicker.SwatchTrigger value="red">
                <ColorPicker.Swatch value="red">
                  <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
                </ColorPicker.Swatch>
              </ColorPicker.SwatchTrigger>
              <ColorPicker.SwatchTrigger value="blue">
                <ColorPicker.Swatch value="blue">
                  <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
                </ColorPicker.Swatch>
              </ColorPicker.SwatchTrigger>
              <ColorPicker.SwatchTrigger value="green">
                <ColorPicker.Swatch value="green">
                  <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
                </ColorPicker.Swatch>
              </ColorPicker.SwatchTrigger>
            </ColorPicker.SwatchGroup>
            <ColorPicker.View format="rgba">
              <ColorPicker.ChannelInput channel="hex" />
              <ColorPicker.ChannelInput channel="alpha" />
            </ColorPicker.View>
            <ColorPicker.View format="hsla">
              <ColorPicker.ChannelInput channel="hue" />
              <ColorPicker.ChannelInput channel="saturation" />
              <ColorPicker.ChannelInput channel="lightness" />
            </ColorPicker.View>
            <ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
          </ColorPicker.Content>
        </ColorPicker.Positioner>
        <ColorPicker.HiddenInput />
      </ColorPicker.RootProvider>
    </>
  )
}

```

#### Solid

```tsx
import { ColorPicker, parseColor, useColorPicker } from '@ark-ui/solid/color-picker'

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

  return (
    <>
      <span>Color: {colorPicker().valueAsString}</span>

      <ColorPicker.RootProvider value={colorPicker}>
        <ColorPicker.Label>Color</ColorPicker.Label>
        <ColorPicker.Control>
          <ColorPicker.ChannelInput channel="hex" />
          <ColorPicker.ChannelInput channel="alpha" />
          <ColorPicker.ValueText />
          <ColorPicker.Trigger>
            <ColorPicker.TransparencyGrid />
            <ColorPicker.ValueSwatch />
          </ColorPicker.Trigger>
        </ColorPicker.Control>
        <ColorPicker.Positioner>
          <ColorPicker.Content>
            <ColorPicker.FormatTrigger>Toggle ColorFormat</ColorPicker.FormatTrigger>
            <ColorPicker.FormatSelect />
            <ColorPicker.Area>
              <ColorPicker.AreaBackground />
              <ColorPicker.AreaThumb />
            </ColorPicker.Area>
            <ColorPicker.ChannelSlider channel="hue">
              <ColorPicker.ChannelSliderTrack />
              <ColorPicker.ChannelSliderThumb />
            </ColorPicker.ChannelSlider>
            <ColorPicker.ChannelSlider channel="alpha">
              <ColorPicker.TransparencyGrid />
              <ColorPicker.ChannelSliderTrack />
              <ColorPicker.ChannelSliderThumb />
            </ColorPicker.ChannelSlider>
            <ColorPicker.SwatchGroup>
              <ColorPicker.SwatchTrigger value="red">
                <ColorPicker.Swatch value="red">
                  <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
                </ColorPicker.Swatch>
              </ColorPicker.SwatchTrigger>
              <ColorPicker.SwatchTrigger value="blue">
                <ColorPicker.Swatch value="blue">
                  <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
                </ColorPicker.Swatch>
              </ColorPicker.SwatchTrigger>
              <ColorPicker.SwatchTrigger value="green">
                <ColorPicker.Swatch value="green">
                  <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
                </ColorPicker.Swatch>
              </ColorPicker.SwatchTrigger>
            </ColorPicker.SwatchGroup>
            <ColorPicker.View format="rgba">
              <ColorPicker.ChannelInput channel="hex" />
              <ColorPicker.ChannelInput channel="alpha" />
            </ColorPicker.View>
            <ColorPicker.View format="hsla">
              <ColorPicker.ChannelInput channel="hue" />
              <ColorPicker.ChannelInput channel="saturation" />
              <ColorPicker.ChannelInput channel="lightness" />
            </ColorPicker.View>
            <ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
          </ColorPicker.Content>
        </ColorPicker.Positioner>
        <ColorPicker.HiddenInput />
      </ColorPicker.RootProvider>
    </>
  )
}

```

#### Vue

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

const colorPicker = useColorPicker()
</script>

<template>
  <span>Color: {{ colorPicker.valueAsString }}</span>

  <ColorPicker.RootProvider :value="colorPicker">
    <ColorPicker.Label>Color</ColorPicker.Label>
    <ColorPicker.Control>
      <ColorPicker.ChannelInput channel="hex" />
      <ColorPicker.ChannelInput channel="alpha" />
      <ColorPicker.ValueText />
      <ColorPicker.Trigger>
        <ColorPicker.TransparencyGrid />
        <ColorPicker.ValueSwatch />
      </ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.Positioner>
      <ColorPicker.Content>
        <ColorPicker.FormatTrigger>Toggle ColorFormat</ColorPicker.FormatTrigger>
        <ColorPicker.FormatSelect />
        <ColorPicker.Area>
          <ColorPicker.AreaBackground />
          <ColorPicker.AreaThumb />
        </ColorPicker.Area>
        <ColorPicker.ChannelSlider channel="hue">
          <ColorPicker.ChannelSliderTrack />
          <ColorPicker.ChannelSliderThumb />
        </ColorPicker.ChannelSlider>
        <ColorPicker.ChannelSlider channel="alpha">
          <ColorPicker.TransparencyGrid />
          <ColorPicker.ChannelSliderTrack />
          <ColorPicker.ChannelSliderThumb />
        </ColorPicker.ChannelSlider>
        <ColorPicker.SwatchGroup>
          <ColorPicker.SwatchTrigger value="red">
            <ColorPicker.Swatch value="red">
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
          <ColorPicker.SwatchTrigger value="blue">
            <ColorPicker.Swatch value="blue">
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
          <ColorPicker.SwatchTrigger value="green">
            <ColorPicker.Swatch value="green">
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
        </ColorPicker.SwatchGroup>
        <ColorPicker.View format="rgba">
          <ColorPicker.ChannelInput channel="hex" />
          <ColorPicker.ChannelInput channel="alpha" />
        </ColorPicker.View>
        <ColorPicker.View format="hsla">
          <ColorPicker.ChannelInput channel="hue" />
          <ColorPicker.ChannelInput channel="saturation" />
          <ColorPicker.ChannelInput channel="lightness" />
        </ColorPicker.View>
        <ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
      </ColorPicker.Content>
    </ColorPicker.Positioner>
    <ColorPicker.HiddenInput />
  </ColorPicker.RootProvider>
</template>

```

#### Svelte

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

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

<div>
  <p>External state: {colorPicker().valueAsString}</p>

  <ColorPicker.RootProvider value={colorPicker}>
    <ColorPicker.Label>Color</ColorPicker.Label>
    <ColorPicker.Control>
      <ColorPicker.ValueText />
      <ColorPicker.Trigger>
        <ColorPicker.ValueSwatch />
      </ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.Positioner>
      <ColorPicker.Content>
        <ColorPicker.FormatTrigger>Toggle ColorFormat</ColorPicker.FormatTrigger>
        <ColorPicker.FormatSelect />
        <ColorPicker.Area>
          <ColorPicker.AreaBackground />
          <ColorPicker.AreaThumb />
        </ColorPicker.Area>
        <ColorPicker.ChannelSlider channel="hue">
          <ColorPicker.ChannelSliderTrack />
          <ColorPicker.ChannelSliderThumb />
        </ColorPicker.ChannelSlider>
        <ColorPicker.ChannelSlider channel="alpha">
          <ColorPicker.TransparencyGrid />
          <ColorPicker.ChannelSliderTrack />
          <ColorPicker.ChannelSliderThumb />
        </ColorPicker.ChannelSlider>
        <ColorPicker.SwatchGroup>
          <ColorPicker.SwatchTrigger value="red">
            <ColorPicker.Swatch value="red">
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
          <ColorPicker.SwatchTrigger value="blue">
            <ColorPicker.Swatch value="blue">
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
          <ColorPicker.SwatchTrigger value="green">
            <ColorPicker.Swatch value="green">
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
        </ColorPicker.SwatchGroup>
        <ColorPicker.View format="rgba">
          <ColorPicker.ChannelInput channel="hex" />
          <ColorPicker.ChannelInput channel="alpha" />
        </ColorPicker.View>
        <ColorPicker.View format="hsla">
          <ColorPicker.ChannelInput channel="hue" />
          <ColorPicker.ChannelInput channel="saturation" />
          <ColorPicker.ChannelInput channel="lightness" />
        </ColorPicker.View>
        <ColorPicker.EyeDropperTrigger>Pick color</ColorPicker.EyeDropperTrigger>
      </ColorPicker.Content>
    </ColorPicker.Positioner>
    <ColorPicker.HiddenInput />
  </ColorPicker.RootProvider>
</div>

```

> If you're using the `ColorPicker.RootProvider` component, you don't need to use the `ColorPicker.Root` component.

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


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


**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" |


**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-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. |


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


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


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


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


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


**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" |


**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-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. |


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


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


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


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


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


**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" |


**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-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. |


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


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


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


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


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


**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" |


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


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


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


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


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

These are the properties available when using `ColorPicker.Context`, `useColorPickerContext` hook or `useColorPicker` hook.

**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" />