Palette Generator: Free React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add palette-generator.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Seed colorseedColor

Harmony modedefaultMode

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<PaletteGenerator/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/palette-generator.en.json

Or, 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 whose aria-label reads 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-pressed and provides "lock / unlock swatch N" announcement text
A successful copy is announced to screen readers through a role="status" aria-live region
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

Palette Generator