多數人對漸層的第一印象，是設計軟體裡那個隨手一拉就能生成的漸層色帶——看起來吸睛，套到自己的版面上卻常常顯得俗氣、粗糙，又說不出問題出在哪裡。傍晚的天空給了一個很好的對照組：橙紅一路淡成粉紫、再沉進靛藍，中間找不到一條突兀的接縫，是因為每往下一階，色相只挪動一點點，亮度也跟著慢慢往下降。
把這個邏輯搬回螢幕，讓漸層做起來沒質感的，通常不是「用了漸層」這件事本身，而是色相一次跳太遠、飽和度催到底，或是角度選得毫無理由。漸層配色近幾年幾乎出現在每個網站主視覺、App 介面與品牌識別裡，用得順眼，畫面就多一層光影的深度；用不好，就成了這篇文章要拆解的那種粗糙感。
接下來會先拆三個最常見、讓漸層顯得俗氣的成因，再回到色相怎麼選、角度怎麼抓，最後補幾個定案前該檢查的實務眉角。先從漸層配色是什麼、有哪幾種基本形式講起。
漸層配色是什麼？
漸層配色，指的是讓色彩從一個色相或明度平滑過渡到另一個色相或明度的處理手法，依過渡方式常見分成三種：
- 線性漸層（Linear Gradient）：顏色沿著一條直線方向平移過渡，是網頁與 App 最常見的形式，方向可以是水平、垂直或任意角度。
- 放射狀漸層（Radial Gradient）：顏色從一個中心點向外一圈圈擴散，常用來做光源感、聚光燈效果或圓形按鈕的立體感。
- 角度漸層（Conic Gradient）：顏色沿著一個中心點旋轉一圈完成過渡，比較少見，適合做色輪、進度指示這類需要「繞一圈」概念的元素。
跟純色塊或直接跳色相比，漸層多給了兩樣東西：一是光影帶來的立體深度，二是顏色之間慢慢轉變、比較有情緒感的過渡，這也是為什麼設計者一直很愛用它。只是這股柔和感一旦抓不好，很容易就顯得沒質感，這也是接下來要拆解的重點。
為什麼漸層配色容易做得沒質感？
漸層之所以常被嫌俗氣，原因幾乎都逃不出這三種，而且往往同時發生。
原因一：色相跨度太大，中段變成一團濁色
最常見的第一個原因，出在色相選得太遠。色輪上兩個顏色的位置越是接近正對面，也就是互補色的關係，直接把它們拉成漸層，中段就越容易出現一團說不清楚是什麼顏色的濁灰。Supercharge Design 在拆解漸層設計時就指出，逆著色輪做搭配，會讓漸層中段出現「muddy（濁）」且「dirty（髒）」的觀感。
這正好呼應開頭那片傍晚的天空，自然的過渡之所以耐看，是因為橙紅到靛藍中間經過的，都是色輪上彼此相鄰的顏色，沒有一步直接橫跨到對面去。
原因二：飽和度太高，看起來刺眼又粗糙
飽和度沒收斂，是第二個容易讓漸層顯得沒質感的原因。高飽和度顏色本身視覺衝擊力就強，拉成漸層等於把這股衝擊力延展到整片畫面，看久了容易顯得刺眼、粗糙。
Supercharge Design 的說法是，過度飽和的顏色做成漸層會讓畫面顯得「aggressive（具攻擊性）」又「amateurish（不夠精緻）」，反而是稍微降低彩度、帶一點灰階感的漸層，才會讓人覺得「relaxed and intentional（放鬆且有意圖）」，也就是質感的來源。實務上的做法很單純，把同一組色相的彩度往下調個一兩階，通常就能明顯緩和那種刺眼感。
原因三：整頁到處都是漸層，反而失去重點
第三個原因跟顏色本身無關，是用量沒有節制。UX Collective 一篇專門討論漸層的文章提醒，不要只是為了用漸層而用漸層，用之前該先問，這個漸層有沒有在強化設計本身要傳達的意義，還是只是多出來的雜訊。
如果每個區塊、每顆按鈕都套一次漸層，畫面會失去視覺焦點，讀者反而不知道該先看哪裡。比較穩妥的做法，是只把漸層留給少數關鍵區域，像是主視覺、行動呼籲按鈕、Hero 區塊，其餘版面用留白或純色平衡，讓漸層真正出現的地方才顯得出重量。
漸層配色怎麼選色相、抓角度才自然？
知道問題出在哪之後，接下來就是實際動手的部分，色相怎麼選、角度怎麼抓，是決定一組漸層耐不耐看的兩個關鍵動作。
色相要選相鄰的，不要選色輪對面的顏色
色輪上彼此相鄰的顏色，共享著相近的底色調，所以順著相鄰色去做漸層，過渡自然到幾乎看不出接縫，這就是類比色（Analogous）的調和邏輯。舉例來說，暖色系從橘紅一路過渡到黃橙，兩者本來就帶著相近的暖度，銜接起來自然不刺眼。
相對地，色輪上位置正對面的互補色（Complementary）反差最大，拿來做跳色、強調重點區塊很搶眼，但如果直接把兩個互補色拉成漸層，就會撞上前面說的原因一，也就是中段那團濁色。簡單來說，想跳色就找互補色，想做順眼的漸層就從相鄰色下手，兩件事不要混為一談。
同一色相、只調明度和彩度最保險
如果還沒有把握判斷色相之間的距離，最保險的做法是乾脆不換色相，只在同一個色相裡調整明度（亮暗）與彩度（純度），這就是單色調和（Monochromatic），也是新手最不容易出錯的路徑。
舉例來說，從深藍過渡到淺藍，兩端本來就是同一個色相家族，不管怎麼調都不會撞出突兀的中間色，很適合需要沉穩、專業感的品牌視覺。代價是變化幅度比較小，做不出多彩繽紛的效果，但換來的是幾乎零地雷的穩定度。
過渡色放在中間，避免兩色直接生硬相接
只用起點和終點兩個顏色去做漸層，中間那一段常常會出現分界過於死板、或前面提到的濁灰區。Supercharge Design 給的解法很直接，在兩個顏色中間再加一個過渡色，等於多開一個中繼站，繞過那片容易發灰的區域。
這其實就是開頭夕陽類比的原理，傍晚的天空從來不是只有橙紅跟靛藍兩種顏色，而是中間還經過粉紫、玫瑰金這些過渡色階，才會顯得那麼細膩。色相跨度稍微大一點的組合，尤其需要多這一道手續，兩色直接拉，通常會生硬；中間補一色，轉換立刻順暢很多。
過渡角度要呼應版面，不是為轉而轉
漸層的方向同樣會影響觀感，不是隨便挑一個角度轉一轉就好。垂直方向（由上而下或由下而上）的漸層，給人的感覺比較傳統、經典，適合強調穩重感的版面；水平方向的漸層則顯得動態、有邀請感，比較容易帶動視覺往橫向移動；斜角漸層又比前兩者多一分自然、有機的氣息，常見於想強調活力或流動感的設計。Supercharge Design 針對這三種方向的觀感差異也有類似的整理。
選角度的時候，該問的不是「這個角度好不好看」，而是「這個角度有沒有呼應版面的閱讀動線」，由上而下的漸層搭配由上而下的資訊層級才順暢，橫向漸層放進一個內容由左讀到右的版面，方向感才不會互相打架。
漸層配色定案前，這幾個實務眉角不能漏
色相跟角度抓對之後，定案前還有幾個容易被忽略的實務問題，要檢查過一輪才算完工。
文字疊在漸層上，對比度要看最暗的那一端
如果漸層上還要疊文字，對比度不能只檢查漸層最淺的那一端。漸層本身深淺不均，文字如果剛好壓在顏色最深的區域，就算漸層淺端的對比再漂亮，深端一樣可能讀不清楚。
正確的做法是用漸層裡對比度最低的那個位置當基準去檢查，而不是挑一個最好看的位置測一測就交差。W3C 制定的無障礙網頁內容規範（WCAG）對文字對比度訂出明確門檻，一般文字至少要達到 4.5:1，字級較大的標題文字（約 18 點以上，或 14 點加粗）則放寬到 3:1。換句話說，漸層背景上的文字要多深多淺才安全，答案不是「看整體平均」，而是「連最暗的那一端都要過關」。
螢幕上很滑順，印出來或轉存後為什麼會出現色帶（banding）？
螢幕上看起來滑順的漸層，印出來或轉存成大尺寸圖檔後，卻常常冒出一階一階看得出邊界的色帶（banding），原因多半出在兩個顏色明暗差異太大、漸層拉的範圍又長。Adobe 官方在說明 Illustrator 列印漸層時就提到，顏色差異很深，尤其是接近深色到接近白色這種極端組合，又把漸層拉得很長的時候，最容易出現色帶。
建議的做法是把漸層長度縮短，或是像前面「中間加過渡色」的技巧一樣，在兩端之間多補幾個色階，讓每一階之間的差異變小。碰到列印或轉存還是出現色帶，也可以檢查輸出設定裡有沒有開啟漸層列印相容或抖動（dithering）選項，讓軟體用更細的階調去模擬過渡，肉眼就比較看不出斷層。
AI 配色工具能幫忙起草，但微調還是要靠人
現在不少設計軟體已經有 AI 輔助配色功能，像 Adobe Illustrator 的「生成再配色（Generative Recolor）」功能，就能靠一句文字提示或指定的調和邏輯，幾秒鐘生成好幾組配色草案讓你挑選，也可以加入指定色再讓 AI 圍繞這幾個顏色延伸變化。用來當起手式、快速探索方向很有效率，能省下大量手動試色的時間。
不過 AI 產出的漸層，色相跨度合不合理、飽和度有沒有超標、角度有沒有呼應版面，並不會自動符合前面幾條判準，這幾組草案終究只是起點，拿到手之後還是得照色相相鄰、飽和度收斂、角度呼應版面這幾條原則自己微調一輪，不能整組直接套用上線。
深色模式與不同裝置，都要拿實機測過一次
最後一個容易漏掉的環節，是漸層在不同螢幕上看起來未必是同一回事。同一組漸層色，在深色主題背景下，或是色域、亮度規格不同的螢幕上顯示，呈現的深淺與飽和感都可能有落差，尤其深色模式底下，原本在淺色介面上顯得柔和的漸層，換到深色背景可能突然變得刺眼或發灰。
設計軟體裡的預覽畫面終究只是模擬，定案前最好拿實際裝置，像是手機、平板、不同亮度的螢幕，實機檢視過一輪，而不是只信任軟體裡看到的樣子。
回到開頭那片傍晚的天空，它耐看，不是因為橙紅跟靛藍這兩個顏色本身特別漂亮，而是因為它們之間的「關係」處理得夠細膩，色相夠靠近、過渡夠多階、色彩用得夠克制。漸層配色也是同一套邏輯，不是挑對兩個好看的顏色就結束，而是選對它們彼此之間怎麼銜接、拉到多長、放在版面的哪個位置。AI 工具或許能讓配色的起手式變得更快，但那份「耐不耐看」的判斷力，終究還是得靠設計者自己一次次調整，慢慢養出來。