CSS 現代色彩函數教學

CSS 色彩的演進

CSS 色彩經歷了四代演進：

oklch() 函數

/* oklch(亮度 彩度 色相) */
color: oklch(0.7 0.15 150);

/* 帶透明度 */
color: oklch(0.7 0.15 150 / 80%);

優勢：

oklab() 函數

/* oklab(亮度 a軸 b軸) */
color: oklab(0.7 -0.1 0.1);

a 軸：綠 ↔ 紅（負 = 綠，正 = 紅）

b 軸：藍 ↔ 黃（負 = 藍，正 = 黃）

適合漸層和色彩混合計算。

color-mix() 函數

/* 在 oklch 空間中混合兩種顏色 */
color: color-mix(in oklch, #FF0000 60%, #0000FF 40%);

/* 實用：自動生成懸停色 */
.button {
  --base: oklch(0.6 0.2 250);
  background: var(--base);
}
.button:hover {
  background: color-mix(in oklch, var(--base), black 20%);
}

相對色彩語法

/* 基於現有顏色調整 */
.light {
  /* 取 --brand 的色相和彩度，亮度設為 0.9 */
  background: oklch(from var(--brand) 0.9 c h);
}

.muted {
  /* 降低彩度 */
  color: oklch(from var(--brand) l 0.05 h);
}

實際應用：用 OKLCH 建立設計系統

:root {
  --brand-h: 250;  /* 色相 */
  --brand-c: 0.15; /* 彩度 */

  --brand-50:  oklch(0.97 calc(var(--brand-c) * 0.3) var(--brand-h));
  --brand-100: oklch(0.93 calc(var(--brand-c) * 0.5) var(--brand-h));
  --brand-200: oklch(0.87 calc(var(--brand-c) * 0.7) var(--brand-h));
  --brand-500: oklch(0.65 var(--brand-c) var(--brand-h));
  --brand-700: oklch(0.45 var(--brand-c) var(--brand-h));
  --brand-900: oklch(0.25 var(--brand-c) var(--brand-h));
}

只需改 --brand-h 就能換整組配色，亮度關係自動保持！