官網色彩系統（Color Palette）設計完整攻略：中小企業如何選對品牌色，第一眼就讓人記住又願意點下去
為什麼有些官網一看就專業？關鍵是色彩系統。一篇講透主色、輔助色、中性色、語意色與對比度，附 CSS 變數實作範本，中小企業老闆可直接落地。
為什麼有些官網「一看就專業」、有些卻說不上來哪裡怪？
很多中小企業老闆做完官網之後常會問一句話：「為什麼我這個網站乍看之下，就是沒有人家的網站有質感？」答案通常不是字體、不是排版，也不是照片有沒有用棚拍——而是色彩系統沒有被當一回事。
網站上每一塊顏色，從主視覺背景、按鈕、連結、表單欄位、提示訊息，到頁尾的細線條，全部都會被訪客的眼睛在 3 秒內快速掃過。如果這些顏色彼此打架、明暗階層混亂、或主色之外什麼都用灰色帶過，網站給人的感覺就會變成「不知道想表達什麼」，自然也就難說服訪客往下看。
這篇文章會把「官網色彩系統」拆成一個可以執行的流程：從什麼是色彩系統、為什麼它會直接影響轉換率，到中小企業最常踩的色彩地雷、怎麼挑主色與輔助色、對比度合不合規，最後落地成可以給工程師寫進 CSS 的變數表。看完之後，你應該可以對自己現在的官網色彩有一個明確的判斷，知道下一步要修哪裡。
Photo by Andy Brown on Unsplash
一、色彩系統不是「挑兩個喜歡的顏色」就好
很多老闆和設計師在做網站時，色彩規劃停在「主色我要藍色、Logo 用深一點的藍」就結束了。但一個能撐起整個官網的色彩系統，至少要包含五個角色：
- 主色（Primary）：品牌最核心的識別色，通常出現在 Logo、CTA 按鈕、強調區塊。整個網站佔比約 10%~20%。
- 輔助色（Secondary / Accent）：與主色搭配的補強色，用來突顯重點訊息、次要按鈕、活動標籤。佔比約 5%~10%。
- 中性色（Neutral）：黑、白、灰階。負責文字、背景、卡片邊框、分隔線。整個網站超過 60% 的視覺面積都是中性色。
- 語意色（Semantic）：成功用綠、警告用黃、錯誤用紅、資訊用藍。專門用在表單驗證、系統提示、訂單狀態。
- 狀態色（State）：每個顏色還要有 hover、active、disabled 三種變化，否則按鈕被滑鼠移過去毫無反應，使用者會以為網站壞了。
把這五組角色講清楚之後，你會發現一個常見問題：很多中小企業官網其實只規劃了「主色」一個，剩下四組全靠當下隨手抓。結果就是同一個網站上，紅色可能出現在「特價」標籤、也出現在「錯誤訊息」，使用者腦袋自然混亂。
二、為什麼色彩會直接影響詢問轉換率？
不少老闆覺得「顏色」屬於美感問題，與生意關係不大。但實際上，色彩系統有四個層面會直接影響訪客是否會聯絡你：
- 第一印象決定要不要繼續看：根據多份介面研究，使用者對網站「值不值得信任」的判斷大約在 50 毫秒內就完成，比讀完 Logo 還快。配色協調與否，是這 50 毫秒裡訊息量最大的一塊。
- 視覺階層引導行動：當主色只用在「聯絡我們」按鈕、不亂出現在裝飾元素上，訪客的眼睛會被訓練成「看到這個顏色就是要點下去」。這就是為什麼很多轉換率優化案例，光是把次要按鈕改成中性色、就提升了主按鈕的點擊率。
- 對比度影響閱讀：文字色與背景色的對比不夠時，訪客會閱讀疲勞、跳出率上升。淺灰色字看似「優雅」，在手機戶外場景幾乎看不見。
- 情緒連結品牌：藍色給人專業穩重、綠色聯想自然健康、橘色傳達親切活潑。選錯主色，不是不好看，而是讓客戶對你的產業產生錯位聯想——例如賣食品卻用太多藍灰冷色，會讓人覺得不可口。
三、三種「不靠靈感」也能挑出主色的方法
如果你公司還沒有完整的品牌識別、或者 Logo 是當年用 Word 隨手做的，可以用下面三種角度任選其一，快速決定一組可以用的主色。
方法 1：從產業情境反推
先列出競品的官網色彩，找出產業常見的兩三組主色，再思考要「跟著主流」還是「明顯區隔」。例如：醫療類大多用藍綠、餐飲類偏紅橘黃、科技類偏深藍與紫、永續類偏自然綠。跟主流可以縮短客戶建立信任的時間；明顯區隔則容易讓人記得，但設計上要花更多力氣讓它看起來不違和。
方法 2：從目標客戶反推
B2B 工業客戶偏好穩定、低彩度的色系，飽和度太高反而會被認為「不夠專業」；B2C 消費端客戶則接受度高，可以放心使用較鮮明的主色。年齡層也是關鍵：50 歲以上客戶對中等對比度與較柔和色彩接受度高，年輕族群則喜歡高對比、跳色組合。
方法 3：從產品本身的視覺反推
如果你公司的主要產品本身有強烈的視覺特色（例如綠色植栽、橘色餐點、銀色金屬零件），網站的中性色就應該讓產品照片可以跳出來，避免主色與產品色彼此搶戲。
Photo by Mourizal Zativa on Unsplash
四、中小企業官網最常踩的 5 個色彩地雷
看了上百個台灣中小企業官網之後，常見的色彩問題其實高度重複，這五個是最常出現的：
- 顏色用太多：首頁紅黃藍綠紫全部上場，每一塊區塊都是不同主題色。視覺重心散掉，訪客抓不到重點。一個健康的官網，主色加輔助色不要超過三種跳色。
- 主色淹沒在裝飾裡：頁面上到處都是品牌色的線條、底紋、圖示，結果真正要客戶點下去的「聯絡我們」按鈕反而消失。請把主色當「特別場合用的禮服」，不要當「全身上下的內衣」。
- 淺灰色字：表單欄位的提示文字、頁尾的版權文字用了 #CCCCCC 這種淺灰，畫面上看似乾淨，但對比度遠低於可讀標準。手機在戶外、年長者使用時，完全看不見。
- 連結沒區分：內文裡的超連結與一般文字同色，訪客必須把滑鼠滑過去才知道哪裡可以點。連結建議用主色或統一的次主色，並加上底線或 hover 變化。
- 狀態色亂用：「特價」、「限時」、「警告」、「錯誤」全部都用紅色，看到後來訪客也分不清哪一個是促銷、哪一個是錯誤訊息。語意色一旦定義就請保持一致。
五、對比度：別讓視障客戶與你的長輩客戶看不到內容
很多人不知道，色彩對比度是有國際標準的——WCAG（Web Content Accessibility Guidelines）。對於官網來說，至少要達到 AA 等級：
- 一般文字（小於 18px）：對比度至少 4.5:1
- 大型文字（18px 以上或 14px 粗體以上）：對比度至少 3:1
- 非文字的圖示與互動元件邊框：至少 3:1
怎麼快速檢查？兩個免費工具就夠用：
- WebAIM Contrast Checker：丟兩個色碼進去，立刻告訴你對比度與是否通過 AA、AAA。
- Chrome DevTools：F12 打開後，把游標移到任何文字上，Color picker 會直接顯示對比度與標準是否合格。
對中小企業老闆來說，這不只是「合規」問題。台灣 50 歲以上人口比例越來越高，這個族群在你的客戶名單裡比例可能不小。對比度做好，就是讓他們不用瞇眼也看得清楚你的服務內容，間接也保護了搜尋引擎對「可讀性」的評分。
六、色彩系統怎麼從設計稿落實到網站
光有色票還不夠，要讓網站長期維護時不會「越改越亂」，色彩系統一定要寫成可以被重複引用的變數。實務上有三層做法：
1. 設計稿層：定義 Design Token
在 Figma 或 Adobe XD 裡，把每個顏色註冊成樣式（Color Style），命名要語意化：例如不要叫「藍色」，要叫「primary」、「primary-hover」、「text-default」、「text-muted」、「border-default」。這樣未來主色從藍改成綠，整份設計稿一鍵替換即可。
2. 程式碼層：用 CSS 變數
把色票寫進 :root 變數，所有元件都引用變數而非寫死色碼。範例：
:root {
--color-primary: #1f6feb;
--color-primary-hover: #1858c4;
--color-secondary: #f59e0b;
--color-text-default: #111827;
--color-text-muted: #6b7280;
--color-bg-default: #ffffff;
--color-bg-subtle: #f3f4f6;
--color-success: #16a34a;
--color-warning: #f59e0b;
--color-error: #dc2626;
}之後不論是 WordPress、Vue、React 還是純 HTML，都用 color: var(--color-primary) 來引用。三年後品牌色想改，只要改一處。
3. 文件層：寫一份「色彩規範書」
不需要太正式，可以在 Notion 或一張 PDF 上寫清楚：每個顏色的色碼、用途、不該用在哪裡、hover/disabled 的變化。未來換了行銷人員、換了設計外包，這份文件就是品牌的記憶。
Photo by Kelly Sikkema on Unsplash
七、暗色模式（Dark Mode）要做嗎？
近兩年很多客戶會問：「我們官網要不要支援暗色模式？」答案要看訪客場景。如果你的網站訪客大多是夜間或在程式設計、影像剪輯等專業場域，做暗色模式可以加分。但對絕大多數中小企業官網（B2B 服務、本地餐飲、地方診所）來說，訪客主要在白天瀏覽，暗色模式投入的設計時間相對 ROI 不高。
真正建議優先處理的是「主色在不同背景下的可讀性」——很多品牌主色在白底上漂亮，一放到深色頁尾或圖片上就完全消失。這時就要設計第二個版本的主色，專門用在深色背景上。
結語：色彩是品牌最便宜也最有效的投資
跟客製化系統、廣告投放比起來，重新規劃一次色彩系統的成本非常低，但帶來的觀感升級卻是立刻可見的。建議你今天就做三件事：
- 打開自己的官網，數一下到底用了幾種主要顏色。如果超過三組跳色，就是該整理了。
- 把 Logo、按鈕、文字主色三個色碼丟到 WebAIM Contrast Checker，確認對比度有沒有過關。
- 請設計師或網站工程師把現有色票整理成 CSS 變數，未來改色不再痛苦。
色彩系統做對了，等於是幫整個官網的每一塊區塊、每一個按鈕、每一段文字，都裝上「對的引導燈」。訪客在你網站上停留的每一秒，都會更靠近詢問與成交。如果你想針對自己公司的品牌做一次完整的色彩系統規劃，歡迎與我們聯絡，我們會根據你的產業屬性與目標客戶，提供一份可以直接落地的色票與規範。