1---
2category: Browser
3---
4 
5# useEyeDropper
6 
7Reactive [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API)
8 
9## Usage
10 
11```ts
12import { useEyeDropper } from '@vueuse/core'
13 
14const { isSupported, open, sRGBHex } = useEyeDropper()
15```
16 
17## Component Usage
18 
19```vue
20<template>
21  <UseEyeDropper v-slot="{ isSupported, sRGBHex, open }">
22    <button :disabled="!isSupported" @click="() => open()">
23      sRGBHex: {{ sRGBHex }}
24    </button>
25  </UseEyeDropper>
26</template>
27```
28 
29## Type Declarations
30 
31```ts
32export interface EyeDropperOpenOptions {
33  /**
34   * @see https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal
35   */
36  signal?: AbortSignal
37}
38export interface EyeDropper {
39  new (): EyeDropper
40  open: (options?: EyeDropperOpenOptions) => Promise<{
41    sRGBHex: string
42  }>
43  [Symbol.toStringTag]: "EyeDropper"
44}
45export interface UseEyeDropperOptions {
46  /**
47   * Initial sRGBHex.
48   *
49   * @default ''
50   */
51  initialValue?: string
52}
53export interface UseEyeDropperReturn extends Supportable {
54  sRGBHex: ShallowRef<string>
55  open: (openOptions?: EyeDropperOpenOptions) => Promise<
56    | {
57        sRGBHex: string
58      }
59    | undefined
60  >
61}
62/**
63 * Reactive [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper_API)
64 *
65 * @see https://vueuse.org/useEyeDropper
66 *
67 * @__NO_SIDE_EFFECTS__
68 */
69export declare function useEyeDropper(
70  options?: UseEyeDropperOptions,
71): UseEyeDropperReturn
72```
73