useColorPicker

Color Picker

Click the button below to pick a color from anywhere on your screen.

#fff

Not Supported

EyeDropper API not supported in this browser.

Installation

Return

Property	Type	Description
`color`	`string`	The selected color in HEX format.
`error`	`Error \| null`	Error that occurred while trying to pick a color, if any.
`isSupported`	`() => boolean`	Function that returns whether the EyeDropper API is supported in the browser.
`pickColor`	`() => void`	Function to open the color picker.

Usage example

'use client';
import { useColorPicker } from '@/registry/hooks/use-eye-dropper';
 
const { color, error, isSupported, pickColor } = useColorPicker();
 
return (
  <>
    <div style={{ background: color, padding: 64 }}>Selected color</div>
    {isSupported() ? (
      <button onClick={pickColor}>Pick color</button>
    ) : (
      <span>EyeDropper API is not supported in this browser</span>
    )}
    {error && <div style={{ color: 'red' }}>{error.message}</div>}
  </>
);

Notes

Uses the EyeDropper API available in Chromium-based browsers.
Only works on the client side.
If the API is not supported, isSupported() returns false and pickColor does nothing.
User interaction (e.g., clicking a button) is required to open the color picker.

Tips

Ideal for design tools, image editors, or any app that needs to capture colors from the screen.
Handle errors to account for user cancellations or interruptions during color selection.