使用這些漸層產生器和 Figma 套件，避免做出中間髒髒的漸層色

前陣子在社群看到一個平面印刷設計類的討論，大致一個透明漸層與黑色底色疊起來之後，中間看起來霧霧濁濁髒髒的，要怎麼解決?
原圖比較複雜，我另外做了一張示意圖

這是一個牽涉用 Adobe illustrator 做平面設計、CMYK油墨印刷、紙張材質的問題，
好像每隔一陣子就會出現一次，
這次的可能情況比較單純(底色是黑色K100。而不是其他顏色)，修改與示範相對容易，所以討論比較熱烈。

但就算用了一些方法把濁濁的顏色變鮮豔，
還是有機會發生螢幕顯示得出來，便宜的合版印刷印不出來的情況。

使用漸層不是想像中那麼簡單，
在電子螢幕上的設計，例如網頁、APP，也會有類似的問題，
但是跟平面設計有不同解決思路和後遺症。

例如下面兩組漸層，頭尾是完全一模一樣的HEX色碼，但是看起來的感覺不太一樣對吧?

漸層中間灰灰髒髒的問題，每隔幾年前就有人提出，
因應每個時代主流的工具、3C軟硬體環境不同，解決方案也一直推陳出新，
以下就來分享一下。

死亡灰色區域

印刷設計可能會有紙張或印刷材質本身就有顏色，用透明漸層等一些技巧來露出原本的顏色，
設計階段用一些方式模擬出效果去提案，完稿送印時又有另一份稿。

而顯示在電子螢幕上的設計，可以不用像討論區的文章那樣疊兩層，只要在區塊拉個漸層，就可以直接重現問題了。

談到漸層色的中間變髒，就一定要提到 Erik D. Kennedy，
這位美國的 UI/UX 設計師在幾年前提出一個 “gray dead zone” 的概念，
當使用兩個互補色來做漸層時，中間靠軟體自動產生的色階，
很容易因為跨過色盤中間零飽和度的區域，而產生看起來髒髒的顏色。
(上面的連結裡面有圖片說明)

如果要解決的話，當然不是把整條漸層直接加個調整圖層，然後直接把飽和度拉爆，
因為這樣漸層頭尾的顏色就不對啦!

合理的解法是如果碰到漸層頭尾的顏色剛好在色環的對角時，
人工手動在漸層的兩個顏色中間多放幾個點，
而且挑的顏色要繞過死亡灰色區域。
就能做出中間不會感覺濁濁，鮮豔度媲美長輩圖的漸層。

網頁漸層工具

了解原因對解決問題有幫助嗎? 可能沒有，
人工幫漸層多加幾段顏色，用肉眼看，不用知道原因也能解決問題。

但是大家不見得都像美國設計師有那個美國時間，
難道客人每次想要改顏色，可憐的基層工作人員又要去逐一調整那一堆漸層中間節點的色碼嗎?

那位美國設計師當然也不像某些政客一樣只會打嘴砲，只會提出問題，但沒有解決方案?
Erik D. Kennedy 做了一個新的漸層色工具 VIVID GRADIENT GENERATOR TOOL

同樣給定頭尾色號，然後選擇上方的色彩空間模式(LCH/HSB/HSL)，就會產生大約有 8 段分階的漸層色碼。

另一個類似概念的工具是 Josh Comeau 的 CSS Gradient Generator, Beautiful, lush gradients

一樣給定頭尾色號，選擇除了 LRGB 以外的色彩空間模式(LCH/HSB/HSL)，就會產生大約有 10 段分階的漸層色碼。
在他的部落格文章內(產生器右上角的 read the blog post)也有概述為什麼要計算混色。

有特別調色跟原始漸層的差異大概如下圖:

指定一模一樣的頭尾色號，但是上方有用工具調過的，看起來比較亮麗，下方則是普通的漸層。

Figma 套件

上述工具都是產生 CSS 碼、色碼、或是 SVG，
如果工作流程超出這些範圍，要把 8~10 個色碼一個一個貼上到使用的軟體裡，想必非常麻煩。
如果是使用 Figma 做設計，已經有相關的 plugins 擴充套件來處理那個漸層中間髒髒的問題。

Chromatic Figma

Petter Nilsson 的 Chromatic Figma 擴充套件。
在建立好漸層時，可以叫出套件選單內的 “Fix Gradient”，

(還會貼心列出原始顏色和調整過的顏色做比較)

然後選擇 LCH 色彩空間或是其它的，挑一個順眼的漸層。

但實作問題來了，如果漸層的頭尾有換顏色時，中間的顏色不會自動重新計算，
必須要自己先把中間產生的那些舊色碼全部手動刪掉，
用 “Fix Gradient” 重新產生漸層分階……

