CSS oklch() color-mix() 全新顏色函數

隨著螢幕顯示技術的進步（如 P3 廣色域），傳統的 RGB 或 HSL 顏色系統已經逐漸無法滿足需求。現代 CSS 引入了更符合人類感知、色彩範圍更廣的全新顏色函數。

OKLCH：最直覺的顏色系統

oklch() 是目前最推薦的顏色表示法。它與 hsl() 類似，但其「亮度」是基於人類視覺感知的（Perceptually Uniform），這意味著相同亮度值的藍色和黃色，在視覺上看起來是真的亮度一致。

語法：

oklch(L C H)

• L (Lightness)：亮度，0% 到 100%。
• C (Chroma)：色度（鮮豔程度），0 到約 0.4。
• H (Hue)：色相，0 到 360 度。

.box {
  background-color: oklch(70% 0.15 150);
}

color-mix()：動態混合顏色

color-mix() 讓你可以直接在 CSS 中混合兩種顏色，不需要依賴 JavaScript 或預處理器。

語法：

color-mix(in [色彩空間], 顏色1 比例, 顏色2 比例)

這在製作「半透明背景」或「懸停加深」效果時非常實用。

.btn-soft {
  /* 將藍色與 20% 的白色混合，產生粉藍色 */
  background-color: color-mix(in oklab, blue, white 20%);
}

相對顏色語法 (Relative Color Syntax)

這是 2024-2025 年 CSS 最強大的更新之一。它允許你「解構」一個既有的顏色，並基於它產生新顏色。

:root {
  --brand: #007bff;
}

.card {
  /* 基於 --brand 顏色，將其透明度改為 50% */
  background: oklch(from var(--brand) l c h / 0.5);

  /* 基於 --brand 顏色，讓它變亮一點 */
  border-color: oklch(from var(--brand) calc(l + 0.1) c h);
}

為什麼要學這些新語法？

1. 更符合人類視覺：OKLCH 解決了 HSL 在不同色相下亮度不均的問題。
2. 支援廣色域：可以在支援 P3 的螢幕上顯示更鮮豔的顏色，而在舊螢幕上自動降級。
3. 動態主題切換：配合 CSS 變數與相對語法，可以輕易達成「一鍵切換全站配色深淺」的效果。

瀏覽器支援度

oklch()、color-mix() 與「相對顏色語法」目前已獲得 Chrome、Firefox 與 Safari 的最新版本全面支援（主流支援起始於 2023 年底至 2024 年初）。對於企業級穩定性需求，建議可以搭配適當的回退機制：

.box {
  background: rgb(0, 123, 255); /* 回退方案 */
  background: oklch(60% 0.15 250);
}