當你混合兩個 HEX 顏色時，最常遇到的問題包括：意外的色偏、相距過遠的色相之間出現混濁的中間色，以及螢幕光混合與實體顏料混合之間的混淆。這些都不是錯誤——它們是十六進位數值運作方式、Color Mixer 混合方式，以及眼睛解讀結果方式的可預期後果。一旦你知道每個警告訊號的意義，每次混色都會變得有用，而不是令人驚訝。

當你使用 Color Mixer 混合兩個 HEX 顏色時，運算方式很直接——針對每個紅、綠、藍色頻道，使用 sRGB 線性內插計算加權平均值。但你看到的結果完全取決於兩個容易搞錯的要素：你的輸入實際上是什麼，以及你的大腦預期混合後看起來是什麼樣子。大多數「錯誤」的結果來自這兩種不匹配之一，而非工具本身的問題，而且幾乎每個修正方法都只需要調整一次。

what can go wrong when i use mix two hex colors
混合兩個 HEX 顏色時可能出錯的地方

為什麼 HEX 混合很少符合你的心中所想

十六進位數值描述的是螢幕光，而非顏料。每對十六進位數字會告訴螢幕在該像素上要發射多少紅、綠、藍光，範圍是 0–255。當你請工具混合兩個顏色時，最常見的混合方式——包括 CSS 漸層、Figma、Sketch 和 Color Mixer 所使用的方式——是取這些 0–255 值的逐頻道平均值。這種方式快速、可預測，而且正是大多數數位設計所需要的。

問題在於，人類的顏色感知並非線性。在設計系統中看起來和諧的兩個色相，當你平均其十六進位色頻道時，可能會產生沉悶、偏灰的中間色，因為眼睛對中間色調變化的敏感度，高於對陰影變化的敏感度。因此，如果你拿鮮豔的鈷藍色和鮮豔的琥珀色，要求 50% 的混合比例，你經常會得到一個黯淡的棕色，而非清爽的過渡色。這並非錯誤——這是數學運算的真實結果，這也是為什麼大多數設計師會從漸層條上挑選中間的混合步驟，而非猜測一個比例。

另一個心智模型的落差，來自於把這種混合當作兩個顏料來處理。紅色顏料和藍色顏料在調色盤上混合時，會吸收（減去）波長，這就是為什麼藝術家會預期出現泥色。像素值則是在每個頻道上增加亮度，這就是為什麼同樣的輸入在螢幕上會呈現乾淨的加法式中間色。兩者都是真實的物理現象；只是不同的物理現象。

三個最常見、看起來「錯誤」的混合結果

這三種結果幾乎會讓每位首次使用的使用者措手不及。它們在數學上是正確的——問題在於預期，而非結果。

