還記得以前要做按鈕 hover 變色效果嗎？不是用 Sass 的 darken() 函式，就是得手動去色票工具查深一點的色碼。CSS 原生一直沒有好用的色彩操作功能，直到 color-mix() 的出現。

color-mix() 是 CSS 原生的色彩混合函式，讓你可以直接在樣式表裡混合兩種顏色、生成漸變色、建立完整的調色盤——完全不需要預處理器或 JavaScript。2026 年它已經獲得所有主流瀏覽器的完整支援，是時候把它加進你的工具箱了。

什麼是 CSS color-mix()

color-mix() 允許你在指定的色彩空間中混合兩種顏色，語法非常直覺：

color-mix(in oklch, blue 70%, white 30%)
background: color-mix(in oklch, var(--brand-color), white 30%);
color-mix(in srgb, red, blue) /* 各 50% 混合 */

簡單來說，它就像數位版的調色盤——你給兩個顏色和混合比例，它就算出中間色。最棒的是，混合結果會根據你選擇的色彩空間而不同。

基本語法與色彩空間選擇

完整語法是 color-mix(in <color-space>, color1 percentage, color2 percentage)。

oklch vs oklab vs srgb：選哪個？

oklch / oklab：大部分情境最佳選擇。「感知均勻」色彩空間，兩個在數值上差距相同的顏色在人眼看起來差距也相同
srgb：傳統網頁色彩，匹配現有 HEX 色碼體系最不會有意外
hsl：需要可預測色相插值時使用
避免 srgb-linear：混合結果常出現意外的暗中間點

.srgb  { background: color-mix(in srgb, red, blue); }
.oklch { background: color-mix(in oklch, red, blue); }
.hsl   { background: color-mix(in hsl, red, blue); }

實戰應用場景

從品牌色生成 Tint 與 Shade

color-mix() 最殺手級的應用。以前手動維護 10 階色票，現在只要定義一個品牌主色就能自動生成：

:root {
  --brand: oklch(0.6 0.2 250);
  --brand-50:  color-mix(in oklch, var(--brand), white 90%);
  --brand-100: color-mix(in oklch, var(--brand), white 80%);
  --brand-200: color-mix(in oklch, var(--brand), white 60%);
  --brand-300: color-mix(in oklch, var(--brand), white 40%);
  --brand-400: color-mix(in oklch, var(--brand), white 20%);
  --brand-500: var(--brand);
  --brand-600: color-mix(in oklch, var(--brand), black 20%);
  --brand-700: color-mix(in oklch, var(--brand), black 40%);
  --brand-800: color-mix(in oklch, var(--brand), black 60%);
  --brand-900: color-mix(in oklch, var(--brand), black 80%);
}

改品牌色只改 --brand 一行，整個色票系統自動更新。

用 color-mix 做 Hover 狀態

.btn-primary {
  background: var(--brand-500);
  &:hover { background: color-mix(in oklch, var(--brand-500), black 15%); }
  &:active { background: color-mix(in oklch, var(--brand-500), black 25%); }
  &:disabled { background: color-mix(in oklch, var(--brand-500), transparent 50%); }
}

注意 disabled 狀態——color-mix 也可以跟 transparent 混合，效果等同調整透明度但語意更清晰。

搭配 light-dark() 實作暗色模式

:root {
  color-scheme: light dark;
  --surface: light-dark(
    color-mix(in oklch, var(--brand), white 95%),
    color-mix(in oklch, var(--brand), black 85%)
  );
  --text: light-dark(
    color-mix(in oklch, var(--brand), black 80%),
    color-mix(in oklch, var(--brand), white 90%)
  );
}

動態調色盤實作

結合 CSS 自訂屬性和 color-mix()，你可以做出完全動態的調色盤。使用者選顏色，整個 UI 自動配色：

document.documentElement.style.setProperty('--user-color', userPickedColor);

:root {
  --bg: color-mix(in oklch, var(--user-color), white 92%);
  --border: color-mix(in oklch, var(--user-color), transparent 70%);
  --accent: color-mix(in oklch, var(--user-color), black 10%);
}

做 SaaS 產品的「自訂品牌色」功能時特別實用。

contrast-color()：自動對比色選取

另一個值得關注的新函式，根據背景亮度自動選擇黑色或白色文字，確保 WCAG AA 對比度：

.card {
  background: var(--bg);
  color: contrast-color(var(--bg));
}

目前瀏覽器支援還在推進中，但配合 color-mix() 使用，未來前端配色會非常自動化。

2026 瀏覽器支援度

color-mix() 已被列為 Baseline Widely Available：Chrome 111+、Firefox 113+、Safari 16.2+、Edge 111+。你現在就可以放心在生產環境使用。降級處理：

.btn { background: #3b82f6; }
@supports (background: color-mix(in oklch, red, blue)) {
  .btn { background: color-mix(in oklch, var(--brand), white 10%); }
}