色彩混合器每次只要您提供相同的兩個 HEX 輸入和相同的比率，就會產生相同的十六進位輸出，因為它使用公式 result = round(A × (1 − ratio) + B × ratio) 對紅色、綠色和藍色通道計算出一個確定性的加權平均值。當您混合兩個十六進位顏色時，稍後唯一能重現完全相同結果的方法，就是知道您當時使用的兩個起始十六進位值和比率滑桿位置，因為數學運算中其他所有變數都是固定的。色彩混合器會一開始就把這三項資訊全部顯示出來:您輸入到「Color A」和「Color B」的十六進位值、目前以百分比表示的比率，以及以小寫六位數十六進位加上等效的 rgb() 字串呈現的精確結果。這種可視性正是讓混色可以重複的原因——您可以把輸入值和滑桿位置存成一個配方，或直接複製結果十六進位值，在其他工具中重製出相同的顏色。無論您是在產生漸層停色點、建立色票，或是取兩個品牌色之間的中間色，相同的輸入永遠會產生相同的輸出，數學運算在每次使用之間都不會改變。
是什麼讓 HEX 顏色混合可以重現
當相同的輸入總是產生相同的數值輸出時，數位顏色混合就是可重現的。在色彩混合器中，這代表三件事必須保持不變:Color A 的十六進位值、Color B 的十六進位值，以及比率滑桿位置。接著工具會在 sRGB 色域中對每個通道執行線性內插，將每個通道四捨五入到 0 到 255 之間最接近的整數，並把結果渲染為小寫的六位數十六進位代碼。
因為數學運算是確定性的，所以沒有隨機成分、沒有知覺調整，也沒有色彩描述檔協商。如果您在兩個顏色欄位中輸入相同的十六進位值，並把滑桿拖到相同的百分比，結果面板就會每次、每個瀏覽器、每台裝置都顯示完全相同的十六進位值和相同的 rgb() 字串。這就是 sRGB 線性內插的核心承諾:它是一個閉合形式的算術運算，而不是創意判斷。
您可以手動驗算這個數學。當比率為 0.5 時，公式會化簡為每個通道的 round((A + B) / 2)。把 #ff0000 和 #0000ff 以 50% 混合，紅色通道為 round((255 + 0) / 2) = 128，綠色通道為 round((0 + 0) / 2) = 0，藍色通道為 round((0 + 255) / 2) = 128。轉成十六進位就是 #800080——也就是工具所顯示的純粹洋紅色。在任何其他裝置上用任何其他支援 sRGB 的工具執行同一個計算，都會得到相同的答案。
重現任何混合所需的輸入
若要稍後重複一次混合，您只需要記錄四項資訊。前兩項是您原本輸入到 Color A 和 Color B 的十六進位值，包括前端的井字號和大寫小寫，因為雖然工具容許變化形式，但清楚的紀錄可以消除任何歧義。第三項是比率滑桿位置，工具永遠以百分比分配顯示，例如 70% A / 30% B。第四項則是結果十六進位本身，它扮演著驗證碼的角色:如果您重現的結果和儲存的結果不符，代表前三項輸入中有一項有誤。
順序很重要。在剛好 50% 時，交換 Color A 和 Color B 並不會改變運算結果，但在其他比率下，交換會改變哪個顏色佔主導。例如，把 #3b82f6 和 #ef4444 以 30% A / 70% B 混合會偏紅，而同樣這一組十六進位以 70% A / 30% B 混合則會偏藍。請務必記錄哪個十六進位值放進了哪個欄位。
您不需要記錄輸入格式。色彩混合器接受三種等效的標示法——短碼十六進位如 #f00、完整十六進位如 #3b82f6，以及 rgb() 字串如 rgb(59, 130, 246)——在解析後都會視為同一個顏色。多餘的空格、缺少的井字號、以及大小寫混用都被容許，因此無論您一開始用的是哪種標示法，之後都可以用其他任一種方式重新輸入同一個顏色並得到相同的結果。
| 格式 | 範例 | 解析方式 |
|---|---|---|
| 短碼十六進位 | #f00 | 展開為 #ff0000 |
| 完整十六進位 | #3b82f6 | 直接作為六個通道使用 |
| rgb() 字串 | rgb(59, 130, 246) | 十進位通道轉換為十六進位 |
| 選色器色塊 | 點擊開啟 | 所選顏色以相同方式解析 |
混合兩個 HEX 顏色並鎖定可重現的結果
- 把您的第一個顏色以十六進位值(例如 #f00 或 #3b82f6)輸入到「Color A」欄位，或貼上 rgb() 字串(例如 rgb(59, 130, 246));多餘的空格、缺少的井字號以及大寫字母都可以接受。
- 用同樣的方式把第二個顏色輸入到「Color B」，視您手邊方便哪一種，選擇十六進位標示法或 rgb() 標示法皆可。
- 如果您想以視覺方式選色而不是手動輸入，可以點擊任一欄位旁的色塊來開啟原生選色器。
- 拖動比率滑桿來設定混合比例——0% 是純 Color A,100% 是純 Color B，而 50% 是兩個通道值之間的精確中點。
- 查看結果面板所顯示的混合顏色，它在您移動滑桿時會即時顯示小寫六位數十六進位和 rgb() 字串。
- 使用漸層條一目了然地預覽兩個顏色之間的每一步，從 A 到 B 共含十一個等距的混合步驟，並包含兩個端點。
- 點擊「複製」把結果十六進位值放到剪貼簿，然後把它連同 Color A 十六進位值、Color B 十六進位值以及您使用的比率，一起貼到您的筆記、設計檔或樣式表中。
若要在滑桿上獲得可重現的精準度，使用比率滑桿進行精準混合這篇指南介紹了如何讀取百分比標籤，以及如何在不出現超調的情況下準確停在例如 30/70 的比例。
為什麼同樣的兩個 HEX 顏色總是會產生相同的結果
色彩混合器使用閉合形式的加權平均在 sRGB 色域中混合顏色，這代表沒有任何隱藏變數會在每次使用之間產生差異。其實作方式是針對紅色、綠色和藍色通道分別獨立計算 result = round(A × (1 − ratio) + B × ratio)，將通道值限制在 0 到 255 的整數範圍內，並把結果渲染為六位數小寫十六進位。在整個流程中，沒有抖動、沒有雜訊、沒有時間相依的元件，也沒有色彩描述檔轉換。只要重新輸入相同的輸入，您就一定會看到相同的輸出。
比率是唯一不是十六進位值的旋鈕，而且它甚至在被代入公式之前就會被限制在 0 到 1 的範圍內。只要您把滑桿位置記錄到最接近的整數百分比，您手動計算出來的結果就會和工具所顯示的結果一致。標籤永遠會以人類易讀的方式顯示分配比例，例如「70% A / 30% B」，這就是您在儲存配方時應該寫在兩個十六進位值旁邊的內容。
所有的數學運算都在您的瀏覽器中使用單純的色彩算術在本地執行。不會上傳到伺服器，沒有註冊要求，也沒有使用次數限制，因此兩次使用之間唯一可能改變的就是您所提供的輸入。只要讓輸入保持不變，結果就會保持不變。
螢幕上的顏色混合在哪些地方和真實顏料不同
sRGB 線性內插混合的是螢幕光線值，而不是實體顏料。它是屬於加法式的混合，和多數設計工具、CSS 漸層以及 UI 系統使用的數學相同，但它絕對不是減法的油漆或油墨混合。實際上的結果是，兩個互補的數位顏色會混合成一個乾淨的中間點，而同樣的兩種顏料在實體調色盤上混合時，則會產生更暗、更濁的結果。在色彩混合器中把 #ff0000 和 #0000ff 混合會得到 #800080，也就是乾淨的洋紅色。而把紅色和藍色的壓克力顏料在紙上混合，則傾向於產生偏暗、去飽和的紫或棕色。
在選擇適合工作的工具時，這種差異非常重要。如果您是在為網站、應用程式、圖示、圖表或任何螢幕上的設計匹配數位顏色，sRGB 內插正是您想要的——而色彩混合器的輸出會和 CSS 的 color-mix()、Photoshop 的 RGB 混合模式以及大多數色票工具一致。如果您是想預測真實的壓克力、油畫顏料或印刷油墨在紙上會如何混合，基於螢幕的混合並不會模擬減法的物理特性，任何誠實的螢幕工具都做不到這一點。
漸層條讓這種加法特性變得顯而易見。它會顯示兩個顏色之間十一個等距的混合步驟，並包含兩個端點，讓您可以一目了然地看到整個過渡，並挑選出符合您設計的中間色。因為每一步都是用相同的確定性公式計算出來的，整個漸層都可以僅從這兩個輸入重現出來——您不需要逐一儲存每個中間顏色。
相關閱讀:從圖片產生色票產生器:從一個 HEX 開始。