你的嘗試 Color Mixer 回傳的結果 為什麼會讓人驚訝
將純紅 (#ff0000) 與純藍 (#0000ff) 以 50% 混合 乾淨的洋紅色 (#800080) 大多數人預期會出現像顏料般的混濁紫色；但螢幕光混合會產生加法風格的乾淨中間值。
將暖紅色與冷綠色取平均值 黯淡的橄欖色或卡其色調 兩個色相在色彩上相互抵消；逐頻道平均會去除大部分飽和度。
將黑色與亮色以 50% 混合 去飽和的深色，而非原色的更深版本 8 位元空間中的 sRGB 內插無法保留原始色相的亮度，因為沒有「負的」色頻值可以扣除。

這三個結果在數學上都是正確的。陷阱在於把 50% 的中點當成設計建議，但實務上，大多數可用的銜接顏色比較靠近其中一個端點。Color Mixer 的漸層條讓你一眼就能看到每個步驟，而令人滿意的中間色幾乎都位於像 20/80 或 30/70 這樣的比例，而非平均分配。

悄悄改變結果的輸入錯誤

由於十六進位標記法非常簡潔——只有三對數字——小筆誤很容易被忽略。Color Mixer 在幾個方面很寬容：它接受簡寫十六進位如 #f00、完整十六進位如 #3b82f6，以及 rgb() 字串如 rgb(59, 130, 246)；多餘的空格和缺少的井字號會被忽略，字母大小寫也不拘。但當你手動輸入或從其他應用程式複製時，錯誤仍然會溜進來。

  • 兩個數字調換，產生了與預期不同的紅色（例如 #f00 與 #0f00）。
  • 假設選擇器回傳的顏色正好是你在螢幕上看到的顏色——次像素精度和色彩管理可能會造成偏移。
  • 複製了 CSS 變數、HSL 字串或具名顏色，而非真正的十六進位，導致工具收到空白或無效的輸入。
  • 貼上時帶有多餘的空白字元或殘留的引號，使較嚴格的工具無法正確解析。
  • 忘記了你原本打算加入的 Alpha 頻道，結果變成完全不透明，反之亦然。

驗證輸入最快的方法是讀回 RGB 結果：每個十六進位數值都對應到一組唯一的紅/綠/藍三元組，如果這些數字與你記憶中的顏色不符，代表輸入有誤。使用每個輸入框旁的選擇色塊是快速取得已知良好起始色的方式，因為系統會為每次點擊色塊回傳精確的十六進位值。

如何混合兩個 HEX 顏色並及早發現問題

請依照下列步驟組合兩個十六進位值，以得到可預期且可重複使用的結果：

  1. 在瀏覽器中開啟 Color Mixer。不需要安裝、不需要登入，也不會上傳任何資料。
  2. 將第一個顏色輸入 Color A 欄位——簡寫十六進位如 #f00、完整十六進位如 #3b82f6，或 rgb() 字串皆可。空格、大寫，以及缺少的井字號都能容忍。
  3. 使用相同格式將第二個顏色輸入 Color B 欄位，或點擊輸入框旁的色塊以視覺方式挑選。
  4. 拖曳比例滑桿以選擇混合強度。零百分比回傳純 Color A，百分之百回傳純 Color B，五十百分比則是逐頻道的精確中點。
  5. 閱讀結果面板以查看小寫的六位數十六進位與對應的 rgb() 字串；使用漸層條可預覽兩個端點之間全部十一個等距步驟。
  6. 點擊 Copy 將結果十六進位值複製到剪貼簿，然後貼到 CSS、Figma 或任何會使用該顏色的地方。

如果結果令你驚訝，最常見的原因是其中一個輸入有誤。請重新閱讀工具針對每個輸入框顯示的 RGB 三元組，確認它符合你原本的輸入——修正筆誤即可解決大多數「看起來錯誤」的結果，完全不需要更動數學運算。

當結果與品牌色不符時

品牌通常以 sRGB 十六進位發布其調色盤，而 Color Mixer 正是為此而設計——它使用與 CSS、設計工具和多數 UI 系統相同的 sRGB 線性內插，因此用此工具混合的品牌色會與你在正式程式碼中得到的結果一致。如果你產生的混合十六進位在視覺上與品牌參考色不符，原因幾乎一定是下列三者之一：

  • 其中一個輸入實際上並非品牌色。請讀回 RGB 數值並與官方規格比對，再次確認。
  • 目標媒介是印刷品而非螢幕。sRGB 混合無法預測 CMYK 油墨的混合；若要這麼做，你需要的是具備印刷感知能力的轉換工具，以及經過打樣確認的樣本，而非基於螢幕的平均值。
  • 瀏覽器或作業系統的色彩管理正以更寬廣的色域（P3 或 Display P3）解讀輸入。在這種情況下十六進位值並未改變，但顯示出來的顏色看起來有偏移，你可能需要在 CSS 中指定色彩描述檔，將結果鎖回 sRGB。

若在排除上述情況後混合結果仍看起來不對，需要更深入的診斷時，如何修正看起來錯誤的 HEX 顏色混合結果指南會逐步說明更精準的疑難排解步驟。

處理較困難混合問題的相關工具

如果你面對的真正問題並非單純的頻道平均，同類別中的其他工具能涵蓋這些邊緣情況：

  • 若要圍繞基準色產生平衡的調色盤——互補色、類似色、三等分色及其他和諧法則——Color Palette Generator 直接套用色彩理論，而非依賴單一中點混合。
  • 若要檢查兩個顏色是否符合 WCAG AA 或 AAA 對比標準，Color Contrast Checker 會給你通過／不通過的分數與即時預覽，而非憑視覺猜測。
  • 若要預測印刷結果，RGB to CMYK converter 會顯示螢幕十六進位值對應的大致印刷顏色，但請注意，任何未經校準的螢幕轉印刷轉換都只是起點。

只要你的最終媒介是螢幕——網頁、應用程式、儀表板、簡報、社群圖片，以及任何由像素算繪的內容——Color Mixer 就一直是合適的工具。一旦你的答案必須經得起油墨、布料、染料或顏料的考驗，請改用具備印刷或材質感知能力的工具，並請理解，任何基於螢幕的混合都無法預測實體結果。

若想進一步了解，請參閱 對比色計算機：找出 HEX 顏色的 RGB 反相值。