Palette Generator
Take one primary color and derive a harmonious palette from it, with flip-card swatches, one-click copying, and lock-and-reroll.
Pick a primary color and the algorithm derives 5 harmonious colors live, switchable between analogous, complementary, and triadic modes. Swatches enter with a card-flip animation and clicking one copies its hex (with a checkmark confirmation); lock the colors you like and press "reroll", and only the unlocked swatches are shuffled again from a deterministic seed. Each card also picks whichever of a dark or light text color contrasts best.
npx shadcn@latest add https://webberui.com/r/palette-generator.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<PaletteGenerator />
Installation
npx shadcn@latest add https://webberui.com/r/palette-generator.jsonOr, once registries are configured in components.json, install it as @webberui/palette-generator.
Usage
import { PaletteGenerator } from "@/components/ui/palette-generator";
<PaletteGenerator
seedColor="#f97316"
defaultMode="analogous"
onPaletteChange={(colors) => console.log(colors)}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
seedColor | string | "#6366f1" | Initial seed color (hex), from which the 5 harmonious colors are derived |
defaultMode | HarmonyMode | "analogous" | Default harmony mode: analogous, complementary, or triadic |
onPaletteChange | (colors: string[]) => void | — | Fires with the current 5 hex values whenever the palette changes (color change, mode change, reroll, lock) |
className | string | — | Forwarded to the outer container |
Accessibility
- Swatches are native
buttons whosearia-labelreads out the full hex plus the Chinese color name, and Enter / Space copy from the keyboard - The lock button expresses its locked state with
aria-pressedand provides "lock / unlock swatch N" announcement text - A successful copy is announced to screen readers through a
role="status"aria-liveregion - Each card automatically picks whichever of dark gray or near-white has the higher WCAG contrast for its text color, and shows the contrast ratio
- When the user has "reduce motion" enabled at the system level, the flip and rotation animations are disabled and only the instant color update remains