Adobe InDesign 中的色彩漸層是一種填色，由兩個或多個顏色之間平滑混和而成，由一組沿著漸層色階分佈的色標控制，您可以在漸變面板(視窗 > 顏色 > 漸變)中編輯這些色標。 每個色標都包含單一顏色與位置，色標之間的空白由 InDesign 的轉譯引擎進行內插，產生與 CSS 的 linear-gradient() 或 radial-gradient() 輸出相同的逐像素混和效果。線性漸層沿著直線方向延伸，放射狀漸層則從中心點向外擴散，兩者皆能以命名色票的形式整齊地儲存在色票面板(視窗 > 顏色 > 色票)中，因此相同的漸層色階可在所有填色與外框間重複使用。由於印刷與螢幕轉譯共用相同的數學運算，只要在每個色標上維持相同的十六進位或 CMYK 值，您在 CSS 漸層產生器中預覽的顏色就能在 InDesign 中如實呈現。
先在瀏覽器工具中設計漸層，讓您能在實際套用至 InDesign 中的色階之前，並排比較多種變化，而且對於同一版面的任何網頁匯出，您都能取得可直接複製使用的 CSS 值。
InDesign 中的色彩漸層實際控制什麼
InDesign 的漸層並非帶有內建轉場效果的單一平面色;它是一組離散的色標，每個色標固定在色階上的某個百分比位置，色標之間的混和則由轉譯引擎負責處理。這與驅動 CSS 漸層的概念模型相同:無論是在 CSS 或 InDesign 中，每個漸層值實際上只是一個有序的「某位置 X 上的顏色」配對清單，而視窗、列印引擎或瀏覽器都在執行相同的工作，就是填滿色標之間的像素。
由於兩個工具遵循相同的結構，您可以在 CSS 產生器中以視覺方式設計整個色階，複製十六進位值與色標位置，然後在一分鐘內在 InDesign 中重建相同的外觀。InDesign 端提供可重複使用的色票、可跨文件搬移的命名資產，以及 CMYK 輸出;CSS 端則提供免費的變化、即時預覽，以及可直接貼上的網頁程式碼。兩者搭配使用，就能同時涵蓋兩種工作，而不必重複勞動。
線性 vs 放射狀:選擇適合版面的類型
線性漸層沿著直線方向延伸，您設定的角度決定顏色的流動方向。CSS 規範定義 0deg 指向方塊頂端，角度以順時針增加，因此 90deg 指向右側、180deg 指向下方、270deg 指向左側。InDesign 的漸變面板對線性色階採用相同的方向慣例，這表示在瀏覽器中以 135deg 設計的漸層，在 InDesign 中會呈現完全相同的方向。
放射狀漸層從中心點向外運作，預設的圓形會以圓形混和填滿元素，從內側色標淡出至外側色標。它們非常適合聚光燈、按鈕高光，以及柔和的暈邊效果。下表整理了各種類型通常最適合的用途，以及在決定之前值得注意的陷阱。
| 漸層類型 | 最適合用途 | 注意事項 |
|---|---|---|
| 線性(兩個色標) | 主視覺背景、區段分隔線、按鈕填色 | 在由左至右的版面中方向會被解讀為水平;針對堆疊內容請翻轉角度 |
| 線性(三個或更多色標) | 多頻段漸變、品牌色條、文字上的影像疊加 | 硬色點之間的色標可能出現色帶;將中間色標偏向 30–60% |
| 放射狀圓形 | 聚光燈、柔和光暈、暈邊邊緣、徽章背景 | 超過 80% 的色標會裁切至方塊邊緣;請將外側色標設為與背景相同的顏色 |
| 放射狀偏離中心 | 方向性光暈、產品強調、不對稱氛圍 | 偏離中心的淡出會與周圍構圖衝突;請在鄰近元素上搭配平面填色 |
使用色彩漸層產生器以視覺方式設計漸層
最快速鎖定顏色與色標位置的方法，是在提供即時回饋的瀏覽器工具中建立色階。色彩漸層產生器讓您選擇類型、設定角度、挑選每個色標顏色、拖曳色標到新位置，並在預覽看起來滿意後複製一份有效的 CSS 宣告。
- 選擇漸層類型 — 線性適用於方向性淡出，放射狀適用於由中心向外混和。
- 設定每個色標的顏色並拖曳其位置滑桿;視需要新增或移除色標，並調整線性漸層的角度。
- 檢查即時預覽，然後點擊「複製 CSS」以取得可直接貼上的 background: linear-gradient(...); 宣告。
每個色標位置會自動限制在有效的 0–100% 範圍內，而當您以拖曳方式重新排序時，工具會自動重新排列色標，因此無論如何編輯，輸出的 CSS 在語法上永遠正確。點擊「隨機產生」可取得您手動可能沒有挑選過的新組合，並可在決定採用之前並排複製多個變體。在工作過程中記錄色標百分比與十六進位值，會讓下一步 — 將相同的色階放入 InDesign 中 — 變成只是輸入的工作，而不是從螢幕上取色。
在 Adobe InDesign 中重新建立漸層
InDesign 的漸變面板與色票面板幾乎完整對應 CSS 模型，因此只要取得數值，您在瀏覽器中設計的色階就能乾淨地匯入。
- 透過視窗 > 顏色 > 色票開啟色票面板，然後從面板選單中選擇新增漸層色票。
- 在「新增漸層色票」對話框中，輸入名稱並從類型選單中選擇線性或放射狀，以符合您在產生器中挑選的類型。
- 點擊漸層色階下方以新增色標，然後雙擊色標以開啟顏色選擇器並輸入十六進位值，或將面板切換至 CMYK 以獲得印刷一致的輸出。
- 在色階下方水平拖曳每個色標以設定其位置;色階下方的百分比應與您在產生器中設定的位置相符。
- 對於放射狀漸層，請確認中心點位於物件焦點區域;對於線性漸層，請將色階角度設為與您在產生器中使用的角度一致。
- 點擊確定以將漸層儲存為色票，然後從色票面板將其套用至填色或外框。
- 若之後需要微調，請使用選取或直接選取工具選取物件，開啟視窗 > 顏色 > 漸變，直接在漸層條下方編輯色標。
編輯已儲存的色票會更新所有使用該色票的填色或外框，因此您在單一文件中所做的任何變更都會傳播至所有相符的實例。對於即將送印的版面，請從一開始就以 CMYK 建立色階，以便在各次打樣週期中維持一致的輸出，這與您處理任何其他印刷顏色的方式相同。
CSS 漸層色標如何對應至 InDesign 色標
CSS 漸層色標與 InDesign 色標共用三個參數:顏色、位置與順序。位置值在兩者中意義相同:0% 位於色階起點，100% 位於色階終點，兩者之間的任何數值代表該顏色在混和中出現的位置。
角度慣例也彼此對齊，因為兩個工具都是以邊界框頂端為基準、以順時針旋轉的方式，以度數描述方向。下表列出規範的 CSS 角度值與其在 InDesign 中對等的色階方向，讓您無需反覆嘗試即可轉換任何漸層。
| CSS 角度 | InDesign 中的色階方向 | 典型用途 |
|---|---|---|
| 0deg | 由下至上 | 日出光暈、垂直品牌色 |
| 90deg | 由左至右 | 區段標題、水平按鈕填色 |
| 135deg | 由左上至右下 | 對角橫幅、主視覺背景 |
| 180deg | 由上至下 | 作為填色的陰影、垂直內容區塊 |
| 270deg | 由右至左 | 由右至左版面、RTL 設計系統 |
兩個色標可以產生乾淨的雙色淡出。例如在 50% 處加入第三個色標，就能在色階中央保留品牌色，漸層產生器對照表以實例逐步示範。相同的技巧 — 在選定百分比處固定第三或第四個顏色 — 在 InDesign 中只需點擊色階下方，然後將新的菱形拖曳到您想要的位置即可達成。
何時以 CSS 優先的工作流程勝過單獨使用漸變面板
直接在 InDesign 中微調漸層對於單一填色來說沒問題，但當您想要比較十幾種變體、將設計交給開發人員進行網頁匯出，或與同事分享品牌色彩規格時，速度就會變慢。CSS 漸層產生器將這項工作轉化為三個可重複的步驟:挑選顏色、觀看即時預覽、複製結果。相同的顏色與色標接著會以命名色票的形式移入 InDesign，因此印刷與網頁輸出能在不重新取色的情況下保持視覺一致。
漸層會出現在現代介面設計的各種場景 — 主視覺與區段背景、按鈕與卡片填色、徽章、進度條、懸停狀態、能保持白色文字可讀性的影像疊加，以及裝飾分隔線 — 而且單一 CSS 屬性就能承載所有這些用途，無需外部檔案、建置步驟或廠商前綴。同一漸層的 InDesign 版本會以色票形式隨檔案搬移，只需一個編輯點就能一次更新所有位置。
針對冗長的文件，請將漸層儲存為命名色票，並在所有填色中引用;針對同時會成為網頁的文件，請複製 CSS 宣告並貼到您的樣式表中。兩種路線都從同一組色標出發，一旦您手邊有了顏色與位置，任何一端都不需要猜測。
如果您正在權衡各種選項，產生 CSS 核取方塊前要比較的項目對此有詳細說明。