漸層調色盤是一組兩個或以上的顏色，用於在 CSS 的 linear-gradient() 或 radial-gradient() 宣告中平滑地融合;最好的漸層通常由飽和度與亮度相近的顏色所組成，這樣瀏覽器在兩者之間進行內插時，就不會在過渡處產生混濁的灰色。當色相取自同一個色溫家族時——例如暖橘漸變到深紅，或是冷藍漸變到紫羅蘭色——中間的顏色會保持飽滿且符合品牌調性。一個設計良好的調色盤也很精簡:兩個色標能給出乾淨的漸層，三個色標可讓你在中點鎖定一個品牌色，而超過四個色標往往只為多爭取幾個像素的色彩，卻犧牲了可讀性。一旦選定調色盤，實際的 CSS 就只是一個 background 宣告，因為瀏覽器是以程式碼而非圖片的方式來繪製漸層，所以它能在任何元素尺寸或螢幕解析度下都清晰呈現。困難之處通常不在語法——而在於一開始就該決定哪些顏色適合放在一起。
什麼讓漸層調色盤看起來漂亮
大多數失敗的漸層，問題出在中間而非兩端。瀏覽器會以紅、綠、藍三色通道的線性內插來填滿兩個色標之間的空間，所以當一個色標高度飽和、另一個較為低調時，中點就會偏向中性的灰色。選擇飽和度相近的顏色搭配，能讓中間區段與兩端保持在同一個色調範圍內。
色相的鄰近性與飽和度同樣重要。色輪上彼此靠近的兩種顏色——例如藍與紫，或黃與橘——會融合成一段可信的過渡，因為眼睛會把它讀作同一色相的偏移。色輪上相對兩端的兩種顏色——例如純青色與純紅色——會產生鮮豔但視覺上不穩定的中點，常會在元素中央讀成一條灰色或褐色的色帶。
在挑選調色盤靈感時，色溫是最直覺的捷徑。暖色對暖色的調色盤(橘、紅、洋紅)給人充滿活力與編輯風格的感覺;冷色對冷色的調色盤(藍、青綠、紫羅蘭)則更為沉靜、技術感。在冷色調色盤中混入一個暖色色標——或反之——會形成視覺焦點，這正是行動呼籲按鈕或精選徽章所需要的。
七組可作為起點的漸層調色盤
下面的調色盤是起點，並非完成的設計。每一組都是經過測試的組合，在按鈕、卡片、區塊尺寸下都能站得住腳;每一對十六進位色碼都可以直接貼到產生器中，在實際出貨前先看到渲染結果。只要微調幾步色相或飽和度，同樣的概念就能變化出數十種版本。
| 調色盤 | 色標 (HEX) | 最佳用途 |
|---|---|---|
| Sunset Glow | #FF8C42 → #FF3C38 | 主視覺橫幅、宣傳頁首 |
| Ocean Drift | #00B4DB → #0083B0 | SaaS 著陸頁、儀表板 |
| Violet Haze | #8E2DE2 → #4A00E0 | 產品發表頁、應用程式商店 |
| Mint Pulse | #00B09B → #96C93D | 健康、健身、生態品牌 |
| Pastel Dream | #FFDEE9 → #B5FFFC | 柔和介面、引導畫面 |
| Midnight Steel | #232526 → #414345 | 深色模式介面、頁尾區塊 |
| Citrus Pop | #F7971E → #FFD200 | 折扣徽章、提示、行動呼籲 |
其中兩列刻意採高飽和度(Citrus Pop 與 Violet Haze)，其餘則維持較平靜的範圍。較平靜的調色盤因為位於文字背後，所以較適合用於背景;飽和度高的則最適合用於按鈕或徽章尺寸，在不壓過整個頁面的情況下承擔視覺重量。
在 CSS 中建立漸層調色盤
選定調色盤後，要將它轉成 CSS 宣告，在漸層色彩產生器中只需三個步驟。這個工具完全在瀏覽器中執行，不會上傳任何資料;它輸出的程式碼是一個 background 值，可以貼進任何樣式表中。
- 選擇漸層類型。選擇 Linear 可得到沿著你設定角度的方向性漸層(0deg 朝上，90deg 朝右，180deg 朝下)，或選擇 Radial 得到由中心向外擴散的混合，適合聚光燈、按鈕光暈與柔和的暈影效果。
- 設定色標。為每個色標選擇顏色，並將其位置滑桿拖曳至 0% 到 100% 之間。兩個色標可產生乾淨的雙色漸層;加上第三或第四個色標，可將某個顏色固定在特定中點。可依需要新增或刪除色標，並為線性漸層調整角度，直到光線方向與你的版面配置相符。
- 預覽並複製。即時預覽會內嵌顯示實際渲染結果。看起來滿意時，點選 Copy CSS 即可取得完整宣告——類似 background: linear-gradient(90deg, #FF8C42, #FF3C38);——可直接貼入你的樣式表。
此工具會自動依位置重新排序色標，並將每個值限制在 0–100% 範圍內，因此即使你把色標拖得亂了順序，它產生的 CSS 永遠語法正確。沒有需要煩惱的驗證步驟，也沒有圖片匯出——只需要一個 CSS 屬性、零次網路請求。
線性或放射:挑選正確的混合方式
這兩種 CSS 漸層類型解決不同的設計問題，選錯類型正是漸層在實際上線後感覺不對的最常見原因。下表摘要了每一種在特定版面中的適用情境。
| 屬性 | 線性漸層 | 放射漸層 |
|---|---|---|
| 方向 | 沿著固定角度 | 從中心點向外 |
| 形狀 | 矩形色帶 | 圓形或橢圓形混合 |
| 最適用於 | 滿版區塊、按鈕、卡片 | 聚光燈、光暈、暈影 |
| 風險 | 角度錯誤時看起來扁平 | 在寬元素上可能裁切過於突兀 |
| 典型角度 | 90deg(左 → 右)或 135deg(對角) | 預設中心，無角度 |
線性漸層是主視覺區塊、卡片背景，以及任何填滿矩形區域之元素的預設選擇。當你需要一個視覺焦點時，放射漸層就能發揮價值——例如產品圖後方的柔光、價格卡上的圓形亮點，或是將主視覺圖邊緣漸隱為黑色的暈影。想看更深入的並列比較，可參考線性與放射漸層指南，其中涵蓋了具體的版面情境。
這些調色盤的應用場合
漸層在現代介面設計中無所不在，因為它能在不增加素材的情況下增添層次。同一組調色盤可在整個專案中重複使用，只需改變角度、色標數量或方向。
- 主視覺與區塊背景。在 90deg 或 135deg 的寬版線性漸層，可立即為頁面設定一個方向感。
- 按鈕與藥丸形元素。在按鈕表面套用短短的線性漸層，能在不加陰影的情況下，增添觸感與立體感。
- 卡片與徽章。細微的粉彩色混合，適合標籤、狀態藥丸與價格分層。
- 圖片遮罩。由透明漸變為深色的線性漸層，可讓白色文字在任何照片上都保持可讀。
- 進度條。在填色條上使用多重色標的漸層，能讓啟用狀態顯得更有活力。
- 滑鼠移入狀態。在 hover 時將平面背景切換為漸層，不需任何轉場時間就能增添動感。
由於輸出就是純 CSS，以上所有用法在所有現行瀏覽器中皆可運作，無需廠商前綴、無需外部函式庫，也無需建置步驟。一個 CSS 屬性、零次網路請求，且漸層在任何元素尺寸或螢幕解析度下都能清晰呈現。
避免多重色標漸層中混濁的中點
一旦開始加入第三或第四個色標，中點本身就成為設計。將一個色標精準地固定在 50%，是在漸層中央釘住品牌色最乾淨的方式——例如在一個原本為暖色的漸層中，將標誌綠固定在 50% 位置。少了這個中間色標，綠與橘就會內插成混濁的黃色色帶，破壞閱讀。
有兩個實用的原則能讓多重色標的調色盤保持乾淨。第一，除非你刻意要製造焦點對比，否則所有色標應維持在同一個色溫家族中。第二，以實際的元素尺寸而非 100% 來預覽——在 1200px 主視覺預覽中看起來很棒的調色盤，放到 32px 按鈕上可能會出現像素斷層。漸層色彩產生器提供內嵌預覽，讓你在作業過程中就能看到實際的渲染結果。
最後，當你沒有靈感時，可以善用 Randomize 控制項。隨機產生的漸層很少是完成品，但它能讓你快速發現一些原本不會手動嘗試的色彩關係;而且產生出來的仍是有效的 CSS，你可以貼上、出貨，並對照一開始的調色盤靈感進行修改。
如果你正在權衡選項，從色彩名稱產生調色盤:一套工作流程對此有詳細說明。