在配色設計中,將一個混色器連接到另一個混色器,意思就是使用一個工具,讓你能以自行控制的比率混合兩種顏色,然後告訴你結果的精確十六進位色碼與 RGB 數值。Color Mixer 正是這樣的工具:你輸入兩種顏色作為 Color A 與 Color B,把滑桿從 0% 拖到 100%,工具就會使用 sRGB 線性內插來計算混色結果,其中每個紅、綠、藍色頻道會以 round(A * (1 - ratio) + B * ratio) 進行平均。在 0% 時結果是純 Color A,100% 時是純 Color B,而 50% 時你會得到兩個顏色頻道數值的精確中點。這個工具還會繪製一條 11 階的漸層色條,讓你無需輸入任何新內容,就能預覽之間所有的混色結果。一切都在你的瀏覽器中本地執行,因此你可以混合兩種顏色、複製十六進位色碼,然後貼到 CSS、Figma 或任何設計檔案中,而無需上傳任何數值。如果你的任務是將兩種顏色銜接成一個特定的中間色階,這就是你的工作流程。
在配色工作中「將混色器連接到混色器」代表什麼
在音訊領域之外,「connect mixer to mixer」這句話可以清楚地轉譯為一套配色工作流程:你把每一種顏色視為一個來源,讓它們通過一個混合階段,然後讀取輸出結果。Color Mixer 就是那個混合階段。Color A 放在一個輸入欄位,Color B 放在另一個輸入欄位,而單一的比率滑桿控制著每種顏色對混合結果的貢獻程度。這個工具是一層薄薄的數學運算,能把兩個任意顏色變成一個新顏色,讓設計師和開發者無需用眼睛對著選色器猜測,就能推算中間色階。
這個設定的優點在於連線關係完全可逆且可重複。如果你把 Color A 設為 #3b82f6(一種藍色)、Color B 設為 #f00(一種紅色),在滑桿 30% 時結果會是一個穩定且具名的十六進位色碼。把滑桿移到 70%,你就會得到另一個穩定的十六進位色碼。這裡沒有隨機性,也沒有隱藏的設定檔狀態,這代表你在結果面板上看到的精確數值,跟任何其他使用 sRGB 線性內插的工具會產生的數值完全相同。這與大多數 CSS 漸層、設計應用程式和 UI 系統底層所使用的數學相同,因此輸出結果在你的技術堆疊中具有可攜性。
如何使用 Color Mixer 混合兩種顏色
以下每個輸入、滑桿動作與複製動作,都對應到 Color Mixer 頁面上的一個控制項。依序按照步驟操作,結果面板就會即時反映目前的混色結果。
- 在 Color A 欄位中以十六進位色碼(例如 #f00 或 #3b82f6)或 rgb() 字串輸入你的第一種顏色。你也可以點擊欄位旁的色塊來開啟原生選色器,以視覺方式挑選色調。
- 以同樣方式在 Color B 欄位中輸入你的第二種顏色。這個工具接受短格式十六進位、完整十六進位與 rgb() 字串,並能容忍額外空格、缺少井字號,以及大寫或小寫字母。
- 拖動比率滑桿,設定每種顏色在混色中的比例。0% 會回傳純 Color A,100% 會回傳純 Color B,而 50% 則會產生兩個頻道數值的精確中點。
- 在結果面板中讀取混色的十六進位色碼與 RGB 數值,並使用漸層色條一眼預覽兩種顏色之間的每一個步階。
- 點擊 Copy 把結果的十六進位色碼放到剪貼簿,然後貼到你的 CSS、設計檔案或元件 token 中。
每一步都會即時更新輸出,因此你可以在兩個錨點顏色之間快速反覆調整,直到你要的中間色出現在結果面板中。
比率滑桿與內插的運作方式
在簡單的滑桿背後,是一個逐頻道的加權平均。對於紅、綠、藍每一個頻道,工具會計算 result = round(A * (1 - ratio) + B * ratio),然後將該頻道限制在標準的 0–255 範圍內。當比率為 0.5 時,公式就會簡化為每對頻道的中點,這就是為什麼 50% 的混色在原始頻道數值上會剛好落在 Color A 與 Color B 的正中間。
你可以用一個實際算過的例子來驗證這個數學。把 Color A 設為純紅 #ff0000,其頻道數值為 (255, 0, 0);Color B 設為純藍 #0000ff,其頻道數值為 (0, 0, 255)。在滑桿比率為 0.5 時,紅色頻道的公式為 round(255 × 0.5 + 0 × 0.5),綠色頻道為 round(0 × 0.5 + 0 × 0.5),藍色頻道為 round(0 × 0.5 + 255 × 0.5)。這些值分別四捨五入為 128、0 與 128,也就是 rgb() 字串 rgb(128, 0, 128) 以及十六進位色碼 #800080 — 一個乾淨的洋紅色。Color Mixer 在 50% 滑桿位置會重現這個精確數值,這讓它在你想確認某個新混色是否符合預期時,成為一個實用的健全性檢查工具。
這種內插方式有時稱為加法式螢幕混色(additive screen blending),因為它以兩種顏色並排發光的方式來取平均,而不是以顏料吸收光線的方式來取平均。對數位工作來說,這才是正確的行為:你的螢幕產生的是加法式光線,你的設計檔案儲存的是 8 位元 sRGB 數值,而 CSS 漸層也在同一個空間中進行內插。下表整理了滑桿位置與其行為的對應關係,讓你無需反覆嘗試就能挑選比率。
| 滑桿比率 | 產生的結果 | 常見用途 |
|---|---|---|
| 0% | 純 Color A | 確認 Color A 解析正確 |
| 25% | 從 A 朝 B 方向的四分之一處 | 將品牌色微妙地推向新色相 |
| 50% | 兩組頻道的精確中點 | 建立色階組合與中點色票 |
| 75% | 從 A 朝 B 方向的四分之三處 | 在不確定的情況下尋找接近 B 的色調 |
| 100% | 純 Color B | 確認 Color B 解析正確 |
解讀結果:十六進位色碼、RGB 與漸層色條
結果面板一次呈現三項資訊。第一個是小寫六位數的十六進位色碼,這是 CSS、設計工具以及大多數程式碼編輯器直接接受的格式。第二個是 rgb() 字串,內含明確的紅、綠、藍頻道數值,當你需要把顏色放進已經使用函式標記法的樣式表,或想讀取個別頻道時特別有用。第三個是比率標籤,格式類似 70% A / 30% B,這讓任何混色結果日後都能重現。只要記錄這兩個輸入與比率,你就能在任何其他使用相同數學的工具上重新建構出完全相同的輸出。
結果面板下方的漸層色條會在 Color A 與 Color B 之間繪製十一個等距的混色步階,包含兩個端點。每一步與前一步相差十分之一,因此漸層色條同時也是一個視覺比例尺。如果你在尋找一個中間色,卻不知道確切想要的比率,只要調整比率控制項直到某個漸層色票符合你的目標,再從上方面板讀取精確的十六進位色碼與比率。這種「滑桿 + 比率標籤 + 漸層預覽」的組合,將原本只能憑感覺的工作,轉化為一個可控、可重複的操作。
數位設計中顏色混合的實際用途
數位設計中大多數的顏色決策並不是「挑一個顏色」。它們是「找出落在這兩種顏色之間的那個顏色」,而這正是混色要解決的問題。設計師用它來建立無障礙色彩比例,讓基準品牌色以固定比率朝白色或黑色移動,進而建立一套明色或暗色系統。開發者用它來產生漸層停駐點,因為 CSS linear-gradient 也是以同樣方式在相鄰停駐點之間進行內插,而 Color Mixer 能在撰寫任何程式碼之前預覽中間色調。圖表作者會混合兩個錨點顏色,以衍生出落在光譜上的第三種顏色,讓跨分類的配色保持一致。
另一個常見任務是從真實世界的配色中取樣中間色。如果設計師已經有一個主色與一個輔助色,卻想要一個看起來不像第四個無關色相的第三色,通常 30% 到 50% 的混色就能產生視覺上有依據的結果。由於滑桿移動時工具會即時更新,你可以掃過整個過渡區,停在第一個在白色背景上看起來正確的色調。漸層色條在這裡特別有用,因為它一次顯示全部十一個停駐點,所以令人滿意的中間色往往一眼可見,無需進一步微調。
Color Mixer 無法做到的事
有必要清楚說明其限制,因為顏色混合有幾個眾所周知的陷阱。Color Mixer 使用的是 sRGB 線性內插,它混合的是每個頻道所儲存的數值。這不是經過伽馬修正的光學混色,也絕對不是減法式的顏料或油墨混色。這就是為什麼在這裡把純紅 #ff0000 與純藍 #0000ff 混合,會得到一個乾淨的洋紅色 #800080,也就是逐頻道的中點;而在調色盤上實際把紅色與藍色的壓克力顏料混合,卻會產生螢幕工具無法模擬的混濁暗紫或棕色。
如果你的目標是為螢幕、網站、應用程式、圖示、儀表板或任何螢幕表面做設計,sRGB 內插正是你想要的,因為你的螢幕、CSS 引擎與設計工具全都運作在同一個 sRGB 空間中。如果你的目標是預測真實的印表機墨水或顏料在紙上會如何混合,這個工具無法給你那個答案,任何誠實的瀏覽器內混色工具也都做不到,因為印刷與顏料混合依賴的是實體吸收曲線,螢幕數值無法捕捉。你實際遇到的問題是哪一個,決定了 Color Mixer 究竟是不是合適的工具,還是你需要改用一套以印刷為核心的工作流程。
如果你正在權衡選項,How to Use a Summing Color Mixer for Exact HEX 對此有詳細說明。
如果你正在權衡選項,Color Mixer: Use the Ratio Slider for Precise Blends 對此有詳細說明。