Palette extractPro

Pull a palette from an image, see where each color lives, preview a palette shift swatch by swatch, lock the colors that must stay and request the shift.

Markdown

On this page

ProRead, shift and lock a product palette

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/palette-extract

Usage

tsx

import { PaletteExtract } from "@/components/ui/chatcn/pro/palette-extract"

<PaletteExtract
  src="/renders/campaign-04.webp"
  alt="Teal brogue on a pink block"
  onApplyShift={(request) => regenerate(request)}
  status={pending ? "shifting" : "idle"}
/>

The image is read in the browser: drawn at 64 px and clustered in OKLab, so swatches match what people see and the same image always gives the same palette. Each swatch is as wide as its share of the image in the strip, and a ring marks its most typical pixel. Picking a shift previews it per swatch (the original stays as a tab at the start of each chip); locked swatches stay put. onApplyShift receives the shift, both palettes and the locked colors. The image must be same origin or served with CORS headers; otherwise the component says so and offers a retry. Pass swatches to skip extraction.

Examples

Every state

ProEmpty, shifting, failed, data, disabled

Props

Prop	Type	Notes
`src`, `alt`	`string`	Same origin or CORS enabled
`count`	`number`	Swatches to pull. Default 6
`swatches`	`PaletteSwatch[]`	A palette as data. Skips extraction
`onExtract`	`(swatches) => void`	Called once the palette is read
`shift`, `defaultShift`, `onShiftChange`	`PaletteShift \| null`	Controlled or not
`shifts`	`PaletteShift[]`	Default warmer, cooler, muted, vivid, mono
`onApplyShift`	`(request) => void`	Shows locks and the apply button
`status`, `error`, `onRetry`		`idle`, `shifting` or `error` with a fix
`imageClassName`	`string`	For example a filter to show a result
`disabled`	`boolean`

Keyboard

Key	Action
`Tab`	Move through swatches, locks, shifts and apply
`Enter`, `Space`	Copy the focused swatch, toggle a lock or a shift
`ArrowLeft`, `ArrowRight`	Move between shifts

Accessibility

Each swatch is a button named with its hex and share; copying is announced in a polite live region.
Locks are toggle buttons with aria-pressed. Shifts are a Base UI toggle group.
Errors use role=alert and say how to fix the problem.

Motion

Swatch colors cross over in 200 ms when a shift changes. Hovering a swatch grows its ring on the image in 150 ms.
Under reduced motion rings do not grow, only fade.