Vivid Gradient: beautify your gradient

另一個也能派上用場的是 NOWORK 的 Vivid Gradient: beautify your gradient 也是解決這個問題的漸層工具之一。

用法差不多，在建立好漸層時，可以叫出套件，然後選擇調整漸層。

Figma 的套件介紹頁的封面圖沒有真的把它的特色表現出來
除了色彩空間模式，還可以選擇中間自動生成的階數，可以設成 3~20 階。

漸層頭尾換顏色的話，一樣是要手動刪掉再重新生成。

LCH

還有一個 Nikita Antonov 的 LCH
但是這個不是單純給定頭尾色號然後自動插補階的傻瓜式漸層工具，比較像色盤擴充工具。

要先在漸層中間自己多拉幾階，
然後重新用這個套件的 LCH 色盤去一一選顏色，調漸層中間顏色的 Chroma (彩度)和 Hue (色相)值。
避免用傳統的 LRGB 色盤，很容易跑到一大塊灰灰的地方。

CSS 對 LCH 的支援度

從前用 RGB，想要把顏色調暗一點，還要想說紅綠藍每個 channel 比例要多少才能混合出想要的顏色。
如果能在 CSS 中直接使用 LCH 色碼，就可以更接近人類直覺的調整一個顏色的亮暗、鮮豔度、色相，豈不美滋滋? 但是在現代瀏覽器環境與開發工具上卻是窒礙難行。

查閱 Can I Use 對於 LCH and Lab color values 的瀏覽器相容性。
必須要版本滿新的 Chrome 116、iOS Safari 15, Firefox 113 起，才開始支援諸如這種寫法 background:lch(53.2%, 104.6, 40.0);。
雖然 LCH 或 lch 打大小寫都能顯示，但是 Firefox 118 跟 Safari 卻要這樣打 background:lch(53.2% 104 40);(中間不加逗點)才行，
Google Chrome 是加或不加逗點都能用。

TailwindCSS 3.3.3 的話，光是用 from- to-，中間也不會自動補色階，
想要用 arbitrary values 硬上 from-[lch(53.2% 104 40)] 或 from-[lch(53.2%,104, 40)] 也是都跑不出來。
目前看起來主要只支援 color name, rgb, rgba, hsl 四種。

其他現實問題

記得多年以前也看過電繪圈在討論避免調出濁濁的顏色，還有電繪軟體跟一般影像處理軟體(如PS)的預設色盤的差異，但一時找不到，算了。

APP 工程師或網頁工程師拿到設計稿，
如果看到”雙色”漸層中間還分了8~10階，也不要一驚一咋的，
嘟囔著說這樣變數要怎麼宣告? 可閱讀性、維護性、leetcode 沒有這題之類的，讓工作空間充滿了快活的空氣。

上述工具的主要解決思路，都是在兩個漸層色中間多加幾段，差別只在是要手動加還是自動加。

漸層不是這麼簡單的玩意，
就算用了上述工具，解決了漸層髒髒的問題，
但也是做稿的時候自爽。

一旦存成 JPG 點陣圖，
或是用各種方式在使用者的裝置上顯示，
還會發生”漸層顏色不連貫”的問題，例如以下狀況:
– 圖片從設計軟體轉存的時候，壓縮太多(圖片品質設太低)，即使圖片小了，網頁開啟速度是快了，可是圖片效果很差。
– 圖檔天生格式不支援，像 GIF 動畫只有 256 色，顯示漸層絕對非常容易看到斷層，可以改用 APNG 或 WEBP，但是這又有其他問題，例如有些 CMS 系統沒有專門為影像繪圖設計，上傳會動的 APNG 或 WEBP，可能會被壓縮成不會動的圖片。
– 圖片傳到網路上的話，勢必會被各大社群網站、APP、CMS 系統的圖片壓縮演算法荼毒。
– 使用者的螢幕比較差(例如很便宜的電腦螢幕、手機行續約送的0元電子垃圾手機)，沒有 10bit 也算了，明明規格標 8 bit。顏色顯示還是罄竹難書。
– 用不是”螢幕”的東西來顯示(例如便宜的投影機)。

都很容易會造成最終像下圖的情況，跑出一堆 Color Banding

延伸閱讀

• The "Gray Dead Zone" of Gradients | CSS-Tricks
• Design better gradients — Dos and Don’ts – Nick Devashvili 同樣提出了漸層中間補色的概念，只是沒有 gray dead zone 這麼強烈，文中稱為 greyish color。
• Make Beautiful Gradients in CSS, with linear-gradient, radial-gradient, or conic-gradient – Josh Comeau
• WHY THIS GRADIENT GENERATOR IS BETTER THAN OTHERS