雜誌編輯版面
品牌色票板
品牌書式的色票板 React 元件：色塊由上而下依序填滿，自動換算 RGB／CMYK／WCAG 對比度，色面文字依對比自動選白或黑；滑過抬起、點擊複製色碼並浮出「已複製」。
品牌書裡那一頁色票，做成可以直接用的元件。傳入一組 { name, hex }，元件會自動換算 RGB、CMYK 與對白／對黑的 WCAG 對比度，並標上 AA／AAA／不足；色面上的文字依對比度自動選白或黑，確保至少 4.5:1。進入視窗時每塊色面由上而下依序填滿，文字在填完後淡入；滑過時色塊抬起，點擊（或聚焦後按 Enter／空白鍵）以目前格式複製色碼，色面中央浮出「已複製」。主色可設 primary 橫跨兩欄，頂部可選擇顯示 HEX／RGB／CMYK／全部的格式切換。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add brand-swatch-boardPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
3
80
編輯中的呼叫預設屬性
<BrandSwatchBoard/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/brand-swatch-board.json或在 components.json 設定 registries 後，改用 @webberui/brand-swatch-board 安裝。
使用
import { BrandSwatchBoard } from "@/components/ui/brand-swatch-board";
<BrandSwatchBoard
columns={3}
showFormatToggle
swatches={[
{ name: "山嵐墨", hex: "#1E2A2F", note: "主色", primary: true },
{ name: "烘焙棕", hex: "#7A4E2D" },
{ name: "燕麥奶", hex: "#EFE6D8" },
{ name: "柿子橘", hex: "#E07A3F" },
]}
onCopy={(swatch, value) => console.log(`已複製 ${swatch.name} ${value}`)}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
swatches | BrandSwatch[] | — | 色票清單；改變 hex 會即時更新色面（色面背景走 CSS 變數） |
columns | number | 3 | 寬螢幕的欄數（1–6）；窄螢幕最多兩欄 |
format | "hex" | "rgb" | "cmyk" | "all" | — | 受控的顯示格式；未提供時由元件內部管理（非受控） |
defaultFormat | "hex" | "rgb" | "cmyk" | "all" | "all" | 非受控模式的初始顯示格式 |
onFormatChange | (format: BrandSwatchFormat) => void | — | 顯示格式變動時回呼（透過頂部切換） |
showFormatToggle | boolean | false | 是否在頂部顯示格式切換 |
stagger | number | 80 | 每塊色面進場的間隔（毫秒）；未提供時沿用 --wb-bsb-stagger |
onCopy | (swatch: BrandSwatch, value: string) => void | — | 複製成功後回呼，參數為色票與實際複製的字串 |
className | string | — | 透傳到最外層容器 |
BrandSwatch
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
name | string | — | 色名，例如「深林綠」 |
hex | string | — | 色碼，支援 #rgb 與 #rrggbb（# 可省略） |
note | string | — | 用途說明，顯示於色名下方 |
primary | boolean | false | 主色：色面橫跨兩欄（欄數 ≥ 2 時） |
另外具名匯出純函式 hexToRgb、rgbToHex、rgbToCmyk、relativeLuminance、contrastRatio、contrastLevel，可在色票板以外重複使用同一套換算。
細節
- 換算：
hexToRgb支援三位與六位色碼；rgbToCmyk是不經色彩描述檔的簡易換算，四捨五入為整數百分比，印刷前仍以印廠的描述檔為準；對比度依 WCAG 相對亮度公式計算，一般文字 ≥ 4.5 為 AA、≥ 7 為 AAA。 - 複製內容依目前格式：HEX 為
#1E2A2F、RGB 為rgb(30, 42, 47)、CMYK 為cmyk(36%, 11%, 0%, 82%)；格式為「全部」時複製 HEX。剪貼簿不可用或被拒時，色面顯示「無法複製」。 - 色面背景是
bg-[var(--wb-bsb-color)]，色碼透過行內 CSS 變數傳入，改swatches就會即時重繪。 - 節奏變數：
--wb-bsb-stagger（80ms）、--wb-bsb-fill-duration（600ms）、--wb-bsb-ease（cubic-bezier(0.23,1,0.32,1)）可在全域覆寫；傳入staggerprop 時以 prop 為準。滑過抬起沿用--wb-duration-fast與--wb-ease-out。 - 進場以 IntersectionObserver 偵測，只播一次。
可及性
- 每塊色票是原生
<button>，aria-label完整描述色名與目前格式的色碼（例如「複製 山嵐墨 #1E2A2F」），可用 Tab 聚焦、Enter 或空白鍵複製 - 複製結果寫入
role="status"、aria-live="polite"的隱藏區域，由螢幕閱讀器朗讀；色面上的裝飾文字與「已複製」chip 對輔助科技隱藏，避免重複 - 格式切換是
role="radiogroup"，方向鍵、Home、End 可移動選取，並有focus-visible外框 - 色面上的文字依對白／對黑的對比度自動選擇較高者，確保至少 4.5:1
- 使用者系統開啟「減少動態效果」時，不播放填滿與抬起動畫，色票直接顯示；複製 chip 只淡入淡出