視覺樣式詞條 3-27

色彩系統Color System

也常叫做：色彩系統、配色、Color Palette

你可能會這樣說

挑了幾個喜歡的顏色放進網站，結果畫面花掉、重點不明顯，文字配在色塊上什麼時候會看不清楚也沒有把握。

色彩系統是先分配角色、再談好不好看：主色負責品牌與按鈕、中性色負責背景與文字、強調色只留給重點。好記的比例是60／30／10——六成中性、三成次要、一成強調。

實務上中性色比主色更常出現：背景、卡片、邊框全靠灰階撐住質感；灰階有層次，畫面就穩。

跟 AI 合作時直接說「主色一個、強調色一個、中性灰五階」並指定用途，配出來就不會打架。

手作甜點工作室顏色決定訪客的第一印象——同一份內容，換一組色就換一種個性。線上訂購

色彩系統就是先定好三個角色：底色、文字色、強調色——全站都從這三個角色取色，就不會亂。

圖 3-27　點色票，看同一個區塊換裝。

中文就可以

請幫這個網站建立色彩系統：
主色選一個沉穩的深綠，強調色用它的對比暖色，只能用在焦點元素。
中性灰分成五階：背景、卡片、邊框、次要文字、主要文字。
另訂成功、警告、錯誤三個語意色，只能用在狀態提示。
檢查所有文字與背景的對比至少通過 WCAG AA，不合格的列清單給我。