Collect Colors with the Eyedropper

ProNew

Pick colors from anywhere on the screen into a palette of up to eight swatches, remove any, copy them all as a list or CSS variables, and where the browser has no EyeDropper a hex field offers the same list. Use this when people gather colors from designs or other pages.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

max8

Guide and examples

When to use it

People sample colors from screenshots, websites or designs while working.

Do not use it when: For extracting colors from an uploaded file, use the image palette pattern.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`max`	`number`	`8`	Most colors.
`onChange`	`(colors: string[]) => void`	-	The collected hex values.

Accessibility

The EyeDropper API is a progressive enhancement: where it is missing, the button is hidden and the typed field does the same job, so nobody is blocked.
Swatches are buttons named by their value ("Copy #123456") with a separate Remove button; every action (added, duplicate, full, copied, invalid) is a sentence in a polite status.
Copy list and Copy as CSS variables are disabled when there is nothing to copy.

Testing

The pattern ships with a Testing Library test (eyedropper-palette-collector.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.