Skip to content
UI

Color Picker

A component that allows users to select a color from a color palette or input a color value.

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

const props = defineProps<{
  defaultValue?: ReturnType<typeof parseColor>
  lazyMount?: boolean
  unmountOnExit?: boolean
}>()
const value = ref(props.defaultValue ?? parseColor('#eb5e41'))
</script>

<template>
  <ColorPicker.Root v-model="value" :lazy-mount="lazyMount" :unmount-on-exit="unmountOnExit">
    <ColorPicker.Label>Color</ColorPicker.Label>
    <ColorPicker.Control>
      <ColorPicker.ChannelInput channel="hex" />
      <ColorPicker.ChannelInput channel="alpha" />
      <ColorPicker.ValueText />
      <ColorPicker.Trigger data-testid="trigger">
        <ColorPicker.TransparencyGrid />
        <ColorPicker.Context v-slot="colorPicker">
          <ColorPicker.Swatch :value="colorPicker.value" data-testid="swatch-trigger" />
        </ColorPicker.Context>
      </ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.Positioner data-testid="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.ChannelSliderLabel>Alpha</ColorPicker.ChannelSliderLabel>
          <ColorPicker.ChannelSliderValueText />
          <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>

import { useState } from 'react'
import { ColorPicker, parseColor } from '@destyler-ui/react'

interface BasicProps {
  defaultValue?: ReturnType<typeof parseColor>
  lazyMount?: boolean
  unmountOnExit?: boolean
}

export function Basic({ defaultValue, lazyMount, unmountOnExit }: BasicProps = {}) {
  const [value, setValue] = useState(defaultValue ?? parseColor('#eb5e41'))

  return (
    <ColorPicker.Root
      value={value}
      onValueChange={details => setValue(details.value)}
      lazyMount={lazyMount}
      unmountOnExit={unmountOnExit}
    >
      <ColorPicker.Label>Color</ColorPicker.Label>
      <ColorPicker.Control>
        <ColorPicker.ChannelInput channel="hex" />
        <ColorPicker.ChannelInput channel="alpha" />
        <ColorPicker.ValueText />
        <ColorPicker.Trigger data-testid="trigger">
          <ColorPicker.TransparencyGrid />
          <ColorPicker.Context>
            {colorPicker => (
              <ColorPicker.Swatch value={colorPicker.value} data-testid="swatch-trigger" />
            )}
          </ColorPicker.Context>
        </ColorPicker.Trigger>
      </ColorPicker.Control>
      <ColorPicker.Positioner data-testid="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.ChannelSliderLabel>Alpha</ColorPicker.ChannelSliderLabel>
            <ColorPicker.ChannelSliderValueText />
            <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>
  )
}

import { ColorPicker, parseColor } from '@destyler-ui/solid/color-picker'

export function 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>
  )
}

<script module lang="ts">
  import type { ColorPickerRootProps } from '@destyler-ui/svelte'

  export interface BasicProps extends Omit<ColorPickerRootProps, 'value'> {}
</script>

<script lang="ts">
  import { untrack } from 'svelte'
  import { ColorPicker, parseColor } from '@destyler-ui/svelte'

  const { defaultValue, ...props }: BasicProps = $props()
  let value = $state(untrack(() => defaultValue ?? parseColor('#eb5e41')))
</script>

