前端設計實驗室 02｜如何把不同顏色統一成柔和色調？
前端設計實驗室 · 技巧篇 02
顏色各自好看，放在一起卻不一定協調。問題通常不在色相太多，而是明度和彩度相差太遠，讓每個顏色都在搶注意力。
下面固定字型、排版和內容，只切換配色。先比較未統一版本，再觀察粉色調、淺色調與柔和色調如何讓不同色相看起來像同一家族。
頁面本身由 Vanilla JavaScript 執行；Vue 3 與 React 頁籤顯示的是相同互動的核心寫法。
PREVIEW
Quiet
Sunday
花、甜點與手作小物，陪你慢慢度過午後。
09.06 SUN
13:00–18:00
COME SAY HELLO
主色
輔助色
強調色
tone-demo.js
柔和不是只把顏色變淡
粉色調加入較多白色；淺色調明亮清爽；柔和色調則降低彩度，同時讓各色的明度接近。即使同時使用粉紅、藍和綠，仍會有一致的氣氛。
實作時先決定主色、輔助色與強調色，再用 --base、--sub、--accent 管理。背景、卡片與文字使用 --page、--surface、--ink 等中性色，不列入三色配色。需要突出重點時，讓強調色只出現在按鈕等少數位置。
如果還不熟悉這些名稱，可以先閱讀：設計基礎筆記：主色、強調色、輔助色與色彩三屬性。
三種程式碼有什麼差別？
| 寫法 | 保存狀態 | 更新畫面 |
|---|---|---|
| Vanilla | 一般變數 | 監聽按鈕，手動更新 dataset |
| Vue 3 | ref |
透過資料綁定自動更新 |
| React | useState |
更新 state 後重新渲染元件 |
三種寫法都只保存目前的 tone，並把它交給 data-tone。框架負責切換狀態，真正決定色彩的仍是同一組 CSS 變數。
結語
色相可以不同，但明度和彩度要有共同節奏。
參考資料
本文概念整理自 ingectar-e《最強排版設計：32個版面關鍵技巧，社群小編、斜槓設計，自學者神速升級！》P148–158，黃薇嬪譯，積木文化，2023。城邦讀書花園書籍資料
系列導覽：前端設計實驗室 · 上一篇：換一套英文字型，畫面個性差多少？