---
title: useEyeDropper
description: "`useEyeDropper` is a custom hook that opens the eye dropper tool and returns the color value."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/hooks/use-eye-dropper
---

```tsx
const { supported, onOpen } = useEyeDropper()
const [color, setColor] = useState("#FF0000")

const onClick = async () => {
  const result = await onOpen()

  if (result) setColor(result.sRGBHex)
}

return (
  <VStack alignItems="flex-start">
    <HStack gap="sm">
      <ColorSwatch color={color} />
      <Text>{color}</Text>
    </HStack>

    <VStack alignItems="flex-start" gap="sm">
      <Button onClick={onClick} disabled={!supported}>
        Pick Color
      </Button>

      <Show when={!supported}>
        <Text fontSize="sm" color="fg.muted">
          EyeDropper API is not supported in this browser.
        </Text>
      </Show>
    </VStack>
  </VStack>
)
```

## Usage

```tsx
import { useEyeDropper } from "@yamada-ui/react"
```

```tsx
import { useEyeDropper } from "@/components/ui"
```

```tsx
import { useEyeDropper } from "@workspaces/ui"
```

```tsx
const { supported, onOpen } = useEyeDropper()
```

## Used By Components & Hooks

<UsedBy name="use-eye-dropper" />