<ColorPicker.Root bind:value {...props}>
  <ColorPicker.Label>Color</ColorPicker.Label>
  <ColorPicker.Control>
    <ColorPicker.ChannelInput channel="hex" />
    <ColorPicker.ChannelInput channel="alpha" />
    <ColorPicker.ValueText />
    <ColorPicker.Trigger data-testid="trigger">
      <ColorPicker.TransparencyGrid />
      <ColorPicker.Context>
        {#snippet render(colorPicker)}
          <ColorPicker.Swatch value={colorPicker().value} data-testid="swatch-trigger" />
        {/snippet}
      </ColorPicker.Context>
    </ColorPicker.Trigger>
  </ColorPicker.Control>
  <ColorPicker.Positioner data-testid="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.ChannelSliderLabel>Alpha</ColorPicker.ChannelSliderLabel>
        <ColorPicker.ChannelSliderValueText />
        <ColorPicker.TransparencyGrid />
        <ColorPicker.ChannelSliderTrack />
        <ColorPicker.ChannelSliderThumb />
      </ColorPicker.ChannelSlider>
      <ColorPicker.SwatchGroup>
        {#each ['red', 'blue', 'green'] as swatch (swatch)}
          <ColorPicker.SwatchTrigger value={swatch}>
            <ColorPicker.Swatch value={swatch}>
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
        {/each}
      </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>

Anatomy

Section titled “Anatomy”
<script setup lang="ts">
import { ColorPicker } from '@destyler-ui/vue'
</script>


<template>
  <ColorPicker.Root>
    <ColorPicker.Label />
    <ColorPicker.Control>
      <ColorPicker.ChannelInput />
      <ColorPicker.ValueText />
      <ColorPicker.ValueSwatch />
      <ColorPicker.Trigger />
    </ColorPicker.Control>
    <ColorPicker.Positioner>
      <ColorPicker.Content>
        <ColorPicker.Area>
          <ColorPicker.AreaBackground />
          <ColorPicker.AreaThumb />
        </ColorPicker.Area>
        <ColorPicker.ChannelSlider>
          <ColorPicker.ChannelSliderTrack />
          <ColorPicker.ChannelSliderThumb />
        </ColorPicker.ChannelSlider>
        <ColorPicker.SwatchGroup>
          <ColorPicker.SwatchTrigger>
            <ColorPicker.Swatch />
          </ColorPicker.SwatchTrigger>
        </ColorPicker.SwatchGroup>
      </ColorPicker.Content>
    </ColorPicker.Positioner>
    <ColorPicker.HiddenInput />
  </ColorPicker.Root>
</template>
import { ColorPicker } from '@destyler-ui/react'


export default function Basic() {
  return (
    <ColorPicker.Root>
      <ColorPicker.Label />
      <ColorPicker.Control>
        <ColorPicker.ChannelInput />
        <ColorPicker.ValueText />
        <ColorPicker.ValueSwatch />
        <ColorPicker.Trigger />
      </ColorPicker.Control>
      <ColorPicker.Positioner>
        <ColorPicker.Content>
          <ColorPicker.Area>
            <ColorPicker.AreaBackground />
            <ColorPicker.AreaThumb />
          </ColorPicker.Area>
          <ColorPicker.ChannelSlider>
            <ColorPicker.ChannelSliderTrack />
            <ColorPicker.ChannelSliderThumb />
          </ColorPicker.ChannelSlider>
          <ColorPicker.SwatchGroup>
            <ColorPicker.SwatchTrigger>
              <ColorPicker.Swatch />
            </ColorPicker.SwatchTrigger>
          </ColorPicker.SwatchGroup>
        </ColorPicker.Content>
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
  )
}
import { ColorPicker, parseColor } from '@destyler-ui/solid'


export default function Basic() {
  return (
    <ColorPicker.Root defaultValue={parseColor('#eb5e41')}>
      <ColorPicker.Label>Color</ColorPicker.Label>
      <ColorPicker.Control>
        <ColorPicker.ChannelInput channel="hex" />
        <ColorPicker.ValueText />
        <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.SwatchGroup>
            <ColorPicker.SwatchTrigger value="red">
              <ColorPicker.Swatch value="red" />
            </ColorPicker.SwatchTrigger>
          </ColorPicker.SwatchGroup>
        </ColorPicker.Content>
      </ColorPicker.Positioner>
      <ColorPicker.HiddenInput />
    </ColorPicker.Root>
  )
}
<script lang="ts">
  import { ColorPicker, parseColor } from '@destyler-ui/svelte'


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


<ColorPicker.Root bind:value>
  <ColorPicker.Label>Color</ColorPicker.Label>
  <ColorPicker.Control>
    <ColorPicker.ChannelInput channel="hex" />
    <ColorPicker.ChannelInput channel="alpha" />
    <ColorPicker.ValueText />
    <ColorPicker.Trigger>
      <ColorPicker.TransparencyGrid />
      <ColorPicker.Context>
        {#snippet render(api)}
          <ColorPicker.Swatch value={api().value} />
        {/snippet}
      </ColorPicker.Context>
    </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.SwatchGroup>
        {#each ['red', 'blue', 'green'] as swatch (swatch)}
          <ColorPicker.SwatchTrigger value={swatch}>
            <ColorPicker.Swatch value={swatch}>
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
        {/each}
      </ColorPicker.SwatchGroup>
    </ColorPicker.Content>
  </ColorPicker.Positioner>
  <ColorPicker.HiddenInput />
</ColorPicker.Root>

Examples

Section titled “Examples”

Basic

Section titled “Basic”
<script setup lang="ts">
import { ref } from 'vue'
import { parseColor, ColorPicker } from '@destyler-ui/vue'

const props = defineProps<{
  defaultValue?: ReturnType<typeof parseColor>
  lazyMount?: boolean
  unmountOnExit?: boolean
}>()
const value = ref(props.defaultValue ?? parseColor('#eb5e41'))
</script>

<template>
  <ColorPicker.Root v-model="value" :lazy-mount="lazyMount" :unmount-on-exit="unmountOnExit">
    <ColorPicker.Label>Color</ColorPicker.Label>
    <ColorPicker.Control>
      <ColorPicker.ChannelInput channel="hex" />
      <ColorPicker.ChannelInput channel="alpha" />
      <ColorPicker.ValueText />
      <ColorPicker.Trigger data-testid="trigger">
        <ColorPicker.TransparencyGrid />
        <ColorPicker.Context v-slot="colorPicker">
          <ColorPicker.Swatch :value="colorPicker.value" data-testid="swatch-trigger" />
        </ColorPicker.Context>
      </ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.Positioner data-testid="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.ChannelSliderLabel>Alpha</ColorPicker.ChannelSliderLabel>
          <ColorPicker.ChannelSliderValueText />
          <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>

import { useState } from 'react'
import { ColorPicker, parseColor } from '@destyler-ui/react'

interface BasicProps {
  defaultValue?: ReturnType<typeof parseColor>
  lazyMount?: boolean
  unmountOnExit?: boolean
}

export function Basic({ defaultValue, lazyMount, unmountOnExit }: BasicProps = {}) {
  const [value, setValue] = useState(defaultValue ?? parseColor('#eb5e41'))

  return (
    <ColorPicker.Root
      value={value}
      onValueChange={details => setValue(details.value)}
      lazyMount={lazyMount}
      unmountOnExit={unmountOnExit}
    >
      <ColorPicker.Label>Color</ColorPicker.Label>
      <ColorPicker.Control>
        <ColorPicker.ChannelInput channel="hex" />
        <ColorPicker.ChannelInput channel="alpha" />
        <ColorPicker.ValueText />
        <ColorPicker.Trigger data-testid="trigger">
          <ColorPicker.TransparencyGrid />
          <ColorPicker.Context>
            {colorPicker => (
              <ColorPicker.Swatch value={colorPicker.value} data-testid="swatch-trigger" />
            )}
          </ColorPicker.Context>
        </ColorPicker.Trigger>
      </ColorPicker.Control>
      <ColorPicker.Positioner data-testid="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.ChannelSliderLabel>Alpha</ColorPicker.ChannelSliderLabel>
            <ColorPicker.ChannelSliderValueText />
            <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>
  )
}

import { ColorPicker, parseColor } from '@destyler-ui/solid/color-picker'

export function 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>
  )
}

<script module lang="ts">
  import type { ColorPickerRootProps } from '@destyler-ui/svelte'

  export interface BasicProps extends Omit<ColorPickerRootProps, 'value'> {}
</script>

<script lang="ts">
  import { untrack } from 'svelte'
  import { ColorPicker, parseColor } from '@destyler-ui/svelte'

  const { defaultValue, ...props }: BasicProps = $props()
  let value = $state(untrack(() => defaultValue ?? parseColor('#eb5e41')))
</script>

<ColorPicker.Root bind:value {...props}>
  <ColorPicker.Label>Color</ColorPicker.Label>
  <ColorPicker.Control>
    <ColorPicker.ChannelInput channel="hex" />
    <ColorPicker.ChannelInput channel="alpha" />
    <ColorPicker.ValueText />
    <ColorPicker.Trigger data-testid="trigger">
      <ColorPicker.TransparencyGrid />
      <ColorPicker.Context>
        {#snippet render(colorPicker)}
          <ColorPicker.Swatch value={colorPicker().value} data-testid="swatch-trigger" />
        {/snippet}
      </ColorPicker.Context>
    </ColorPicker.Trigger>
  </ColorPicker.Control>
  <ColorPicker.Positioner data-testid="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.ChannelSliderLabel>Alpha</ColorPicker.ChannelSliderLabel>
        <ColorPicker.ChannelSliderValueText />
        <ColorPicker.TransparencyGrid />
        <ColorPicker.ChannelSliderTrack />
        <ColorPicker.ChannelSliderThumb />
      </ColorPicker.ChannelSlider>
      <ColorPicker.SwatchGroup>
        {#each ['red', 'blue', 'green'] as swatch (swatch)}
          <ColorPicker.SwatchTrigger value={swatch}>
            <ColorPicker.Swatch value={swatch}>
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
        {/each}
      </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

Section titled “Controlled”

Control the selected color value programmatically.

<script setup lang="ts">
import { ColorPicker, parseColor } from '@destyler-ui/vue'
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>

import { useState } from 'react'
import { ColorPicker, parseColor } from '@destyler-ui/react'

export function Controlled() {
  const [value, setValue] = useState(parseColor('hsl(20, 100%, 50%)'))

  return (
    <ColorPicker.Root format="hsla" value={value} onValueChange={details => setValue(details.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>
  )
}

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

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

  return (
    <ColorPicker.Root
      value={color()}
      onValueChange={e => setColor(e.value)}
      onValueChangeEnd={e => console.warn(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>
  )
}

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

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

<ColorPicker.Root format="hsla" bind: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>
        {#each ['red', 'blue', 'green'] as swatch (swatch)}
          <ColorPicker.SwatchTrigger value={swatch}>
            <ColorPicker.Swatch value={swatch}>
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
        {/each}
      </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>

Initial Value

Section titled “Initial Value”

Seed an initial color with defaultValue.

<script setup lang="ts">
import { ColorPicker, parseColor } from '@destyler-ui/vue'
</script>

<template>
  <ColorPicker.Root format="hsla" :default-value="parseColor('hsl(210, 100%, 50%)')">
    <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.Content>
    </ColorPicker.Positioner>
  </ColorPicker.Root>
</template>

import { ColorPicker, parseColor } from '@destyler-ui/react'

export function InitialValue() {
  return (
    <ColorPicker.Root defaultValue={parseColor('#3b82f6')}>
      <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>
  )
}

import { ColorPicker, parseColor } from '@destyler-ui/solid/color-picker'

export function InitialValue() {
  return (
    <ColorPicker.Root defaultValue={parseColor('#3b82f6')}>
      <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>
  )
}

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

<ColorPicker.Root defaultValue={parseColor('#3b82f6')}>
  <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.Content>
  </ColorPicker.Positioner>
</ColorPicker.Root>

With Field

Section titled “With Field”

Combine color picker with a form field for validation and labeling.

<script setup lang="ts">
import { parseColor, ColorPicker } from '@destyler-ui/vue'
import { Field } from '@destyler-ui/vue'

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

<template>
  <Field.Root>
    <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>

import { Field } from '@destyler-ui/react'
import { ColorPicker, parseColor } from '@destyler-ui/react'

interface WithFieldProps {
  required?: boolean
  disabled?: boolean
  readOnly?: boolean
  invalid?: boolean
}

export function WithField({ required, disabled, readOnly, invalid }: WithFieldProps = {}) {
  return (
    <Field.Root invalid={invalid}>
      <ColorPicker.Root defaultValue={parseColor('hsl(20, 100%, 50%)')} disabled={disabled} readOnly={readOnly}>
        <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 required={required} />
      </ColorPicker.Root>
      <Field.HelperText>Additional Info</Field.HelperText>
      <Field.ErrorText>Error Info</Field.ErrorText>
    </Field.Root>
  )
}

import { ColorPicker, parseColor } from '@destyler-ui/solid/color-picker'
import { Field } from '@destyler-ui/solid/field'

export function WithField(props: Field.RootProps) {
  return (
    <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>
  )
}

<script module lang="ts">
  export interface WithFieldProps {
    required?: boolean
    disabled?: boolean
    readOnly?: boolean
    invalid?: boolean
  }
</script>

<script lang="ts">
  import { Field } from '@destyler-ui/svelte'
  import { ColorPicker, parseColor } from '@destyler-ui/svelte'

  const { required, disabled, readOnly, invalid }: WithFieldProps = $props()
  const defaultValue = parseColor('hsl(20, 100%, 50%)')
</script>

<Field.Root {invalid}>
  <ColorPicker.Root {defaultValue} {disabled} {readOnly}>
    <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 {required} />
  </ColorPicker.Root>
  <Field.HelperText>Additional Info</Field.HelperText>
  <Field.ErrorText>Error Info</Field.ErrorText>
</Field.Root>

Root Provider

Section titled “Root Provider”
<script setup lang="ts">
import { ColorPicker, useColorPicker } from '@destyler-ui/vue'

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>

import { ColorPicker, useColorPicker } from '@destyler-ui/react'

export function RootProvider() {
  const colorPicker = useColorPicker()

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

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

export function 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>
    </>
  )
}

<script lang="ts">
  import { ColorPicker, useColorPicker } from '@destyler-ui/svelte'

  const id = $props.id()
  const colorPicker = useColorPicker({ id })
</script>

<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>
        {#each ['red', 'blue', 'green'] as swatch (swatch)}
          <ColorPicker.SwatchTrigger value={swatch}>
            <ColorPicker.Swatch value={swatch}>
              <ColorPicker.SwatchIndicator>✓</ColorPicker.SwatchIndicator>
            </ColorPicker.Swatch>
          </ColorPicker.SwatchTrigger>
        {/each}
      </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>

API Reference

Section titled “API Reference”

Root

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

closeOnSelectfalsefalse | true

Whether to close the color picker when a swatch is selected

defaultOpen—false | true

The initial open state of the color picker.

defaultValue—colorPicker.Color

The initial value of the color picker when it is first rendered. Use when you do not need to control the state of the color picker.

disabled—false | true

Whether the color picker is disabled

format"rgba""rgba" | "hsla" | "hsba"

The color format to use

id—string

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: colorPicker.ColorChannel) => string; channelSliderThumb: (id: colorPicker.ColorChannel) => string; }>

The ids of the elements in the color picker. Useful for composition.

initialFocusEl—() => HTMLElement | null

The initial focus element when the color picker is opened.

invalid—false | true

Whether the color picker is invalid

lazyMountfalsefalse | true

Whether to enable lazy mounting

modelValue—colorPicker.Color

The v-model value of the color picker

name—string

The name for the form input

open—false | true

Whether the color picker is open

openAutoFocustruefalse | true

Whether to auto focus the color picker when it is opened

positioning—calendar.PositioningOptions

The positioning options for the color picker

readOnly—false | true

Whether the color picker is read-only

required—false | true

Whether the color picker is required

unmountOnExitfalsefalse | true

Whether to unmount on exit.

EmitEvent
focusOutside[event: FocusOutsideEvent]

Function called when the focus is moved outside the component

formatChange[details: FormatChangeDetails]

Function called when the color format changes

interactOutside[event: InteractOutsideEvent]

Function called when an interaction happens outside the component

openChange[details: OpenChangeDetails]

Handler that is called when the user opens or closes the color picker.

pointerDownOutside[event: PointerDownOutsideEvent]

Function called when the pointer is pressed down outside the component

update:modelValue[value: Color]

The callback fired when the model value changes.

update:open[open: boolean]
valueChange[details: ValueChangeDetails]

Handler that is called when the value changes, as the user drags.

valueChangeEnd[details: ValueChangeDetails]

Handler that is called when the user stops dragging.

Area

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

xChannel—"hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha"
yChannel—"hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha"

AreaBackground

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

AreaThumb

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

ChannelInput

PropDefaultType
channel*—ExtendedColorChannel
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

orientation—"horizontal" | "vertical"

ChannelSlider

PropDefaultType
channel*—ColorChannel
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

orientation—"horizontal" | "vertical"

ChannelSliderLabel

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

ChannelSliderThumb

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

ChannelSliderTrack

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

ChannelSliderValueText

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Content

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

immediate—false | true

Whether to synchronize the present change immediately or defer it to the next frame

lazyMountfalsefalse | true

Whether to enable lazy mounting

present—false | true

Whether the node is present (controlled by the user)

unmountOnExitfalsefalse | true

Whether to unmount on exit.

Context

No serializable props or emits are declared for this part.

Control

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

EyeDropperTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

FormatSelect

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

FormatTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

HiddenInput

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Label

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

PropDefaultType
value*—MachineApi<PropTypes>
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

lazyMountfalsefalse | true

Whether to enable lazy mounting

unmountOnExitfalsefalse | true

Whether to unmount on exit.

Swatch

PropDefaultType
value*—string | Color

The color value

asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

respectAlpha—false | true

Whether to include the alpha channel in the color

SwatchGroup

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

SwatchIndicator

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

SwatchTrigger

PropDefaultType
value*—string | Color

The color value

asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

disabled—false | true

Whether the swatch trigger is disabled

TransparencyGrid

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

size—string

Trigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

ValueSwatch

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

respectAlpha—false | true

Whether to include the alpha channel in the color

ValueText

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

View

PropDefaultType
format*—ColorFormat
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Root

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

closeOnSelectfalsefalse | true

Whether to close the color picker when a swatch is selected

defaultOpen—false | true

The initial open state of the color picker when it is first rendered. Use when you do not need to control its open state.

defaultValue—colorPicker.Color

The initial value of the color picker when it is first rendered. Use when you do not need to control the state of the color picker.

disabled—false | true

Whether the color picker is disabled

format"rgba""rgba" | "hsla" | "hsba"

The color format to use

id—string

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: colorPicker.ColorChannel) => string; channelSliderThumb: (id: colorPicker.ColorChannel) => string; }>

The ids of the elements in the color picker. Useful for composition.

immediate—false | true

Whether to synchronize the present change immediately or defer it to the next frame

initialFocusEl—() => HTMLElement | null

The initial focus element when the color picker is opened.

invalid—false | true

Whether the color picker is invalid

lazyMountfalsefalse | true

Whether to enable lazy mounting

name—string

The name for the form input

onExitComplete—() => void

Function called when the animation ends in the closed state

onFocusOutside—(event: calendar.FocusOutsideEvent) => void

Function called when the focus is moved outside the component

onFormatChange—(details: colorPicker.FormatChangeDetails) => void

Function called when the color format changes

onInteractOutside—(event: calendar.InteractOutsideEvent) => void

Function called when an interaction happens outside the component

onOpenChange—(details: colorPicker.OpenChangeDetails) => void

Handler that is called when the user opens or closes the color picker.

onPointerDownOutside—(event: calendar.PointerDownOutsideEvent) => void

Function called when the pointer is pressed down outside the component

onValueChange—(details: colorPicker.ValueChangeDetails) => void

Handler that is called when the value changes, as the user drags.

onValueChangeEnd—(details: colorPicker.ValueChangeDetails) => void

Handler that is called when the user stops dragging.

open—false | true

Whether the color picker is open

openAutoFocustruefalse | true

Whether to auto focus the color picker when it is opened

positioning—calendar.PositioningOptions

The positioning options for the color picker

present—false | true

Whether the node is present (controlled by the user)

readOnly—false | true

Whether the color picker is read-only

required—false | true

Whether the color picker is required

unmountOnExitfalsefalse | true

Whether to unmount on exit.

value#000000colorPicker.Color

The controlled color value

Area

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

xChannel—"hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha"
yChannel—"hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha"

AreaBackground

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

AreaThumb

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

ChannelInput

PropDefaultType
channel*—ExtendedColorChannel
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

orientation—"horizontal" | "vertical"

ChannelSlider

PropDefaultType
channel*—ColorChannel
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

orientation—"horizontal" | "vertical"

ChannelSliderLabel

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

ChannelSliderThumb

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

ChannelSliderTrack

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

ChannelSliderValueText

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Content

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Context

PropDefaultType
children*—(context: UseColorPickerContext) => ReactNode

Control

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

EyeDropperTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

FormatSelect

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

FormatTrigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

HiddenInput

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Label

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

PropDefaultType
value*—UseColorPickerReturn
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

immediate—false | true

Whether to synchronize the present change immediately or defer it to the next frame

lazyMountfalsefalse | true

Whether to enable lazy mounting

onExitComplete—() => void

Function called when the animation ends in the closed state

present—false | true

Whether the node is present (controlled by the user)

unmountOnExitfalsefalse | true

Whether to unmount on exit.

Swatch

PropDefaultType
value*—string | Color

The color value

asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

respectAlpha—false | true

Whether to include the alpha channel in the color

SwatchGroup

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

SwatchIndicator

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

SwatchTrigger

PropDefaultType
value*—string | Color

The color value

asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

disabled—false | true

Whether the swatch trigger is disabled

TransparencyGrid

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

size—string

Trigger

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

ValueSwatch

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

respectAlpha—false | true

Whether to include the alpha channel in the color

ValueText

PropDefaultType
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

View

PropDefaultType
format*—ColorFormat
asChild—false | true

Use the provided child element as the default rendered element, combining their props and behavior.

Root

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

closeOnSelectfalsefalse | true

Whether to close the color picker when a swatch is selected

defaultOpen—false | true

The initial open state of the color picker when it is first rendered. Use when you do not need to control its open state.

defaultValue—colorPicker.Color

The initial value of the color picker when it is first rendered. Use when you do not need to control the state of the color picker.

disabled—false | true

Whether the color picker is disabled

format"rgba""rgba" | "hsla" | "hsba"

The 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: colorPicker.ColorChannel) => string; channelSliderThumb: (id: colorPicker.ColorChannel) => string; }>

The ids of the elements in the color picker. Useful for composition.

immediate—false | true

Whether to synchronize the present change immediately or defer it to the next frame

initialFocusEl—() => HTMLElement | null

The initial focus element when the color picker is opened.

invalid—false | true

Whether the color picker is invalid

lazyMountfalsefalse | true

Whether to enable lazy mounting

name—string

The name for the form input

onExitComplete—() => void

Function called when the animation ends in the closed state

onFocusOutside—(event: colorPicker.FocusOutsideEvent) => void

Function called when the focus is moved outside the component

onFormatChange—(details: FormatChangeDetails) => void

Function called when the color format changes

onInteractOutside—(event: colorPicker.InteractOutsideEvent) => void

Function called when an interaction happens outside the component

onOpenChange—(details: OpenChangeDetails) => void

Handler that is called when the user opens or closes the color picker.

onPointerDownOutside—(event: colorPicker.PointerDownOutsideEvent) => void

Function called when the pointer is pressed down outside the component

onValueChange—(details: ValueChangeDetails) => void

Handler that is called when the value changes, as the user drags.

onValueChangeEnd—(details: ValueChangeDetails) => void

Handler that is called when the user stops dragging.

open—false | true

Whether the color picker is open

openAutoFocustruefalse | true

Whether to auto focus the color picker when it is opened

positioning—colorPicker.PositioningOptions

The positioning options for the color picker

present—false | true

Whether the node is present (controlled by the user)

readOnly—false | true

Whether the color picker is read-only

required—false | true

Whether the color picker is required

unmountOnExitfalsefalse | true

Whether to unmount on exit.

value#000000colorPicker.Color

The controlled color value

Area

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

xChannel—"hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha"
yChannel—"hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha"

AreaBackground

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

AreaThumb

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

ChannelInput

PropDefaultType
channel*—ExtendedColorChannel
asChild—(props: (userProps?: JSX.InputHTMLAttributes<HTMLInputElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

orientation—"horizontal" | "vertical"

ChannelSlider

PropDefaultType
channel*—ColorChannel
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

orientation—"horizontal" | "vertical"

ChannelSliderLabel

PropDefaultType
asChild—(props: (userProps?: JSX.LabelHTMLAttributes<HTMLLabelElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

ChannelSliderThumb

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

ChannelSliderTrack

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

ChannelSliderValueText

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLSpanElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

Content

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

Context

PropDefaultType
children*—(context: UseColorPickerContext) => Element

Control

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

EyeDropperTrigger

PropDefaultType
asChild—(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

FormatSelect

PropDefaultType
asChild—(props: (userProps?: JSX.SelectHTMLAttributes<HTMLSelectElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

FormatTrigger

PropDefaultType
asChild—(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

HiddenInput

PropDefaultType
asChild—(props: (userProps?: JSX.InputHTMLAttributes<HTMLInputElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

Label

PropDefaultType
asChild—(props: (userProps?: JSX.LabelHTMLAttributes<HTMLLabelElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

PropDefaultType
value*—UseColorPickerReturn
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

immediate—false | true

Whether to synchronize the present change immediately or defer it to the next frame

lazyMountfalsefalse | true

Whether to enable lazy mounting

onExitComplete—() => void

Function called when the animation ends in the closed state

present—false | true

Whether the node is present (controlled by the user)

unmountOnExitfalsefalse | true

Whether to unmount on exit.

Swatch

PropDefaultType
value*—string | Color

The color value

asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

respectAlpha—false | true

Whether to include the alpha channel in the color

SwatchGroup

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

SwatchIndicator

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

SwatchTrigger

PropDefaultType
value*—string | Color

The color value

asChild—(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

disabled—false | true

Whether the swatch trigger is disabled

TransparencyGrid

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

size—string

Trigger

PropDefaultType
asChild—(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

ValueSwatch

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

respectAlpha—false | true

Whether to include the alpha channel in the color

ValueText

PropDefaultType
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLSpanElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

View

PropDefaultType
format*—ColorFormat
asChild—(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element

Use the provided child element as the default rendered element, combining their props and behavior.

Root

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined
closeOnSelectfalsefalse | true

Whether to close the color picker when a swatch is selected

defaultOpen—false | true

The initial open state of the color picker when it is not controlled. Prefer this over seeding with `open` for uncontrolled usage.

defaultValue—import("@destyler/color-picker").Color

The initial color value when it is not controlled. Prefer this over seeding with `value` for uncontrolled usage.

disabled—false | true

Whether the color picker is disabled

format"rgba""rgba" | "hsla" | "hsba"

The color format to use

id—string
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: import("@destyler/color-picker").ColorChannel) => string; channelSliderThumb: (id: import("@destyler/color-picker").ColorChannel) => string; }>

The ids of the elements in the color picker. Useful for composition.

immediate—false | true

Whether to synchronize the present change immediately or defer it to the next frame

initialFocusEl—() => HTMLElement | null

The initial focus element when the color picker is opened.

invalid—false | true

Whether the color picker is invalid

lazyMountfalsefalse | true

Whether to enable lazy mounting

name—string

The name for the form input

onExitComplete—() => void

Function called when the animation ends in the closed state

onFocusOutside—(event: import("@destyler/calendar").FocusOutsideEvent) => void

Function called when the focus is moved outside the component

onFormatChange—(details: import("@destyler/color-picker").FormatChangeDetails) => void

Function called when the color format changes

onInteractOutside—(event: import("@destyler/calendar").InteractOutsideEvent) => void

Function called when an interaction happens outside the component

onOpenChange—(details: import("@destyler/color-picker").OpenChangeDetails) => void

Handler that is called when the user opens or closes the color picker.

onPointerDownOutside—(event: import("@destyler/calendar").PointerDownOutsideEvent) => void

Function called when the pointer is pressed down outside the component

onValueChange—(details: import("@destyler/color-picker").ValueChangeDetails) => void

Handler that is called when the value changes, as the user drags.

onValueChangeEnd—(details: import("@destyler/color-picker").ValueChangeDetails) => void

Handler that is called when the user stops dragging.

open—false | true

Whether the color picker is open

openAutoFocustruefalse | true

Whether to auto focus the color picker when it is opened

positioning—import("@destyler/calendar").PositioningOptions

The positioning options for the color picker

present—false | true

Whether the node is present (controlled by the user)

readOnly—false | true

Whether the color picker is read-only

required—false | true

Whether the color picker is required

skipAnimationOnMountfalsefalse | true

Whether to allow the initial presence animation.

unmountOnExitfalsefalse | true

Whether to unmount on exit.

value#000000import("@destyler/color-picker").Color

The controlled color value

Area

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined
xChannel—"hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha"
yChannel—"hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha"

AreaBackground

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined

AreaThumb

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined

ChannelInput

PropDefaultType
channel*—ExtendedColorChannel
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"input">]>
children—Snippet<[]> | undefined
orientation—"horizontal" | "vertical"

ChannelPropsProvider

No serializable props or emits are declared for this part.

ChannelSlider

PropDefaultType
channel*—ColorChannel
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined
orientation—"horizontal" | "vertical"

ChannelSliderLabel

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"label">]>
children—Snippet<[]> | undefined

ChannelSliderThumb

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined

ChannelSliderTrack

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined

ChannelSliderValueText

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"span">]>
children—Snippet<[]> | undefined

Content

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined

Context

PropDefaultType
render*—Snippet<[UseColorPickerContext]>

Control

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined

EyeDropperTrigger

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>
children—Snippet<[]> | undefined

FormatSelect

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"select">]>
children—Snippet<[]> | undefined

FormatTrigger

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>
children—Snippet<[]> | undefined

HiddenInput

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"input">]>
children—Snippet<[]> | undefined

Label

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"label">]>
children—Snippet<[]> | undefined

Positioner

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined

Provider

No serializable props or emits are declared for this part.

RootProvider

PropDefaultType
value*—UseColorPickerReturn
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined
immediate—false | true

Whether to synchronize the present change immediately or defer it to the next frame

lazyMountfalsefalse | true

Whether to enable lazy mounting

onExitComplete—() => void

Function called when the animation ends in the closed state

present—false | true

Whether the node is present (controlled by the user)

skipAnimationOnMountfalsefalse | true

Whether to allow the initial presence animation.

unmountOnExitfalsefalse | true

Whether to unmount on exit.

Swatch

PropDefaultType
value*—string | Color

The color value

asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined
respectAlpha—false | true

Whether to include the alpha channel in the color

SwatchGroup

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined

SwatchIndicator

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined

SwatchPropsProvider

No serializable props or emits are declared for this part.

SwatchTrigger

PropDefaultType
value*—string | Color

The color value

asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>
children—Snippet<[]> | undefined
disabled—false | true

Whether the swatch trigger is disabled

TransparencyGrid

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined
size—string

Trigger

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>
children—Snippet<[]> | undefined

ValueSwatch

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined
respectAlpha—false | true

Whether to include the alpha channel in the color

ValueText

PropDefaultType
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"span">]>
children—Snippet<[]> | undefined
format—"hex" | "css" | "rgba" | "hsla" | "hsba" | "hexa" | "rgb" | "hsl" | "hsb"

View

PropDefaultType
format*—ColorFormat
asChild—import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>
children—Snippet<[]> | undefined