用 CSS HSL 來寫顏色吧！（以及更好的方法）

用 CSS HSL 來寫顏色吧！（以及更好的方法）

在 CSS 撰寫顏色時，通常我們會以 hex 或是 RGB 來定義：

.gray {
  color: #fefefe;
}

.red {
  background-color: rgb(125, 125, 125);
}

這樣的寫法行之有年，也是我在入門網頁開發時學到的方法，然而這樣的寫法也存在幾個問題。

十六進位的格式對人類來說不容易閱讀。像是 #27cc95，光看這些數字我是沒有辦法想像顏色是什麼。十六進位雖然容易解析，但對人類來說，透過三原色的多寡來呈現顏色並不直觀。

再來是通常在設計系統裡，同樣色系的顏色，會依照各種亮度做出色盤，方便設計師配色。然而儘管只是顏色的亮度做變化，HEX 或是 RGB 也有可能出現極大不同。

• #BEDBFE 與 #1E40AF，前者比後者亮，但從 HEX 或 RGB 的表現方式中很難看出來

CSS 與瀏覽器大幅進化後，可以用一個更容易理解顏色定義的格式——HSL 來寫顏色。

HSL 是什麼

我發現有很多網頁開發者在寫顏色時，自然而然會用 hsl 來寫，理解之後才意識到用 HSL 來表達顏色是多麽直覺的方式。

HSL 是用人類比較容易理解的方式來表達顏色，分為 H（Hue 色相）、S（Saturation 飽和度）、L（Lightness 亮度）。這三個詞，如果是喜歡攝影的朋友，或許在修圖軟體會常常聽到。

色相環長這樣：

以正上方為 0 度開始，分別為紅橙黃綠藍靛紫橘。

飽和度是指顏色的鮮艷程度，越低代表顏色越暗沉、過低時會有矇上灰的感覺；飽和度高則是看起來比較鮮艷。亮度是顏色的明亮度，越低代表顏色越暗。

理解這點後，我們可以看看 Tailwind 或 Material Design 等時常出現的顏色命名，就是從亮度出發，例如 color-indigo-100、color-indigo-200 等，不過這邊的命名是數字越小越亮。

在實際應用上除了亮度以外，通常還會做其他微調。

在 CSS 當中，hsl 可以這樣表示：

.my-color {
  color: hsl(220deg, 30%, 20%);
}

在還沒看到實際顏色前我就可以知道以下資訊：

• 在色相的 220 度，大概會是偏藍的顏色
• 是個飽和度偏低、有點暗（或者說偏暗色）的藍

實際上的顏色是這樣子

感知亮度會隨色相改變

HSL 雖然用起來很直覺，但有些顏色儘管 HSL 的亮度相同，人眼感覺起來仍然比較亮。最顯而易見的例子是黃色。

同樣是亮度 50%，黃色看起來就是比較亮。這是因為每個顏色波長不同的原因，例如同樣是亮度 60%，在螢幕上看起來相當刺眼。

這是一個標籤

這是一個標籤

如果這時候加入白色的字當作標籤 UI 使用，藍色背景的對比度還能接受，然而黃色背景的對比度則是慘不忍睹。

在設計系統裡，時常將具有相同屬性的設計元素，用同樣的亮度做呈現，展現出統一、調和的視覺。然而由於剛剛提到的限制，實際上並沒有辦法直接用同樣的亮度做搭配就好，設計師仍然得花額外的心思細條顏色。

這是 HSL 的一大缺陷，我們後面會再談談可能的解決方式。不過 HSL 仍然是一種表現顏色相當有效的工具，希望大家都可以學起來套用到你的設計上面唷。

HSL 作為一種設計工具

接下來要說的可能是設計師們的常識，但對開發者來說或許就不一定了。

在非純色背景中調整文字顏色

在非純色背景當中呈現文字很難，可以用調整飽和度與亮度的方式讓整體更加調和。例如在我的部落格主頁當中，就以 hsl(230deg, 62%, 83%) 當作背景色，文字顏色則用 hsl(230deg, 37%, 24%)，減少飽和度並減少亮度，除了用黑色以外多了染上一點點背景色，顏色看起來更協和。

透過調整色相控制亮度

剛剛所提到的操作，因為我們用 HSL 來表示，所以可以很自然地理解每個顏色的作用與對比。習慣用 HSL 之後，在設計 UI 時，也會很自然地去想：

• 標籤的背景顏色不需要太突兀，可以採用淺色、飽和度相對低的顏色
• 文字的顏色可以與背景做搭配，調整亮度與飽和

這樣一來設計就不再只是看感覺而已，而是有目的去調整自己想要的效果。

HSL 只支援 sRGB 色彩空間

sRGB 是一個色彩空間標準，所有的顯示器都支援 sRGB。雖然 sRGB 已經行之有年且相當普遍，然而像是 Apple 所推出的色彩空間 P3 等等，用蘋果的螢幕（Macbook 或 Studio Display）可以展現更廣的色彩空間。

sRGB 與 P3 的差別

• sRGB：是最廣泛使用的色彩空間，涵蓋了大多數顯示器和網絡應用的顏色範圍。它的色域相對較小，適合一般的日常使用。
• P3：是一種更廣的色彩空間，比 sRGB 多出約 50% 的顏色範圍，特別是在綠色和紅色區域。常用於高階顯示器（如 Apple 的 Retina 顯示器）和專業影像處理。

HSL 的下一步 – oklch

我們提到 HSL 會出現顏色感知亮度的問題，儘管亮度相同，人的眼睛對某些顏色的亮度變為更為敏感，造成了儘管 HSL 所定義的亮度相同，卻無法直接套用的問題。

另外，HSL 對每個顏色都提供了同樣的飽和度值，這是因為 HSL 為了簡化模型，將色相、飽和度、亮度展現成完全平面。然而不管是顯示器也好、還是人的眼睛也好，每個色相裡能夠表現出的飽和度都不一樣。

為了解決感知亮度的問題，CSS 4 推出了新的顏色定義方式——oklch()，且能夠支援像是 P3 等更廣的色彩空間，瀏覽器甚至會向下相容。當顏色沒辦法在當前的色彩空間渲染出來時，會自動匹配所能夠渲染最相近的顏色。

下一篇文章，我們就來談談 OKLCH 的使用方法與實際效果吧！

總結

在網頁開發中，傳統的 HEX 和 RGB 顏色表示法雖然廣泛使用，但存在不易閱讀和直觀性不足的問題，且在廣域的色彩空間如 P3 下表現能力受限。

HSL（色相、飽和度、亮度）提供了一種更直覺的顏色定義方式，讓開發者能更輕鬆地理解與調整顏色。HSL 通過色相、飽和度和亮度三個維度來描述顏色，使得顏色的調整更加人性化，特別是在設計系統中，HSL 能更好地呈現色盤的亮度變化。

然而 HSL 也有其局限性，例如不同色相的感知亮度不同，導致相同亮度的顏色在人眼中呈現出不同的明暗效果。

為了解決這一問題，CSS 4 引入了 OKLCH 顏色模型，它不僅能更準確地反映人眼對亮度的感知，還支援更廣的色彩空間如 P3，並能自動匹配最接近的顏色，提升網頁的色彩表現力。

透過 HSL 和 OKLCH，開發者可以更精確地控制網頁色彩，提升設計的一致性和視覺效果，同時為未來的色彩標準做好準備！