color-mix() 是 CSS 顏色模塊（CSS Color Module Level 5）中引入的一個強大的顏色混合函數，用于在指定的顏色空間中混合兩種或多種顏色，生成新的顏色值。它解決了傳統顏色混合（如通過透明度疊加）在視覺一致性上的不足，尤其在不同設備和顏色空間下能提供更可預測的結果。
基本語法
color-mix() 的核心語法如下：
color-mix(in <color-space>, <color-1> [<percentage>]?, <color-2> [<percentage>]?, ...)
in <color-space>：指定混合使用的顏色空間（必需）。常見值包括srgb、srgb-linear、oklab、oklch、lab、lch等。<color-1>,<color-2>, …：要混合的顏色（至少兩種，支持多種），可以是任何有效的 CSS 顏色（如#fff、rgb(255,0,0)、CSS 變量等）。[<percentage>]?：可選參數，指定每種顏色在混合中的占比（默認按比例分配剩余份額）。
關鍵特性
-
基于顏色空間的混合
傳統顏色混合（如rgba()疊加）本質是在默認顏色空間（通常是srgb）中進行簡單的數值計算，可能導致視覺上的偏差（如混合紅色和綠色得到的棕色與預期不符）。
color-mix()允許指定更科學的顏色空間（如oklab），該空間更符合人類視覺對顏色的感知，混合結果更自然。例如：/* 在 oklab 空間混合紅色和綠色，結果更接近人眼預期的棕色 */ color: color-mix(in oklab, red 50%, lime 50%); -
靈活的比例控制
可以通過百分比精確控制每種顏色的占比，總占比超過 100% 時會自動按比例縮放。例如：- 混合 30% 紅色和 70% 藍色：
color-mix(in srgb, red 30%, blue 70%) - 若省略百分比，默認平均分配（如兩種顏色各占 50%）：
color-mix(in srgb, red, blue)（等價于各 50%） - 多顏色混合時按比例分配：
color-mix(in srgb, red 20%, green 30%, blue 50%)（總和 100%）
- 混合 30% 紅色和 70% 藍色：
-
支持透明色（
transparent）
與透明色混合時，會按比例降低原顏色的不透明度。例如：/* 50% 紅色 + 50% 透明 → 半透明紅色 */ color: color-mix(in srgb, red 50%, transparent);
常用顏色空間及適用場景
不同顏色空間的混合效果差異較大，選擇合適的空間很重要：
| 顏色空間 | 特點 | 適用場景 |
|---|---|---|
srgb | 網頁默認顏色空間，基于非線性感知，混合結果可能偏暗 | 兼容舊系統，簡單混合需求 |
srgb-linear | 線性版本的 srgb，混合時亮度更均勻 | 需要精確亮度計算的場景 |
oklab | 現代均勻顏色空間，感知一致性強，混合后色調和亮度過渡自然 | 追求自然視覺效果的設計 |
oklch | oklab 的圓柱坐標形式，便于控制色相、飽和度和明度 | 需要精確調整色相/飽和度時 |
lab, lch | 傳統均勻顏色空間，覆蓋范圍廣但計算復雜度高 | 專業色彩工作流 |
與傳統混合方式的對比
rgba()疊加：本質是顏色在視覺上的疊加，受背景色影響，且混合邏輯不直觀（如rgba(255,0,0,0.5)疊加rgba(0,255,0,0.5)會受背景色影響）。color-mix()：直接計算混合后的顏色值，不受背景影響，結果可預測，且支持多顏色、多空間混合。
瀏覽器兼容性
color-mix() 目前已被主流瀏覽器支持（Chrome 99+、Firefox 111+、Safari 15.4+），但舊瀏覽器（如 IE）不支持。實際使用時可通過工具（如 PostCSS）降級處理，或提供 fallback 顏色：
.my-element {/* 降級方案：使用半透明紅色 */color: rgba(255, 0, 0, 0.5);/* 現代瀏覽器使用 color-mix */color: color-mix(in oklab, red 50%, transparent);
}
總結
color-mix() 是 CSS 中處理顏色混合的現代方案，通過指定顏色空間和比例，能生成更符合視覺預期、可預測的顏色。它特別適合主題設計、動態顏色生成（如 hover 效果）、漸變色優化等場景，是前端開發者提升色彩控制能力的重要工具。
)
