Color Mixer 透過對紅、綠、藍三個通道分別進行加權平均來混合兩種顏色，使用公式 result = round(A × (1 − ratio) + B × ratio) 來計算每一個通道。當你混合兩個十六進位顏色時，工具會讀取 Color A 與 Color B 的十六進位值，將每個視為 0 到 255 的 8 位元 sRGB 值三元組，然後依照你在滑桿上設定的比例進行線性插值。比例為 0% 時，結果等同於未變動的 Color A;比例為 100% 時，結果等同於未變動的 Color B;比例為 50% 時，則是每個通道的精準中點。這與 CSS color-mix()、多數設計工具以及漸層引擎所使用的逐通道平均方式相同，這也是為什麼在 50% 比例下混合純紅 (#ff0000) 與純藍 (#0000ff) 會產生 #800080——乾淨的洋紅色——而非混合真實紅色與藍色顏料時會得到的混濁紫色。當你移動滑桿時，混合結果會即時更新，而結果面板會顯示你所調整的任何混合結果的精確十六進位與 RGB 值。Color Mixer 正是圍繞著這個公式所打造，所有運算都直接在瀏覽器中執行，因此每一步都是可重現且即時的。
每次混合背後的公式
每次你拖動比例滑桿時，工具都會執行三個簡單的加法運算——紅、綠、藍各一個——並將每個結果四捨五入到最接近的整數。完整寫出的公式為:
result_channel = round(A_channel × (1 − ratio) + B_channel × ratio)
通道值會被限制在 0–255 之間，因為這是 8 位元 sRGB 值的範圍;比例則被限制在 [0, 1] 之間，因為這是滑桿位置的範圍。背後沒有任何其他處理:沒有伽馬校正、沒有感知加權、也沒有轉換到其他色彩空間。工具將兩個十六進位值視為原始的數值三元組並取其平均值。這種簡潔性也正是結果可預測的原因——只要輸入的兩個顏色與比例相同，輸出的結果永遠相同。
這種方式稱為 sRGB 線性插值，因為它在 sRGB 色彩空間內進行線性插值。它與經過伽馬校正的光學混色(會在平均前對每個通道套用一條冪次曲線)不同，也絕對不同於減法顏料混色(會模擬真實顏料在紙上的行為)。在數位工作中，顏色最終會以加色光的形式由螢幕發出，因此簡單的線性插值就是合適的工具——它與 CSS gradient、color-mix() 函式，以及你在設計軟體中看到的漸層停色點所用的數學相同。
在 Color Mixer 中混合紅與藍會得到洋紅色，而非混濁色
在螢幕混色中，最常讓人驚呼「等等，這是什麼?」的瞬間，是混合純紅與純藍的結果。在 Color A 欄位輸入 #ff0000，在 Color B 欄位輸入 #0000ff，將滑桿保持在 50%，結果就是 #800080——一個完全乾淨的洋紅色。沒有混濁感、沒有棕色傾向，也沒有偏灰色的紫色。每個通道的計算都很容易驗證:
- 紅色通道:round(255 × 0.5 + 0 × 0.5) = 128
- 綠色通道:round(0 × 0.5 + 0 × 0.5) = 0
- 藍色通道:round(0 × 0.5 + 255 × 0.5) = 128
這個三元組 (128, 0, 128) 就是 #800080，也就是網頁上的標準洋紅色。結果看起來比幼稚園美術課要乾淨許多的原因在於，這是加色的螢幕光線，而非減法的顏料。真實的紅色顏料與藍色顏料是透過吸收波長來混合，因此結果會偏向黯淡、去飽和的紫色或棕色;而螢幕則是透過發光來混合，各通道能夠乾淨地相加。
如何在 Color Mixer 中混合兩個十六進位顏色
在開始之前，先了解工具接受的輸入格式會有所幫助。每個顏色欄位都可以接受以下三種標準 CSS 顏色標記法的任何一種:
| 輸入格式 | 範例 | 說明 |
|---|---|---|
| 簡寫十六進位 | #f00 | 三位數簡寫形式，內部會展開為六位數 |
| 完整十六進位 | #3b82f6 | 六位數形式，最常見的 CSS 標記法 |
| rgb() 字串 | rgb(59, 130, 246) | 使用 8 位元通道值的函式標記法 |
解析器不區分大小寫、會忽略多餘的空白，並接受省略井字號，因此「f00」、「#F00」與「F00」都會被解析為相同的顏色。以下是實際操作步驟:
- 在 Color A 欄位中輸入第一個顏色，可使用像 #f00 這樣的簡寫十六進位、像 #3b82f6 這樣的完整十六進位，或像 rgb(59, 130, 246) 這樣的 rgb() 字串。你也可以點擊欄位旁的原生色票，以視覺方式挑選顏色。
- 在 Color B 欄位中使用相同的接受格式輸入第二個顏色。解析器可容忍多餘的空白、缺漏的井字號，以及任何大小寫。
- 拖動比例滑桿，設定每個顏色在混合中的占比——0% 為純 A,100% 為純 B,50% 為精準中點。
- 在結果面板中讀取混合顏色的十六進位與 RGB 值。十六進位會以小寫六位數形式顯示，而 RGB 則以標準的 rgb() 字串表示。
- 瀏覽漸層條，預覽兩種顏色之間的每一個步階——包含兩個端點在內，共十一個等距的混合結果。
- 點擊「複製」將結果十六進位值放入剪貼簿，然後貼到你的樣式表、設計工具或任何需要的地方。
由於數學運算會在每次滑桿移動時即時執行，你可以來回拖動比例，看著十六進位值一個字元一個字元地更新。這種緊密的回饋迴圈，是為你的特定設計找到合適中間色的最快方式——遠比在選色工具中輸入猜測值要快得多。
讀懂比例滑桿與漸層條
比例標籤會隨時顯示當前的分配比例，例如「70% A / 30% B」，因此之後只要設定相同的比例，就能重現你所得到的任何結果。漸層條會顯示兩個顏色之間的十一個等距混合步階，包含兩個端點，讓你可以一眼瀏覽整個過渡，並看出哪個中間色最吸引你的目光。舉例來說，如果第 6 個位置(共 10 段)的步階看起來正是你要的色調，你可以把滑桿調到與該步階相符，或是用滑桿去找出介於兩個顯示步階之間的精確數值十六進位。
對於建立色階的使用者而言——例如，在兩個品牌色之間建立六個停色的序列——漸層條同時也是一份視覺情緒板。將品牌色中最淺與最深的顏色分別設定為 A 與 B，掃視漸層條，介於其間的步階就是中間停色的候選。這些步階不會是感知上均勻的，因為 sRGB 線性插值並非感知均勻;但它們在數學上是可預測的，而這正是多數設計系統真正需要的。
何時適合使用 sRGB 混色(以及何時不適合)
只要你的顏色最終會以螢幕發光的形式呈現，就可以使用 sRGB 線性插值:網站、行動應用程式、圖示、投影片、圖表、社群圖檔、UI 模型，以及 CSS gradient。Color Mixer 的混合結果會與 CSS color-mix()、設計工具中的色彩混合模式，以及瀏覽器中的漸層引擎所產生的結果一致，因為它們都執行相同的逐通道平均。這種一致性正是整個工具的核心價值。
不要用它來預測真實的顏料、墨水、染料或色素在紙上混合後的結果。那是減法混色，行為差異極大:紅色顏料加上藍色顏料會產生深色混濁的紫色或棕色，因為每種顏料都會吸收照射光線的一部分。基於螢幕的混合無法模擬這種情況，而任何基於 RGB 值運算的誠實工具也都無法做到。如果你需要顏料方面的預測，你需要一套專門針對顏料的系統。如果你需要的是數位色彩混合——這幾乎涵蓋你曾經輸入的每一個十六進位色碼的使用情境——那麼 Color Mixer 的數學運算正是你所需要的。
實際範例:兩個品牌藍的 30/70 混合
假設你有一個起始藍色 #3b82f6 (rgb 59, 130, 246) 與一個青綠色 #10b981 (rgb 16, 185, 129)，而你想要的是從藍色往青綠色方向 30% 處的混合結果。將 Color A 設為 #3b82f6,Color B 設為 #10b981，並將滑桿設為 30%。將每個通道代入公式:
- 紅色:round(59 × 0.7 + 16 × 0.3) = round(41.3 + 4.8) = round(46.1) = 46
- 綠色:round(130 × 0.7 + 185 × 0.3) = round(91 + 55.5) = round(146.5) = 147
- 藍色:round(246 × 0.7 + 129 × 0.3) = round(172.2 + 38.7) = round(210.9) = 211
結果為 rgb(46, 147, 211)，轉換為十六進位即為 #2e93d3。如果結果看起來與你的預期不符，一篇關於修正看起來錯誤的十六進位混色結果的指南會逐步說明最常見的檢查項目——比例方向錯誤、A 與 B 對調，或不小心用了減法預期——讓你能快速判斷問題出在輸入、運算，還是心理模型。
由於每個中間色都僅由兩個輸入值與一個比例所決定，因此你可以把數值寫進設計規格、交給同事，他們只要在工具中輸入相同的三個數字，就會得到相同的十六進位值。
隱私與效能說明
所有混色運算都是使用純 JavaScript 算術，在你的瀏覽器本地執行。不會上傳到任何伺服器、不需要註冊、不需要帳號，也沒有用量限制。在任何配備現代瀏覽器的裝置上，你想混合多少次兩個十六進位顏色都可以，而且你的輸入永遠不會離開你的裝置。這使得 Color Mixer 可以安全地用於品牌色、未公開的調色盤，或任何你不想分享的顏色值。
延伸閱讀:從十六進位色碼找出互補色的調色盤靈感。