Hello，我是 Samuel 🤣
這幾天在整理一些 Sketch 的設計資源，同時關注一下有沒有什麼新的好用工具！無意間發現一個很有趣的 Sketch Plugin → Chromatic Sketch，這是一個透過 LAB 色彩模式來產生「符合人類視覺感知（Perception）」漸層色的好用工具，一用之下發現效果驚人啊 😍，Github 文檔的說明上也相當明確的表示這個套件能夠幫助各位設計師…
Create good-looking and perceptually uniform gradients and color scales (using Chroma.js and the Lab color space)
原本以為 Chromatic Sketch 只是另外一個和 coolHue 一樣，單純提供許多設計師大大們配好的漸層模板、讓你快速無腦使用的插件，但仔細一讀發現這個插件背後其實大有學問（笑），這就很有趣了🤩
Chromatic Sketch 的使用方式非！常！簡！單！這套工具只有兩種模式可以使用，分別是「Fix Gradient」和「Color Scale」。
Fix Gradient
在 Fix Gradient 中有四種色彩模式可以選擇，分別是 Lab、Lch、HSL、RGB，基本上 RGB 就是我們在 Sketch 中使用的色彩模式，NEW 和 OLD 的狀態應該要完全相同；切換到其他三種色彩模式你應該都可以很清楚的看出漸層在視覺上有著明顯的差異。
Color Scale
Color Scale 模式中你可以選擇開始和結束的顏色，透過改變色彩模式、增加 Scale 階層和調整底下漸層的錨點位置來做出你想要的漸層樣式。
蛤…就這樣而已？別覺得功能只有這樣好像沒什麼用處，先讓我們來看一個「使用 RGB 和 LAB 設計漸層」的明顯差別：
先說結論，Goodbye RGB, Hello LAB！
透過上面的案例，我想各位夥伴應該都有注意到 RGB 漸層過渡區的顏色似乎不是那麼的鮮豔（彩度大幅下降？！），甚至有灰階增加進而導致視覺上髒髒的感覺。相比之下，LAB 的漸層過渡就顯得相當自然。不過這到底是為什麼呢？
首先，我們先來瞭解一下 RGB 色彩模式，RGB 是被創造來讓電腦在不做複雜運算的狀況下產出顏色的一種色彩模式，根據 Wiki 上面所述「RGB is a convenient color model for computer graphics because the human visual system works in a way that is similar — though not quite identical — to an RGB color space.」，就是那個 “ though not quite identical”，產生了那上面漸層中視覺效果上的不平衡（落差）。除此之外，Adobe 正持續的開發另外一種色彩模式 Adobe Wide Gamut RGB 來改善這樣的狀況。
這篇文章中用了一個問題來做說明 → 我們該如何透過 RGB 產生一個保持彩度和色調，但明度 50 % 的顏色呢？
或許最簡單的方式是把…R、G、B 的三項數值都除以 2，看看下面的結果，這樣的調整讓後者除了彩度下降之外，還大幅度的增加了顏色的灰色調，這也是為什麼再漸層的過渡區會讓視覺上產生不協調的主要原因。原文中的範例：
rgb(209, 236, 252) → rgb(105, 119, 127)
接著，讓我們改成調整 HSL (Hue, Saturation, Lightness) 的色彩模式來達到這個效果，我們可以藉由直接降低 HSL 中 Lightness 50% 來解決這個問題嗎？以下圖為例，這樣的 HSL 調整讓後者顏色的飽和度明顯的超過原色，同時色相的部分似乎也產生了些微的偏移。
hsl(202, 1, .9) → hsl(202, 1, .45)
最後我們來看到 LAB (Lightness, Position between red/green, Position between blue/yellow) 色彩模式的調整結果，它的效果相比於前兩者實在是非常優秀。
lab(92, -6.5, -12) → lab(46, -6.5, -12)
不同於 RGB 色彩模式，LAB 透過「預測哪些光譜功率分布會被感知為相同的顏色」來模擬設計人眼的色彩回饋，因此兩個不同 LAB 顏色的差異，理論上會等價於在「視覺上感知到的兩個顏色差異」，LAB 的目標在於視覺感知上面的均勻性，通過修改 A 和 B 量值的輸出色階來做精確的顏色平衡，或使用 L 量值來調整亮度對比（瞭解更多可以參考 Wiki）。
最後補充一點小資源：
- 想要整合 LAB 色彩模式到你的任何開發專案裡面！chroma.js 這個開源 js 模型可以直接使用。
- 想要快速透過 css 整合 LAB 色彩模式到你的前端專案裡面，chromatic-sass 可以讓你用像是底下的語法使用 Chrommatic Gradient：
.element {
background-image: chromatic-gradient(to right, blue, red);
}3. 耶！讓我們一起嘗試在專案中運用 LAB 到漸層上面吧 😍
如果喜歡這篇文章，反正鼓掌不需要花錢🙏，用力地按下50次鼓掌給予一些鼓勵吧！您好，我是Samuel，目前是一位軟體工程師和介面設計師，TEAMUP 和 Kapi 的共同創辦人;正在努力培養跨領域的思維，認為分享和傳遞資訊這個行為能夠改變整個環境與業界氛圍。熱愛設計，技術實作，創業和攝影，有任何想法或者合作的機會都歡迎一起喝杯咖啡。個人網站：www.samuel-kao.com
個人臉書：https：//www.facebook.com/citysite1025
TEAMUP 社群：https://www.facebook.com/groups/201780004078051/
