應用殼層與面板
配色盤產生器
取一個主色自動衍生和諧配色：色卡翻牌、一鍵複製、鎖定重骰。
選一個主色，演算法即時衍生 5 個和諧色，可在類比、互補、三等分模式間切換。色卡以翻牌動畫進場、點擊即複製 hex（打勾回饋），鎖定喜歡的顏色後按「重骰」，只有未鎖定的色卡會以決定性種子重新抖動，每張卡並自動挑選對比最佳的深或淺文字色。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add palette-generatorPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
編輯中的呼叫預設屬性
<PaletteGenerator/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/palette-generator.json或在 components.json 設定 registries 後，改用 @webberui/palette-generator 安裝。
使用
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 對比較高的文字色，並顯示對比值
- 使用者系統開啟「減少動態效果」時，停用翻牌與旋轉動畫，僅保留即時色彩更新