Extract a Palette from an Image

ProNew

Choose a photo or logo and get its dominant colors (median cut), with each swatch's share of the picture, its hex, a click to copy and the best text color. Everything runs in the browser. Use this when a brand or theme should start from an image.

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.

count6

Guide and examples

When to use it

People pick colors from a logo, product photo or mood image.

Do not use it when: Photos with gradients give muddy averages; use the eyedropper to pick exact colors instead.

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
`count`	`number`	`6`	Colors to extract.
`read`	`(file) => Promise<Uint8ClampedArray \| number[]>`	canvas	RGBA pixels of a small copy of the image.
`onPalette`	`(colors: string[]) => void`	-	The hex values, most common first.

extractPalette(rgba, count) is exported.

Accessibility

The result is a labelled region with a list of buttons; each name has the value and the share ("Copy #1f2937, 38 percent of the image"), the text on the swatch is black or white by luminance, and a status line says how many colors were found or which was copied.
The image never leaves the device: it is scaled to 64 pixels and read on a canvas.
Failures are an alert with a suggestion; the picker is a normal button.

Testing

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

Guide and examples

When to use it

People pick colors from a logo, product photo or mood image.

Do not use it when: Photos with gradients give muddy averages; use the eyedropper to pick exact colors instead.

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
`count`	`number`	`6`	Colors to extract.
`read`	`(file) => Promise<Uint8ClampedArray \| number[]>`	canvas	RGBA pixels of a small copy of the image.
`onPalette`	`(colors: string[]) => void`	-	The hex values, most common first.

extractPalette(rgba, count) is exported.

Accessibility

The result is a labelled region with a list of buttons; each name has the value and the share ("Copy #1f2937, 38 percent of the image"), the text on the swatch is black or white by luminance, and a status line says how many colors were found or which was copied.
The image never leaves the device: it is scaled to 64 pixels and read on a canvas.
Failures are an alert with a suggestion; the picker is a normal button.

Testing

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