CSS中有趣的顏色 🎨
不管是前端工程師、網頁及介面設計師，在設計開發中一定都會碰到 CSS 中的顏色，我們大多都是直接去採用設計師或工程師的要求，去給予對應的色碼來開發，鮮少去探索不同色彩系統的差異，今天就來一起聊聊這些有趣的色彩吧！
🪄 Agenda
- 在 CSS 中定義顏色
- HSL 的優缺點
- 新的色彩格式：LCH, LAB 🎉
如何在CSS中定義顏色？
這邊列舉了幾個最常見使用的色彩格式：RGB, HEX, HSL，無論我們使用哪種色彩定義法，它都是處於在「sRGB」這個色彩空間的範圍內，這種色彩空間被廣泛使用在顯示器、印表機、以及網頁開發。
RGB:
大家都知道 RGB 就是一種「加法混色」的方式，三個字母分別代表 紅, 綠, 藍 的三原色，各色共有256個值，0就是最少，最大的值就是255，如果超過就會一律以255來計算。
HEX:
最常見的色彩定義寫法。HEX 就是 hexadecimal 的簡寫，也就是顏色的「16進位表示法」，它的成分就是三原色 紅, 綠, 藍，每個顏色各佔有兩個位置，因此共有六碼(加入透明度就是8碼)。它因為代碼較短而受歡迎，能夠方便地複製它到編輯器中。
HSL:
比起上述兩種色彩，我們比較少使用到 HSL。它的三個字母各表示 Hue(色相), Saturation(飽和度), Lightness(亮度)。在國外其實有不少設計師推崇這種色彩寫法，因為：
HSL 比起 RGB 更為直覺以及人性化，我們能直接透過字面表示來猜測顏色。
真的嗎？先來看一下這張圖：
這裡有兩個藍色，右邊的藍色比左邊的藍色顏色更深一點。你知道要如何在不打開色碼盤的情況下找出右側顏色的色碼？
你可能想到，能用 CSS filter 屬性去調整 brightness，或是用 opacity 去調整透明度，甚至用 JS 去寫。但你也會發現，右邊只是比左邊還要深一點點的藍，但我們卻無法找出兩者色碼的關聯性。因此，其實要通過這種 HEX 色彩來猜測顏色是相當困難的。
那 HSL 呢？
回來看看 HSL，剛剛有提到它的字母各代表的意思，並且以 %數 來表示。
首先是 Hue (色相)，從圖中可以看到從0度開始為紅色，橙色黃色以此類推像彩虹一樣轉一圈，快速記憶大概就是：0處是處於紅色，綠色位於120度，藍色位於270度，紫色位於330度，只需花點時間記住每種顏色在色輪上的位置，這就能夠幫助我們快速調配出顏色。
接著是 Saturation(飽和度)：0度就表示該顏色完全去飽和、呈現暗灰色，這意味著混合中根本不存在我們的顏色。而100% 飽和度是所選顏色的最純的形式。
最後 lightness(亮度)：0度是全黑，100度是最亮，也等同於純白色。這表示我們如果要「最好的表示顏色」，飽和度需保持在100%，亮度保持在50%。
了解以上 HSL 的數值差異後，可以發現要通過色調、飽和度、及亮度屬性來處理顏色比 RGB 容易許多。
舉例，我們可以在「不改變飽和度跟亮度」的情況下，就直接決定我們要「更綠一點的藍綠色」。
或是想把原本的鮮黃色改成鵝黃色，只要修改它的亮度值：
是不是比較方便直覺呢？這邊整理了一些use cases：
- 在 Hover 時變化顏色
只要修改 button 的亮度值，就能來達到讓 button 顏色變深的效果。過去我們會直接修改 opacity 來達成變化，但這就會造成 button 的子元素透明度也一起被更改，透過 HSL 的方式就能夠快速修改並避免這狀況。
2. 快速定義整組 button 配色
如果我們想要快速定義一組button，我們可以修改亮度數值來，設定secondary 的 button 跟其他模式的 button，另外如果想要有不同主題，也能直接更改色相值來改變所有按鈕的顏色主題。
3. 切換多個 UI主題
如果我們需要創建很多種 UI主題，我們可以輕易的透過修改色相值來從一個主題切換到另個主題。主標跟副標的配色也可以很容易透過修改亮度值來達成。
4. 自定義白色顏色
有時候我們會使用白色的文字來讓文字突出，但是純白的顏色很無聊，我們就可以用我們所選的主題色調出亮度值很高的custom white，來讓畫面看起來更精緻。
這就是HSL 的吸引力，它能以較直觀的方式，讓開發者與設計師預知更改值會對顏色產生什麼影響，進而方便我們更輕鬆地創建自訂的顏色。
不過，HSL真的是那麼完美的方案嗎？
其實不然，它在社群中也有些爭議，最主要是「它在感知上是不一致的」。
這是什麼意思呢？
來看一下這張圖，把他分成上下兩組對比。可以看到，上方跟下方兩組顏色，亮度跟飽和度都是一樣的，唯一只差在它們都跟「左右彼此色相差了20度」。
有發現了嗎？明明都只差20度，可是上方左右卻已經像是完全不同的兩種顏色了(橘色跟黃色)，下方卻只感覺到藍色變深一點點而已。
我們再看看下方這個範例：
這裡的黃色跟藍色其實「擁有相同的亮度值」，可是我們人眼對於它的感知亮度卻完全不是這回事，藍色很明顯比黃色暗上許多，對吧！
可能有些人會想說，這是在色相不同的情況下比較亮度值，是否有點不太公平。沒錯，那讓我們再看看下方的範例，在「色相相同」的情況，兩者只差30%的亮度，不過是不是有像是不同顏色了呢？
這就是為什麼有些人覺得 HSL 也不是一個很好的色彩方案，因為他的感知不符合我們人眼判斷顏色的方式。
但這主要不是 HSL 的問題，而是因為它屬於sRGB 這個色彩空間，這套色彩空間當初制定的時間太早，很多技術跟概念都還不成熟。
sRGB 色彩空間跟真實世界的顏色相比空間小了許多，它當初是為機器所設計的，只考慮到如何儲存跟顯示顏色，而不是按照我們人眼感知上運作。
那有什麼方法能解決這問題呢？ 在 CSS color 4 中，有個新的顏色格式被認為目前能夠解決上述問題，就是LCH & Lab：
LCH, Lab
在 CSS Color 4 中新定義了 lch 跟 lab 這兩種色彩格式，目前只有 Safari 已經支援，所以要實際使用它可能還會需要一段時間。
lch跟lab都是使用 CIELAB 色彩空間，這個色彩空間的目標就是：
與人類視覺保持一致。
LCH數值個代表：Lightness, Chroma, Hue。
Lightness 跟 Hue 與 HSL 表示的差不多，而 Chorma 就是指濃度（類似於 HSL 的飽和度）。LCH 數值同樣直觀，能夠直接透過更改單個值，來預測顏色變化。
Lab 的話跟 LCH 很像，Lightness 定義與 LCH 完全相同的。只是差在它們採用的座標系統不同。在 Lab 中，顏色是採用笛卡爾坐標 (L, a, b) ，而 LCH 是採用極坐標，就是座標定義不同而已。瞭解更多
說到這，那到底 lch 跟 lab 到底有什麼優點呢？
1. 感知更均勻一致
由於它們使用的色彩空間，比起 sRGB 更符合我們人眼的運作模式，因此我們的感知上會更均勻一致，看一下這張圖：
上下兩組顏色，色相左右都只差了20度，但比起之前的範例，我們能夠感知它們與左右相鄰的顏色更為相像，而不是變成兩種完全不一樣的顏色了。
2. 亮度看起來更為合理
上面這排 lch 顏色在維持亮度一致情況下，從左到右依序增加色相值：0度, 90度, 180度, 270度。 可以看到，除了0度色相值的洋紅色顏色比較亮一點點之外，他們的亮度表現其實沒有相差太大。而第二排的顏色則是先前有給大家看過的範例，是不是覺得差很多呢？
3. 能夠 access 到更多顏色！
下圖是兩種不同的色域： sRGB 與 p3色域，p3全名叫 DCI-P3，是美國電影行業推出的一種廣色域標準，它的色域更大，綠色和紅色的範圍更廣且更鮮艷：
目前我們可以使用的所有 CSS color 都被定義是 sRGB 顏色空間，這在幾年前其實已經綽綽有餘。
因為除了專業顯示器外，幾乎顯示器的色域都小於 sRGB。但是現在大多數顯示器的色域更接近 P3。
P3 的體積比 sRGB 大了將近50%
可惜的是， CSS 卻根本沒辦法取得這些顏色。
而新出的 lch 顏色格式可以解決這個問題，LCH提供更廣的色域，讓我們可以去取得「比過去多將近三分之一的顏色」。
除了 LCH 外，css color 4文件中有定義一個叫做 color() 新屬性，可以指定使用其他的顏色空間，我們能直接將值設為display-p3，來訪問這些高色域的顏色。不過比起這種指定方式，也許直接採用 lch 其實會是更方便的選擇。
總結
就我所知，目前如 Sketch, XD 尚不支援 Lab, LCH, P3 colorspaces，而 Figma 則有相關 plugin 可以使用，PhotoShop 也有支援。(如果有更新請不吝嗇糾正我🙏🏻)
雖然目前在 LCH color上還有諸多限制以及不被支援，但相信在未來會漸漸更為普及並能有更多應用，能夠取得更多顏色聽起來棒極了！不過對很多人來說，會不會其實也看不出這種些微的色彩的差異呢（就像音樂界的木耳一樣¯\_(ツ)_/¯）
而我自己是想像，它們能夠讓網頁上的圖像或配色更為生動真實，比較符合人類的視覺體驗，強化部分色彩帶給人的觀感，就讓我們一起期待未來 CSS 這些有趣的色彩發展吧！🌈
如內容有誤請不吝嗇大力糾正，感謝觀看！
