Sanzo Wada 調色盤
當使用者想要「Wada 書中的」配色方案、一個 Sanzo Wada 調色盤、特定組合編號，或為網站、品牌、設計或穿搭尋找雅緻的調色盤時使用。
1. 取得資料
來源：mattdesl/dictionary-of-colour-combinations（MIT 授權）。將其複製到一個空的資料夾中：
mkdir -p /tmp/wada && git clone --depth 1 -q https://github.com/mattdesl/dictionary-of-colour-combinations /tmp/wada/repo
備用方案：在空資料夾中執行 npm install dictionary-of-colour-combinations。
colors.json 是一個包含 159 種顏色的陣列：
{"name": "Hermosa Pink", "combinations": [176, 227, 273], "swatch": 0,
"cmyk": [0,30,6,0], "lab": [...], "rgb": [249,193,206], "hex": "#f9c1ce"}
調色盤並非直接儲存。組合 N 是所有在 combinations 清單中包含 N 的顏色：
import json, collections
colors = json.load(open('/tmp/wada/repo/colors.json'))
combos = collections.defaultdict(list)
for c in colors:
for n in c['combinations']:
combos[n].append(c)
# combos[n] -> 包含 2、3 或 4 種顏色的清單
使用 -I 參數執行 Python，並將腳本保留在已複製的資料夾之外。
2. 選擇調色盤
- 如果使用者提供了組合編號，直接使用該組合。
- 否則，根據他們的要求進行篩選：顏色數量（2、3 或 4 種）、色調（根據色相為暖/冷，根據 LAB 彩度為柔和/大膽），或他們想要包含的顏色（根據 LAB 距離最接近）。
- 為切換器（步驟 4）選取 5–10 個候選方案。如果不是在建置網站，則顯示 3–5 個內嵌色票（包含十六進位碼、名稱、組合編號）。
- 對於 UI 工作，使用 WCAG 對比度比例檢查文字對比：主體內文需達 4.5:1。使用最淺或最深的顏色作為背景。若某組搭配失敗，可從調色盤顏色中衍伸出較淺或較深的色調作為文字，並標明此處置。
3. 將每個調色盤對應到主題
針對網頁工作（預設為 Tailwind/shadcn），將每個候選調色盤轉換為一組完整的 shadcn CSS 變數：--background、--foreground、--card、--card-foreground、--primary、--primary-foreground、--secondary、--secondary-foreground、--accent、--accent-foreground、--muted、--muted-foreground、--border、--ring。使用專案已採用的色彩格式（HSL 或 OKLCH）。如果調色盤中沒有接近白色或接近黑色的顏色，則從其自身的顏色中衍生出色調/陰影，而不是使用純灰色。
將所有主題寫入一個檔案，例如 lib/wada-themes.ts：
export const wadaThemes = [
{ id: 176, name: "Hermosa Pink / ...", swatches: ["#f9c1ce", ...], vars: { "--background": "...", ... } },
...
];
4. 加入主題切換器（始終如此，僅限網頁工作）
建立一個客戶端元件 components/wada-theme-switcher.tsx，並在根佈局中渲染一次。
行為：
- 一個位於右下角的小型浮動按鈕（高 z-index，使用固定的中性樣式，使其在任何主題下都保持可讀性）。
- 點擊會開啟一個面板，列出每個主題：組合編號、名稱及其色票（顯示為小圓點）。點擊主題會立即將其
vars設定在document.documentElement.style上以套用主題。 - 前/後箭頭加上鍵盤快捷鍵（
[和]）可快速循環切換主題。 - 一個「預設」選項，用於移除內聯變數以恢復網站原始主題。
- 將所選主題記住在
localStorage中（包在 try/catch 中），以便在頁面導航和重新載入後仍能保留。 - 一個「複製 CSS」按鈕，可將目前主題複製為一個立即可貼上的
:root { ... }區塊，適用於globals.css，並在註解中包含組合編號。 - 可見性：當
process.env.NODE_ENV !== "production"或 URL 包含?themes=1時顯示。這讓使用者可以在線上的 Vercel 預覽環境中測試，並與客戶分享連結，而一般訪客永遠不會看到它。
當使用者選定最終版本（「鎖定 176」）時，將該主題的變數作為預設值寫入 globals.css。詢問是否要移除切換器和 wada-themes.ts，或將它們保留在 ?themes=1 之後。
其他輸出
- 純 CSS 網站： 使用相同切換器的純 JavaScript 版本，在
:root上設定自訂屬性。 - 設計 / 印刷： 列出每種顏色的十六進位碼、RGB 和 CMYK 值，以及組合編號。
- 穿搭 / 非數位應用： 用簡單的文字描述每種顏色及其適合的單品（基底、主色、點綴色）。
務必引用組合編號，以便使用者可以在書中找到它們。
備註
- 十六進位值是數位化近似值。印刷書中的 CMYK 值才是參考標準。
- 顏色名稱來自資料集。請勿自行發明日文名稱。