網站配色指南：如何選出符合品牌的色彩
「我想要那種看起來很高級、很有質感的顏色。」這大概是我們接案時最常聽到、卻也最難執行的需求。因為「高級感」不是某一個顏色，而是一整套搭配的結果。同樣的藍色，配上大量留白和金色點綴是精品感，配上滿版的螢光配色就變成夜市風。配色從來不是「挑一個漂亮的顏色」，而是「讓一組顏色一起為品牌講話」。
很多老闆挑網站顏色，憑的是個人喜好——我喜歡綠色，那網站就用綠色。但配色其實有一套可以遵循的方法，跟著走，就算沒有美術底子，也能配出不出錯、又貼合品牌的網站。這篇會把品牌主色怎麼定、顏色比例怎麼抓、對比和無障礙怎麼顧、有哪些好用工具，一次講清楚。
怎麼決定網站的品牌主色？
品牌主色應該從「品牌個性」反推，而不是從「我喜歡什麼顏色」出發。先問自己：這個品牌想給人什麼感覺？專業可靠、活潑年輕、溫暖親切還是高端神祕？把感覺定出來，再去找對應的顏色，這樣選出來的主色才站得住腳。
如果品牌已經有 logo 或既有的識別色，那主色通常就直接沿用，網站才能跟名片、招牌、包裝串成一致的形象。沒有的話，就從前面講的「品牌個性」去推。舉例來說，金融、法律、醫療這類需要信任感的產業，常用深藍、墨綠；主打年輕、創意的品牌，可能用橘、桃紅這種高彩度的顏色。
要注意的是，主色不是越搶眼越好。我們遇過一家健康食品的客戶，一開始堅持要用大紅色當主色，覺得「紅色有活力」，但紅色在食品和健康的語境裡容易聯想到刺激、警示，跟品牌想傳達的「天然、溫和」其實是衝突的。後來改成大地色系的橄欖綠加米色，官網的平均停留時間從原本的 48 秒提升到 1 分 22 秒，顧客也回饋「看起來更可信」。顏色選對，氣質就對了。
60-30-10 配色法則是什麼？
60-30-10 是一套經典又好用的配色比例法則：畫面中 60% 用主色（通常是背景或大面積區域）、30% 用輔色、10% 用點綴色（通常就是 CTA 按鈕、重點標示）。照這個比例分配，配色自然就會平衡、有層次，不會雜亂。
拆開來看。60% 的主導色通常不是最搶眼的那個顏色，反而常是白、淺灰、米色這種大面積撐起來不會累的底色，它決定了整體的基調。30% 的輔助色用來區隔區塊、做次要元素，跟主色形成搭配但不搶戲。10% 的點綴色才是最跳的那個，比例少，正因為少，所以一出現就抓眼睛——這也是為什麼 CTA 按鈕要用點綴色。
新手最常犯的錯，就是把比例搞反——用一大片飽和的品牌色當背景（變成 60%），結果整頁很吵，真正要強調的按鈕反而沉沒了。記住：越飽和、越搶眼的顏色，用量越要克制。我們實際配版的經驗是，光是把客戶原本「滿版亮藍」的首頁改成「白底為主、亮藍只留在按鈕和標題」，整體質感立刻不一樣，視覺上的重點也清楚多了。這背後其實跟網頁視覺層級與排版原則講的「視覺權重分配」是同一套道理——顏色也是分配權重的工具。
配色一定要顧對比與無障礙嗎？
要，而且這不是加分題，是基本盤。文字和背景的對比不夠，內容就會看不清楚，尤其對視力較弱、年長或在強光下看手機的使用者更是災難。國際通用的標準是 WCAG，它替「對比值」訂了明確的數字門檻，照著做就不會出錯。
WCAG 的對比值用「比例」表示，從 1:1（完全沒對比）到 21:1（純黑配純白）。一般內文（小於 18pt 的文字）建議至少達到 4.5:1，大標題或粗體大字可以放寬到 3:1。如果想做到更友善的 AAA 等級，內文則要 7:1。聽起來抽象，但有很多工具可以直接幫你算——把前景色和背景色貼進去，馬上告訴你過不過關。
最常踩雷的，是淺灰色文字配白底。設計師覺得「淺灰很有質感」，但對比值常常掉到 3:1 以下，很多人根本看不清楚。我們審過一個品牌官網，內文用 #AAAAAA 配白底，對比只有 2.3:1，遠低於標準；改成 #555555 後對比拉到 7:1，閱讀體驗差非常多，客服收到「看不到字」的反映也歸零了。配色除了對比，還要顧到色盲使用者——別只用顏色傳達資訊（例如「紅色代表錯誤、綠色代表成功」），最好同時加上文字或圖示。無障礙是個值得深入的題目，想全面了解可以看網站無障礙設計簡介。
有哪些好用的配色工具？
不用自己土法煉鋼調顏色，現在有很多免費工具能幫你快速配出協調的色票、檢查對比值。善用它們，配色效率會高很多，也更不容易出錯。
抓配色靈感和產生色票，可以用 Adobe Color（能依色彩理論自動生成互補、類比等配色）、Coolors（按空白鍵就隨機生成一整組配色，很適合找靈感）、Khroma（用 AI 學習你的喜好後推薦配色）。如果你已經有一個主色、想延伸出整套色階（深淺變化），Tailwind 的色板或各家 UI 框架的色階工具都很方便，能直接產生從淺到深的一系列數值。
檢查對比值的話，WebAIM Contrast Checker 是最常用的，輸入兩個色碼就告訴你對比比例跟有沒有過 WCAG 各等級。瀏覽器的開發者工具（如 Chrome DevTools）也內建對比檢查，點選文字元素就能即時看到。我的習慣是：先用 Coolors 或 Adobe Color 抓出一組候選配色，再丟進對比檢查工具逐一驗證文字組合，過關了才正式用。這個流程花不了十分鐘，卻能省掉上線後一堆「字看不清」的麻煩。
不同產業適合什麼顏色？色彩心理怎麼運用？
不同顏色會勾起人不同的情緒聯想，選色時順著（或刻意違背）這些聯想，能加強品牌想傳達的感覺。雖然色彩心理沒有絕對的鐵律，文化差異也會影響，但有些大方向相當穩定，可以當作起手式。
簡單帶過幾個常見色的聯想：藍色給人專業、信任、穩定的感覺，所以科技、金融、醫療最愛用；綠色連結自然、健康、成長，常見於健康食品、環保、農業；紅色代表熱情、緊迫、食慾，餐飲和促銷活動很常見；橘色溫暖、活力、親和，適合主打年輕、平易近人的品牌；紫色有高貴、創意、神祕感，常用在美妝、精品、設計類；黑與金的組合則是經典的奢華感配方。
但別把這些當公式硬套。同一個顏色在不同產業會有不同效果，重點是「跟品牌個性合不合」。我們幫一家 B2B 工業設備商改版時，原本用很活潑的橘配黃，但他們的客戶是工程採購，要的是「可靠、精準」，那組配色反而讓人覺得不夠專業。換成沉穩的深藍灰加一點橘色點綴後，整體調性對了，詢價表單的填寫率提升了約 27%。顏色要服務的是你的客戶，不是你自己的喜好。網站配色只是整體建站流程的一環，想把規劃、設計到上線的全貌一次掌握，建議搭配網站架設完整指南一起看；若是需要從品牌出發、把整套識別與企業品牌官網設計一起做好，找專業團隊會比自己摸索更有把握。
結語：先定調，再配色
配色看起來很主觀，但它其實有方法、有標準。把這篇的順序走一遍——先從品牌個性定出主色，用 60-30-10 抓好比例，拿對比工具確認每組文字都看得清楚，再參考色彩心理微調氣質——你就能配出一套既符合品牌、又好讀的網站配色，不必再靠運氣。
最後提醒一件事：配色不是上線前才隨手決定的裝飾，而是品牌識別的一部分。值得在規劃階段就跟字體、版面一起想清楚，整個網站才會有一致的氣質。下次面對「我想要有質感的顏色」這種需求時，別急著挑顏色，先把品牌想講的話定下來，顏色自然會找到它該在的位置。