配色盤產生器
取一個主色自動衍生和諧配色：色卡翻牌、一鍵複製、鎖定重骰。
選一個主色，演算法即時衍生 5 個和諧色，可在類比、互補、三等分模式間切換。色卡以翻牌動畫進場、點擊即複製 hex（打勾回饋），鎖定喜歡的顏色後按「重骰」，只有未鎖定的色卡會以決定性種子重新抖動，每張卡並自動挑選對比最佳的深或淺文字色。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<PaletteGenerator />
安裝
npx shadcn@latest add https://webberui.com/r/palette-generator.json或在 components.json 設定 registries 後，改用 @webberui/palette-generator 安裝。
安裝依賴後，從 registry JSON（/r/palette-generator.json 的 files[0].content）複製 palette-generator.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { PaletteGenerator } from "@/components/ui/palette-generator";
<PaletteGenerator
seedColor="#f97316"
defaultMode="analogous"
onPaletteChange={(colors) => console.log(colors)}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
seedColor | string | "#6366f1" | 初始種子主色（hex），5 個和諧色由它推導 |
defaultMode | HarmonyMode | "analogous" | 預設和諧模式：analogous 類比、complementary 互補、triadic 三等分 |
onPaletteChange | (colors: string[]) => void | — | 配色變動（換色、換模式、重骰、鎖定）時回呼目前 5 個 hex |
className | string | — | 透傳到外層容器 |
可及性
- 色卡是原生
button，aria-label完整朗讀 hex 與中文色名，鍵盤 Enter／Space 即可複製 - 鎖定鈕以
aria-pressed表達鎖定狀態，並提供「鎖定／解鎖第 N 張色卡」的朗讀文字 - 複製成功透過
role="status"的aria-live區域向螢幕閱讀器播報 - 每張卡自動在深灰與近白間挑選 WCAG 對比較高的文字色，並顯示對比值
- 使用者系統開啟「減少動態效果」時，停用翻牌與旋轉動畫，僅保留即時色彩更新