在讀關於Linear如何重新設計他們的UI時，裡面提到Linear團隊用LCH來定義他們設計系統中顏色的生成，於是我便好奇到底什麼是LCH。

什麼是LCH？

LCH和RGB, HSL類似，是一種定義顏色的方式。

RGB(Red, Green, Blue)是用一個顏色由多少紅、綠、藍組成的來描述顏色，它被廣泛運用在數位傳播上，因為他是最接近顯示器定義顏色的方式（如同印刷領域，習慣用CMYK來定義顏色），但它的缺點就是它是根據顯示器如何運作來定義，而非根據我們人眼如何運作來定義的。

HSL(Hue, Saturation, Lightness)相較RGB更適合用於調色，它也是目前許多設計系統用來調色的方式，因為他的定義很人性化，Hue(色相)定義「什麼顏色」，Saturation(飽和度)定義「有多鮮艷」，Lightness(明度)定義「有多亮」，但HSL的色彩定義方式仍不算最對人眼優化。

為什麼？原因出在HSL在定義顏色的亮度時，是根據一個顏色加入了多少黑色和白色來決定它亮的程度，但實際上，某些顏色例如黃色，在同樣的亮度下，從人眼看起來就會比像是藍色或紫色來得更亮。如下圖，擁有一樣飽和度和明度的黃色和藍色，黃色看起來就比藍色亮。

HSL

LCH(Lightness, Chroma, Hue)正是為了解決這個缺點而出現，LCH定義Lightness的方式是以如果白色和這個顏色受到一樣的光照，我們看起來會覺得這個顏色有多亮來定義的，它更符合人類視覺感知的方式，對建立一個能夠讓顏色真正在視覺上保持一致的設計系統有很大幫助。下圖是在LCH下，擁有一樣飽和度和明度的黃色和藍色，兩者在視覺上看起來更加和諧。

LCH

當用LCH來定義色彩時，更能確保當所有元件都在一樣的色彩參數下，調整明度時，也擁有一樣的視覺感受。

HSLv.s.LCH

LCH工具

目前LCH沒有被大部分的主流設計軟體如Figma, Photoshop等support，意味著很難直接在這些軟體中的color picker來定義LCH，但有一些工具可以用來輔助：