CSS 色彩工作流程

CSS color-mix:獨立比例、Alpha 與原生支援

混色不只是 RGB 位元組的平均。請明確選擇插值空間,同時檢查透明度與色相。

內容更新: · 維護者與修正回報

正規化比例,但不漏掉 Alpha

兩個比例都省略為 50/50;只省略一個時補到 100。兩個明確比例依合計正規化,合計小於 100 時另將結果 alpha 乘以合計/100;合計為零無效,各比例限 0–100。

編輯器接受明確 hex(含 alpha)及少量具名色,不解析 currentColor、變數或任意函式,因其需要目的文件情境;工具限制不代表 CSS 本身禁止那些色彩。

依支援檢查,不捏造備用色

每個色塊使用目前瀏覽器原生 color-mix 與 CSS.supports。不支援空間明確保持不可用,不顯示近似 sRGB 平均。棋盤可看出透明度,但螢幕色域、色彩管理及實作可能改變外觀。

Color-mix 預覽不計算 WCAG 對比,也不認證文字可讀性。請在目的元件以實際前景、背景合成後另測;複製支援 CSS 不等於跨瀏覽器外觀保證。

資料可信度

資料來源