混合兩個十六進位顏色的方式是計算每個通道的加權平均 — 結果 = round(A × (1 − 比率) + B × 比率) — 每當你需要一個介於兩個既有顏色之間、位置精確且可重現的新顏色時就能派上用場。是否要混合的決定取決於你的目的：你是想從兩個已知顏色衍生出一個新顏色(這種情況下混合是正確的做法)，還是從零開始尋找一個新顏色(這種情況下配色產生器或隨機挑選器通常更適合你)?如果你的目標是將品牌色稍微推向一個搭配色、找出漸層的真正中間點、在過渡中取樣十一個等距步階其中之一，或是產生一個可以用數字解釋的淡色或暗色變化，那麼混合兩個十六進位顏色就能給你一個確定性的答案。顏色混合器正是在你的瀏覽器中執行這套數學運算，並顯示結果的十六進位與 RGB 值，讓你可以直接貼到 CSS 或設計檔案中。
何時混合兩個十六進位顏色是正確的選擇
當你已經知道兩個端點，又想要一個介於兩者之間的特定、可辯護的值時，混合兩個十六進位顏色的決定就很單純。以下五種常見情況適合使用混合:
- 你需要一個精確的中間點。兩個既有顏色的字面 50/50 混合 — 例如，在主要按鈕色與警示色之間的過渡色，當兩者各自都不是最佳解答時。
- 你正在建立具有可重現步階的色階。圖表配色、漸層停駐點，以及從「良好」進展到「不良」的狀態指示，都需要等距的中間值。
- 你想把一個顏色往另一個顏色方向稍微推移。將品牌藍色往青色方向移動 20% 作為 hover 狀態，或往深藍方向移動 10% 作為 active 狀態，就能得到一個與原始顏色在數學上綁定的受控變化。
- 你想要特定距離的淡色或暗色。30% 的白色淡色或 20% 的黑色暗色，以與白色或黑色混合的方式表示，在不同作業階段和工具之間都能重現。
- 你需要一個符合 CSS 漸層內插方式的值。如果你要手動挑選第三個漸層停駐點，讓它落在兩個錨點之間，瀏覽器會使用 sRGB 線性內插來繪製兩者之間的色彩。在你的混合中採用相同的數學，才能讓你的 CSS 誠實反映結果。
在所有這些情況中，根本問題都是「A 與 B 之間位置 X 上是什麼顏色?」混合能直接以數值結果回答這個問題。
何時不需要混合 — 改為挑選或產生
當你實際上沒有兩個有意義的起始顏色，或你嘗試回答的問題不是「這兩個顏色之間是什麼?」而是「什麼顏色跟這個搭配?」或「這裡該用什麼顏色?」時，混合就是錯誤的工具。
在以下情況下改為挑選或產生:
- 你有一個顏色，想要一個和諧的搭配色。顏色配色產生器會從單一基準色回傳互補色、類似色和三元群的配色組合。將你的基準色與任意的輔助色混合，預設並不會產生和諧 — 它只會給你一個中間點，這是兩回事。
- 你需要一個沒有任何限制、全新的顏色。隨機顏色產生器可以自由取樣。混合會強制在兩個輸入之間建立關係，如果你沒有有意義的輸入，結果也就沒有意義。
- 你正在挑選一組前景/背景配對以確保可讀性。顏色對比檢查器會告訴你所選的配對是否通過 WCAG AA 或 AAA。混合只會告訴你兩者之間是什麼顏色，並不能直接回答無障礙方面的問題。
- 你需要一個適合印刷或具名的顏色。具名顏色表或 RGB 轉 CMYK 轉換器處理的是不同的輸出色彩空間。sRGB 內插並無法轉譯為油墨混合或具名色票，所以在這些情境下結果不會有意義。
模式很簡單:如果你能命名兩個端點，就混合。如果你只能命名一個端點或兩個都無法命名，就先挑選或產生，等到你真的有兩個想要建立關係的顏色後，再回到混合。
如何在瀏覽器中混合兩個十六進位顏色
使用顏色混合器，你可以透過五個步驟混合兩個十六進位顏色。所有運算都在你的瀏覽器本機執行，不需要上傳，也不需要註冊。
- 在「Color A」欄位輸入你的第一個顏色。你可以輸入簡寫的十六進位如 #f00、完整的十六進位如 #3b82f6，或 rgb() 字串如 rgb(59, 130, 246)。多餘的空格、缺少井字號，以及大小寫混用都可以接受。你也可以點選欄位旁的色塊以視覺方式挑選。
- 以相同方式在「Color B」欄位輸入你的第二個顏色 — 十六進位、rgb()，或挑選器都可以。
- 拖曳比率滑桿來設定混合比率。0% 是純 Color A,100% 是純 Color B,50% 則是精確的中間點。拖曳時結果會即時更新。
- 在結果面板中讀取混合顏色的十六進位與 RGB 值。下方的漸層條會顯示兩個顏色之間十一個等距步階，讓你可以目測賞心悅目的中間色落在哪裡。
- 點選「複製」將結果的十六進位值放到剪貼簿，準備貼到 CSS、設計檔案或圖表設定中。
滑桿旁的標籤會隨時顯示目前的比例(例如「70% A / 30% B」)，所以你找到的任何混合都是可重現的 — 之後回到相同的比率，就會得到相同的十六進位值。
sRGB 線性內插實際做了什麼(以及沒做什麼)
顏色混合器使用簡單的 sRGB 線性內插來混合。針對紅、綠、藍每個通道，結果是一個加權平均:
結果 = round(A × (1 − 比率) + B × 比率)
其中比率會被限制在 [0, 1]，每個通道則限制在 0–255。當比率為 0.5 時，你會得到兩個通道值的精確中間點。這與 CSS 漸層和大多數 UI 工具使用的數學相同，這也是為什麼混合結果會與瀏覽器在兩個漸層停駐點之間繪製的結果一致。
演算範例 — 以 50% 混合純紅色 (#ff0000) 與純藍色 (#0000ff):
- 紅色通道: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，一個乾淨的洋紅色 — 正是顏色混合器所顯示的結果。
要注意這「不是」什麼。sRGB 線性內插混合的是螢幕光線的數值，而不是實體的顏料。它不是經過 gamma 校正的光學混色，也不是減法的顏料或油墨混合。這就是為什麼這裡紅色加藍色會得到洋紅色，而在調色盤上實體混合紅色和藍色顏料會得到混濁的深紫色或棕色。對於任何螢幕上的工作 — 網站、應用程式、圖示、圖表 — sRGB 內插是正確的模型。若要預測丙烯顏料或印刷油墨在紙上會如何混合，任何基於螢幕的混合都無法模擬，這個工具也不會假裝可以。
需要混合顏色的常見情境
一旦你決定混合是正確的做法，以下是能真正發揮作用的一些實際情境:
- 品牌的淡色與暗色。你有一個主要品牌色，需要 10%、20% 或 40% 的較淺或較深版本，用於背景、hover 狀態或停用控制項。以精確比率將你的品牌色與白色或黑色混合，就能得到可重現的淡色與暗色。
- 漸層停駐點。你正在建立兩個錨點顏色之間的漸層，需要第三個中間停駐點，剛好落在正中央(或 30/70，或你的設計要求的任何比例)。混合能讓你不靠目測就得到那個停駐點。
- 圖表配色。連續型或分歧型的配色需要等距的步階。顏色混合器的十一階漸層條，是在你承諾使用特定停駐點之前，從兩個端點快速取樣配色的好方法。
- 過渡型的 UI 狀態。Hover、focus、active 和 selected 狀態經常需要一個落在靜止狀態與較強強調色之間的顏色。以 70/30 或 60/40 進行混合，能得到一個與兩個錨點都相關聯的乾淨中間色。
- 設計探索。你想在承諾之前先看看兩個顏色在中間相遇的樣子。漸層條讓你並排比較所有十一個步階，並有信心地挑選一個。
在每一種情況下，根本問題都是「A 與 B 之間位置 X 上是什麼值?」 — 而這正是混合所能回答的。
混合與替代方案的快速對照
以下整理出「我需要混合兩個十六進位顏色嗎?」這個問題與常見替代方案的對應關係:
| 你的情境 | 最佳選擇 | 原因 |
|---|---|---|
| 你已知兩個顏色，並想要它們之間的精確值 | 顏色混合器 | 在你選擇的比率下，以確定性的方式計算每個通道的加權平均 |
| 你有一個顏色，需要一個和諧的配色 | 顏色配色產生器 | 依設計規則回傳互補色、類似色、三元群的配色組合 |
| 你需要一個沒有任何限制、全新的顏色 | 隨機顏色產生器 | 不需要兩個輸入即可自由取樣 |
| 你需要一組通過 WCAG 的前景/背景配對 | 顏色對比檢查器 | 驗證對比是否符合 AA/AAA，而不是回答中間點的問題 |
| 你需要印刷用的 CMYK 預覽 | RGB 轉 CMYK 轉換器 | 處理印刷色彩空間，而這是 sRGB 混合無法模擬的 |
| 你需要漸層的 CSS 程式碼，而不只是中間點 | 顏色漸層產生器 | 回傳可直接上線使用的線性或放射狀 CSS |
經驗法則:如果你能命名兩個端點，就混合。如果你只能命名一個端點或兩個都無法命名，就先挑選或產生 — 等到你真的有兩個想要建立關係的特定顏色後，再回到混合。
若想深入了解，請參閱十六進位轉 RGB 詳解:CSS 標記法與通道數學。
若想深入了解，請參閱在 Android 上將 RGB 轉換為十六進位:在你的手機瀏覽器中轉換。