最後更新時間：2025-12-20，由 Dean 更新 
在《網頁設計教學》中，我們知道「配色」是呈現品牌形象最重要的任務。但對於沒有設計背景的新手來說，常常會自己亂混顏色，結果就是整個網站看起來很不和諧，也沒辦法讓網站跟你的品牌有一致性。
這篇文章，我會跟你分享設計師最常使用的配色技巧，並透過實際案例，教你配出屬於你的顏色。
配色基礎觀念：色相環是什麼？
在講配色之前，我們先了解最重要的基礎概念：色相環。
色相環（Color Wheel）是一張「顏色關係表」，最早由瑞士設計師伊登提出。實際呈現出來會像是一個調色盤，將顏色依序排成一個圓，你就能看到哪些顏色彼此接近、哪些顏色差異又最大。
色相環最大的作用，就是來幫你判斷「顏色該不該放在一起」，間接就能做到：
- 找到適合的主色、輔色、強調色搭配。
- 拉開顏色之間的差異，讓重點更明顯。
- 避免配色只靠直覺，讓配色更有依據。
也因此，色相環被應用於多個領域，像是：品牌設計、廣告行銷、簡報呈現、室內設計、穿搭風格、妝髮造型、藝術創作等。基本上，只有有關「視覺」有關，都脫離不了色相環。
色相環的 12 色怎麼來的？
我們常會把色相環也稱作「伊登 12 色相環」，從上方的色相環圖，我們可以看見最外圈共有 12 個顏色。
而這 12 個顏色則是從最內圈，一層一層相加調配出來的，以下詳細說明。
三原色：紅、黃、藍
首先，在色相環最內圈的是「原色（Primary Colors）」，顧名思義就是無法透過任何其他顏色混合而成的原始顏色。
原色有三個：
- 紅色（Red）
- 黃色（Yellow）
- 藍色（Blue）
二次色：橙、綠、紫
再往外一層，我們稱作「二次色（Secondary Colors）」，也就是將三原色互相混合而成的顏色。
二次色分別是：
- 紅色 + 黃色 = 橙色（Orange）
- 黃色 + 藍色 = 綠色（Green）
- 藍色 + 紅色 = 紫色（Purple）
三次色：紅紫、紅橙、黃橙、黃綠、藍紫、藍綠
最外層有 12 個顏色，其中透過二次色混合而成的有 6 個，稱作「三次色（Tertiary Colors）」。
三次色有以下幾個：
- 紅色 + 紫色 = 紅紫色（Red-Purple），又稱洋紅色
- 紅色 + 橙色 = 紅橙色（Red-Orange），又稱朱紅色
- 黃色 + 橙色 = 黃橙色（Yellow-Orange），又稱琥珀色
- 黃色 + 綠色 = 黃綠色（Yellow-Green），又稱草綠色
- 藍色 + 紫色 = 藍紫色（Blue-Purple），又稱紫羅蘭色
- 藍色 + 綠色 = 藍綠色（Blue-Green），又稱青色
如何延伸更多色彩屬性？
到這邊你一定有個疑問：「平常看到的顏色那麼多種，但有些感覺不在色相環上？」
我們平時看到的顏色，感覺起來會不同，那是因為他們有了不同的「色彩屬性」。在孟賽爾顏色系統中，將色彩屬性定義為「色相（Hue）、明度（Value）、彩度（Saturation）」。
色相就是前一段我們分享的那幾種顏色，而「明度」與「彩度」則是由「無彩色」所搭配出來的。
無彩色：黑 & 白的色譜
無彩色（Achromatic colors），是指「沒有色相的顏色」，也就是它是沒辦法透過色相環所搭配出來的顏色。
白話來說，就是「黑 & 白」所產生的色譜。像是下圖，左右分別是黑跟白，而在這段色譜上的，都算是無彩色。
無彩色為什麼重要？因為它是影響顏色「明度」與「彩度」的關鍵。
明度：亮暗程度
明度（Value）又稱作「亮度」或「明亮度」，就是把原先色相環上的顏色，往「黑色」或「白色」靠近。
- 明度越高，就是越接近白色，顏色會感覺起來越輕盈、年輕。
- 明度越低，就是越接近黑色，會給人一種穩重、成熟的感覺。
彩度：鮮豔程度
彩度（Saturation）又稱作「飽和度」或「色度」，就是將原先色相環上的顏色，往「灰色」靠近。
- 彩度越高，代表越沒有混入灰色，看起來是鮮明的。
- 彩度越低，代表越接近灰色，會看起來比較柔和。
如果你覺得不好懂，你就記住「明度負責亮暗，彩度負責濃淡」，這也是大多色盤工具的邏輯，像下圖：
在配色時，基本上就是在「亮暗」與「濃淡」之間做變動，調出最合適的顏色。
6 種設計師最常用的配色技巧
在了解色相環基本原理後，就可以透過色相環來搭配合適的顏色。以下我會分享設計師最常使用的 6 種配色技巧。
配色技巧 1：單色配色
單色配色（Monochromatic）是選定色相環上單一顏色，在它的明度與彩度上做變化。
因為都是同個顏色，整體感覺非常和諧、簡約，是對新手而言最安全的配色方式。
單色配色的案例，有像是 Apple、Nike、Chanel 等知名品牌，都有種「簡單、專業、高級」的感受。
配色技巧 2：相近色配色
相近色配色（Analogous）會是在色相環上選定鄰近的 2~3 個顏色，在這幾個顏色中變化。
視覺上並不會太跳脫，給人一種自然、舒服、耐看的感覺。很適合用在一些社群、教育類的品牌。
像是 Spotify、Instagram、LINE 都是相近色配色的案例，讓人使用久了也不會感覺到視覺疲勞。
配色技巧 3：互補色配色
互補色配色（Complementary）是在色相環上選擇正對面的顏色做搭配，也稱作「對比色配色」。
這種配色方式，呈現出來的感覺會很吸睛、強烈、活潑，較常會出現在一些零售、促銷導向的品牌。
像是百事可樂 Pepsi、樂高 Lego 等品牌，都是使用互補色配色。
配色技巧 4：互補分割配色
互補分割配色（Split Complementary）就是使用色相環上其中一個互補色旁邊的兩個相近色做搭配。
這種配色方式可以維持互補色的對比效果，但又沒有那麼強烈，相對來說更加成熟、穩重。
常見於一些科技服務、B2B 品牌，像是 Firefox。
配色技巧 5：三分色配色
三分色配色（Triadic）也稱「三等分配色」，就是以一個主色，左右找到 120 度的顏色，互相做混搭。三個顏色的位置會呈現一個正三角形。
三種顏色搭配在一起各有特色、彼此不搶，給人活潑、有節奏的感受，如果想凸顯年輕、創意可用這種配色。
三分色的品牌，漢堡王 Burger King 就是經典案例。
配色技巧 6：四色配色
四色配色，就是在色相環上畫一個矩形，把四個顏色混搭在一起，可以分成兩種：
- 四元組配色（Tetradic）：在色相環上呈現正方形，每個顏色的距離都一樣，顏色配起來會比較平均。
- 矩形配色（Rectangle）：在色相環上呈現長方形，等於會有兩組相近色，感覺起來會比較柔和一點。
知名的四色配色案例像是 Google、Microsoft、ebay，都是要呈現給人一種豐富、多元的感覺。
網站如何配色？3 步驟實踐色彩心理學
許多品牌都會架設自己的官方網站，為了要讓風格一致，「配色」就很重要。
想要讓網站有符合風格的配色，我們可以透過以下 3 個步驟。
STEP1：根據色彩心理學選擇顏色
如果你原先就已經有 Logo，網站配色建議可以直接從 Logo 延伸。但如果你還沒有 Logo，我會建議一開始先根據「想給人的感覺」，挑選主要色系。
根據色彩心理學，以下色系各自會帶有不同的感受：
| 色系 | 給人的感受 | 適用的領域 |
|---|---|---|
| 紅色系 | 能量、行動、刺激、緊急 | 餐飲、娛樂 |
| 橙色系 | 親切、活潑、外向、友善 | 新創、教育 |
| 黃色系 | 明亮、希望、樂觀、注意力 | 行銷、運輸 |
| 綠色系 | 平衡、安全、成長、自然 | 健康、環保 |
| 藍色系 | 信任、冷靜、專業、理性 | 金融、科技 |
| 紫色系 | 創意、神秘、質感、想像力 | 美妝、身心靈 |
| 無彩色（黑白灰） | 理性、穩定、秩序、高貴 | 時尚、精品 |
當然，以上只是一個大方向的參考。感受不會只來自於顏色，圖像、文案等等也都會影響。
我建議新手，參考前一段配色技巧，先決定你想用幾個色系搭配，下一步驟我們會再做色彩屬性的延伸。
STEP2：用色盤延伸更多色彩屬性
無論你選擇幾個色系，選定好之後，你要找到一個有「色盤」的工具，才能夠調整明度與彩度。如果不知道用什麼工具，那就打開 Canva 隨意一個畫布，裡面就有色盤可以用。
根據你剛剛選定的色系，開始上下左右移動，來調整明度與彩度，找到喜歡的顏色，把色碼紀錄下來。我建議，一個色系先找 8~12 個顏色，後面比較好搭配。
STEP3：決定文字、背景、主色、輔色、強調色
下一步，我們要實際把選定的顏色填入網站模擬看看。在那之前，先有個概念，一個網站需要這幾個顏色：
- 文字色（Text）：用於文字，低明度、低彩度，重點是清楚、不甘擾。
- 背景色（Background）：用於背景，高明度、極低彩度，盡可能越接近灰白。
- 主色（Primary）：重點區塊、主要按鈕，中等明度、中/高彩度，會是需要被記憶的代表色。
- 輔色（Secondary）：輔助區塊、次要按鈕，明度比主色稍微高一點、彩度比主色則低一點。
- 強調色（Accent）：常用在行動呼籲、提示區塊，明度彩度只要能跟主色有強烈對比即可。
你可以從你前面選出的那幾個顏色，到 Realtime Colors 這個網站，將色碼依序填入，畫面上就能即時預覽網站模樣。
當然，你也可以再根據實際看到的畫面微調。確認最終版本後，記得要把色碼記錄下來，這會用於像是網站佈景主題、頁面編輯器等地方，更方便你設計網站。
網站配色範例：3 大產業品牌案例
不同產業的網站，通常會有不同的配色風格。以下幾個是我們過往服務過的案例，給你參考：
教育產業：劉翔自然
劉翔是一位國中自然老師，本人教學很有親和力，網站想帶出簡單、親切、活潑的感覺。
於是我們採取單色配色，並選擇橙色系去做搭配，讓整體畫面保持單純，但又不失專業。
顧問產業：PM Lab
PM Lab 創辦人是前微軟亞洲區副總經理，她創立這個品牌初衷是希望透過自身專業，輔導職場族群，並將收益全部支助國際弱勢群體。是一個非營利導向的網站，想要給人一種希望、溫暖的感覺。
我們選用相近色配色，用橙、朱紅、紅色系搭配，提升主色明度，將「希望感」凸顯出來，再藉由降低其他顏色的彩度，讓網站呈現舒服、專業的形象。
傳統產業：晉欣五金
晉欣五金 B2B 傳產，二代想要轉型，於是來找我們架設與設計官網。他們希望告別以往大眾對傳產守舊的印象，讓品牌有「創新感」；同時，也希望進到網站的人，能瞬間被吸引，進一步向他們聯絡。
他們原先的 Logo 是橙色系，我們使用了互補色配色，挑選彩度較高的藍色，讓兩者顏色強烈對比，抓住用戶眼球。
如果你也想要有好看的網站配色，歡迎找 DR.DEAN 形象所，我們會幫你量身打造你最適合的品牌形象。
5 個好用的配色網站推薦
市面上有很多好用的配色工具，以下分享幾個我們也常會使用的配色網站：
Coolors
Coolors 用法很簡單，按一下會隨機產生一組配色。免費版每組有五個顏色，可以無限刷新；也可以鎖定其中幾個顏色，讓其他顏色再刷新，直到配到適合的顏色。
Color Hunt
Color Hunt 是一個「配色收藏庫」，有大量已經被人工配好的顏色，你可以根據自己想要的風格、用途等，選擇喜歡的色票。也很建議你可以透過別人的配色，來訓練自己的配色美感。
Palettemaker
Palettemaker 可以讓你設定五個顏色，系統會再根據你設定的顏色，給你其他相似的配色組合。而每個配色組合，你都可以直接在畫面上看到它套用在不同地方的樣貌，像是 Logo、網站、APP、插圖、海報等。
Adobe Color
Adobe Color 是專業配色工具，有很多功能。像是「色輪」可以讓你運用前面分享的配色技巧，調配合適的顏色組合。「擷取主題」則可以上傳圖檔，它會把圖檔中的顏色抽取出來，給你一組配色。
Material UI Colors
Material UI Colors 很適合用於網站設計，它整理了幾種常見的 UI 風格，把色彩屬性按階層拆出來，點一下就能複製色碼。有趣的是，你可以切換到 “Click Counts” 模式，看每個顏色被點了多少次、最常被使用。
關於配色技巧的常見問題
如何獲得配色靈感？
可以善用配色網站，或是平時多參考雜誌、圖片、穿搭、裝潢。
自然界也是尋找配色靈感的好地方，例如日出、森林、花海、動物等等。
如何配色才好看？
想要有好看的配色，建議依循「60-30-10 黃金比例」。
主色 60 % 佔最大面積，輔色 30% 點綴，強調色 10% 吸引注意力。
色彩三大要素是什麼？
色彩三大要素包含：
1. 色相（Hue）：是什麼顏色，例如紅、藍、綠
2. 明度（Lightness / Brightness）：顏色亮不亮、暗不暗
3. 彩度（Saturation）：顏色濃不濃、灰不灰
色相決定是什麼顏色，明度決定亮暗，彩度決定濃淡。
什麼顏色看起來最舒服？
想讓顏色看起來舒服，可以多使用以下幾種配色：
1. 冷色系：像是綠色系、藍色系，都比較能減緩視覺壓力。
2. 大地色：低彩度的中性顏色，例如：米色、卡其、棕色、灰色。
3. 鄰近色：在色相環上選擇相鄰的顏色，例如：藍配綠、紅配橙。
為什麼我的配色看起來髒髒的？
配色看起來髒髒的，通常有幾個原因：
1. 顏色太純：嘗試降低彩度（飽和度），帶點灰階會比較有質感。（就是俗稱莫蘭迪色系）
2. 混入太多雜色：最多使用 3 個顏色，並提高主要顏色彩度，其他顏色則降低彩度，讓顏色間有點距離。
rgb 跟 cmyk 差在哪？
兩個是不一樣的色彩模型，差異如下：
1. CMYK：適用印刷，靠青色、洋紅、黃色、黑色四種油墨用疊色。
2. RGB：適用電子設備，透過紅、綠、藍三原色光疊加顯示色彩。
