加總型色彩混合器會把兩種顏色的紅、綠、藍三個通道各自獨立平均，使用公式 result = round(A × (1 − ratio) + B × ratio)，其中 ratio 會被限制在 [0, 1] 區間內。這套運算採用的是一般的 8-bit sRGB 值 —— 也就是 CSS 漸層、設計工具，以及大多數 UI 系統所使用的同一種方式 —— 因此無論何時你需要精確取得兩種顏色中點的十六進位色碼或 rgb() 值、擷取調色盤上的色彩節點、撰寫漸層 CSS，或是把某個品牌色稍微推向另一個顏色，只要是螢幕上會看到的任務，它都是正確的模型。Color Mixer 把這個公式直接放進你的瀏覽器裡:輸入或挑選 Color A 和 Color B，拖動比例滑桿，放開手的那一刻就能讀到混合後的十六進位色碼和 RGB 值。所有的重新計算都在本機進行，所以輸入內容不會離開分頁，也沒有所謂的使用次數限制。下方會說明這個數學本身、解析器接受的確切輸入格式、逐步操作示範，以及一個你可以親手驗算的紅藍混合範例。
顏料混合是減法的:在真實的調色盤上，把紅色和藍色的壓克力顏料混在一起，會得到一種又暗又混濁的紫色。加總型色彩混合器則把顏色當作加法式的螢幕光線值來處理，這與所有網站、應用程式和圖表最終在螢幕上呈現的方式相同。
任何加總型色彩混合器背後的一行公式
加總型色彩混合器的核心概念，是把每個顏色視為介於 0 到 255 之間的三個數字 —— 即紅、綠、藍三個通道 —— 然後在 Color A 和 Color B 之間，對這三個數字進行加權平均。這個公式會對每個通道獨立套用:
result = round(A × (1 − ratio) + B × ratio)
ratio 是介於 0 到 1 之間的一個數字，由滑桿控制。當 ratio = 0 時，結果就是 Color A;當 ratio = 1 時，結果就是 Color B;當 ratio = 0.5 時，每個通道都是兩個輸入通道的純中點。各通道的值會被限制在 0–255 範圍內，並四捨五入到最近的整數，這正是答案看起來是乾淨的十六進位數值、而不是帶有小數的原因。
為了實際看到公式的運作，我們把純紅 #ff0000 和純藍 #0000ff 以 50/50 的中點進行混合:
- 紅色通道:round(255 × 0.5 + 0 × 0.5) = round(127.5) = 128
- 綠色通道:round(0 × 0.5 + 0 × 0.5) = 0
- 藍色通道:round(0 × 0.5 + 255 × 0.5) = round(127.5) = 128
- 合併結果:rgb(128, 0, 128) = #800080，一個乾淨的洋紅色
這個洋紅色正是 Color Mixer 在 50% 時所輸出的結果，你可以在試算表中、用同樣兩個端點寫成的 CSS 漸層，或任何執行純加權平均的 RGB 感知設計工具中，用同一條公式驗證它。
數位加總型混合器能做什麼 —— 以及它不能做什麼
加總型色彩混合器中的「加總」，指的是加法式的螢幕光線運算，而非顏料運算。它和 CSS 漸層以及大多數影像編輯器屬於同一族行為:光線值以線性、可相加的方式進行平均，使得螢幕上的混合結果永遠和你輸入的數字一致。只要你關心的是人眼在螢幕上看到的結果 —— 無論是網站背景、圖表數列、應用程式圖示，或是 UI 強調色 —— 這就是正確的模型。
它絕對不是真實油漆、墨水、染料或印刷油墨在紙上結合方式的模型。如果你混合紅色和藍色壓克力顏料，顏料會減去光線，結果會變成又暗又混濁的紫色或棕色。基於螢幕的混合器永遠只給你加法式的中點 —— 在上面的範例中是洋紅色 —— 因為這就是螢幕所呈現的真相。了解這點能省下很多困惑:當目標是一個可以貼進 CSS 或交給開發人員的數位色彩時，加法是正確的;當目標是預測印刷色樣或實體繪畫時，加法則會誤導你，這時候你需要的應該是支援 CMYK 或顏料模型的工具。
Color Mixer 同樣也不會嘗試對插值進行 gamma 校正。各通道直接從你所輸入的 0–255 sRGB 值讀取，這也正是 CSS、設計系統和視覺選色器所做的。對於混合色彩、探索調色盤，以及把一個顏色稍微推向另一個顏色，這樣的權衡已經足夠;只有在你從事知覺色彩科學研究時，這點才會成為關鍵，而那是另一個問題，需要不同的工具。
Color Mixer 可接受的輸入格式
你可以用以下任何一種格式把顏色填入任一個欄位:
| 格式 | 範例 | 說明 |
|---|---|---|
| 簡寫十六進位 | #f00 | 三位數十六進位會自動展開為完整的六位數形式 |
| 完整十六進位 | #3b82f6 | 六位數十六進位，帶有前置井字號 |
| rgb() 字串 | rgb(59, 130, 246) | 以逗號分隔的 8-bit 通道值 |
解析器具有容錯設計。前置井字號可有可無，多餘的空白會被忽略，大寫和小寫字母也都能正確處理。如果你偏好挑選而非輸入，每個欄位都有一個原生色彩色塊，可以開啟視覺選色器。如果你需要反向轉換 —— 例如，把 rgb() 數值轉回十六進位 —— RGB to HEX 工具可以一次完成。
如何使用 Color Mixer 混合兩種顏色
- 在 Color A 欄位輸入你的第一個顏色，可以使用像 #f00 或 #3b82f6 的十六進位值、rgb() 字串，或點擊色塊以視覺方式挑選。
- 在 Color B 欄位以同樣的方式輸入第二個顏色 —— 十六進位、rgb() 或色塊，任何組合都可以使用。
- 拖動比例滑桿來設定混合比例。0% 是純 A,100% 是純 B，而 50% 則是精確的中點。
- 在結果面板中讀取混合顏色的十六進位和 rgb() 值，並觀察漸層條的更新，預覽兩種顏色之間的每一個步階。
- 點擊 Copy 把結果的十六進位色碼放進剪貼簿，即可貼入 CSS、設計檔或程式碼編輯器中。
滑桿每次移動都會立即重新計算混合結果，因此你可以快速滑過數十種比例，直到找到看起來最合適的那一個。
如何閱讀結果面板和漸層條
結果面板同時做兩件事。它永遠會顯示小寫的六位數十六進位色碼(例如 #7f3fa0)以及等價的 rgb() 字串(例如 rgb(127, 63, 160))，讓你可以依目標檔案的需求複製任一種格式。在數值旁邊，比例標籤會以淺白的文字顯示目前的比例分配 —— 例如「70% A / 30% B」 —— 這讓任何結果即使在你已經移動過滑桿之後，仍然可以重現。
漸層條橫貫整個結果面板的寬度，顯示兩種顏色之間十一個等距的混合步階，包含兩端的端點。這給你一個即時的視覺檢查:你可以掃視整條色帶，看看實際的視覺中點落在哪裡，而且常常會發現一個比 50% 更討喜的中間值。如果 A 的 70% 和 B 的 30% 看起來比 50/50 更接近你想要的結果，把滑桿鎖定在該處，複製十六進位色碼，這樣就完成了。
漸層同時也是快速判斷你選的兩種顏色是否能搭配得宜的方法。平滑、均勻的色帶代表各通道的插值非常乾淨;如果在中段突然出現跳躍或接近全黑的低谷，通常代表其中一個端點偏離了你原本構思的調色範圍。把該端點稍微推向它的鄰近顏色，色帶往往在幾格滑桿之內就會恢復均勻。
什麼時候該使用加總型色彩混合器
| 任務 | 為什麼加總型混合器適合 | 需要注意的地方 |
|---|---|---|
| 求出兩個品牌色的中點 | 不必猜測，直接回傳精確的 50/50 十六進位色碼 | 結果是螢幕精確的，不是印刷精確的 |
| 產生漸層節點 | 與 CSS、Figma 和大多數圖表函式庫使用的數學一致 | 挑選的端點之間要距離夠遠，才容易辨識 |
| 從影像中擷取調色盤 | 把兩個色樣平均成可用的中間值 | 目測漸層以確認步階感覺均勻 |
| 把一個顏色稍微推向另一個 | 10–30% 的比例是加入色調或陰影的乾淨做法 | 小比例很敏感 —— 複製後務必再次確認十六進位色碼 |
在這些情境下，加法式的平均與螢幕實際呈現的結果一致。如果是印刷、布料染色，或任何以手工施加的顏料，請改用支援 CMYK 或顏料模型的工作流程 —— 那套數學本質上不同，加法模型對照實體樣品時會顯得不對。
隱私與運算執行位置
Color Mixer 所處理的每一個顏色都只留在你的瀏覽器分頁中。無論是平均運算、滑桿回應、漸層預覽，或是複製到剪貼簿，全部都在本機執行 —— 沒有任何顏色、十六進位值或 rgb() 輸入會被上傳到伺服器，不需要帳號或註冊，也沒有任何每日使用次數限制。當你正在處理尚未公開的品牌調色盤、內部設計權杖，或是任何把底層數值上傳到第三方服務會構成問題的配色方案時，這點格外重要。
由於資料完全不會離開裝置，這個工具在飛機上、公司防火牆後，或借用他人電腦時的行為都完全相同 —— 唯一的網路呼叫僅限於載入頁面本身。一旦頁面開啟，你可以用任意數量的比例混合任意多組顏色，複製出每一個十六進位色碼，然後在不留任何痕跡的情況下關閉分頁。
延伸閱讀:Color Mixer:使用比例滑桿進行精確混合。
延伸閱讀:從單一十六進位色碼產生 CSS 可用的調色盤。