什麼是色彩混合器？

用比例滑桿將兩種顏色混合，即時查看混合結果。輸出 HEX、RGB 和 HSL 值，可直接複製到程式碼或設計工具中。

選兩個顏色,挑一個混合模式——RGB、RYB、LAB、LCH、HSL 或 OKLCH,再拖 0%~100% 的滑桿。RGB 在螢幕色彩空間中直接平均,速度最快,但中間值可能偏灰;RYB 像真實顏料一樣混合,所以藍加黃成綠、紅加黃成橙;LAB 與 LCH 在感知空間混合,跨色相過渡更順;OKLCH 是最新、與 CSS 對齊的感知模型,中間值通常看起來最自然。輸出包含 HEX、RGB、HSL、CMYK 與最接近的色彩名稱,還有對黑白底的 WCAG 對比度數值,以及可複製的 CSS 線性漸層。25/50/75% 的快捷按鈕能一鍵跳到常見的混合點,不必精準拖動滑桿。

使用方法

1. 步驟一——使用取色器選擇第一種顏色，或輸入其 HEX 值。
2. 步驟二——選擇第二種顏色，然後拖動混合比例滑桿來控制混合程度（0% = 純第一種顏色，100% = 純第二種顏色）。
3. 步驟三——查看混合結果及其色碼，複製所需數值。

何時使用

• 把品牌色和白或灰混合,做按鈕的 hover / disabled 狀態。
• 為 CSS 漸變產生中間停駐點,避免中段發灰。
• 兩個品牌色用低比例混合,做柔和的提示色。

結果

一位設計師將品牌藍 (#2196F3) 與白色 (#FFFFFF) 按 30% 比例混合，得到柔和的淺藍色 (#A1C9F8) 作為 UI 元件的懸停態顏色。

常見問題

日常該選哪一個混合模式?

如果你的建置流程支援,就用 OKLCH——它在感知上最均勻,也契合現代 CSS color-mix 規範。LAB 是次選,在設計軟體中支援度也很高。兩色亮度相近時 RGB 就夠用;LCH 對飽和度的保留最好;HSL 比較適合做色相旋轉,而不是平滑插值。

為什麼 RGB 的中間值有時偏灰、偏髒?

RGB 是數值平均,不是感知平均。藍色和橙色這類互補色的 R、G、B 互相抵消,中間就成了低飽和的灰。改用 LAB 或 LCH,中間值能保持較高飽和度。若想要和調真實顏料一樣的結果,就用 RYB 模式——它把藍加黃混成綠色,而不是灰色。

跟 CSS 的 color-mix() 差在哪?

color-mix() 已在新版瀏覽器內建,可用 srgb、lab、oklab、lch、oklch。本工具輸出 HEX,可貼到舊樣式表;同時提供可視化滑桿,直接拖到想要的比例,不必猜百分比。

可以一次混合超過兩個顏色嗎?

一次只能兩個,但可以串起來:先把 A、B 混合得到 C,再把 C 與 D 混合。若要三色平滑漸變,A→B 取 50%,B→C 取 50%,把兩個中間值放在原本 B 的兩側當漸變停駐點。

0% 與 100% 比例各代表什麼?

0% 是純色 1,100% 是純色 2,50% 是中間值。滑桿每步 1%,可細調淡色或濃色——做 UI 狀態時,10% 與 15% 的混合給人的感覺確實會不一樣。

相關工具