選擇正確的方法來混合兩個 HEX 顏色時，首先要做的決定是：你混合的是光還是顏料？對於所有數位用途——網站、應用程式、圖示、儀表板、CSS 漸層——正確的方法是 sRGB 線性內插，對紅、綠、藍三個通道分別計算 result = round(A * (1 - ratio) + B * ratio)。這與瀏覽器、設計工具和多數 UI 系統使用的數學相同，這就是為什麼它回傳的顏色會與你螢幕實際顯示的一致。如果你需要預測兩種真實顏料在紙上混合的結果，沒有任何螢幕工具能給你準確的答案，因為實體顏料是以「減法」方式混合，而不是「加法」。大多數搜尋 HEX 顏色混合方法的讀者都是在螢幕上作業，所以正確的起點是 Color Mixer，它會對你提供的任意兩種顏色執行 sRGB 線性內插，讓你用滑桿選擇混合比例，並回傳結果的精確 hex 與 rgb() 值。本文的其餘部分將逐步說明哪種方法適合哪種目標、如何輸入你的顏色，以及如何解讀結果。

how do i choose the right approach to use mix two hex colors
選擇正確的方法來混合兩個 HEX 顏色

三種混合方法與各自的使用時機

「混合」兩種顏色有三種數學上不同的方式，而你應該選擇哪一種，完全取決於你想表達什麼。選錯方法會得到一個技術上可計算、但對你的媒介來說明顯錯誤的結果。

sRGB 線性內插將每個顏色視為三個獨立的 8 位元通道（紅、綠、藍），並對這些通道取加權平均值。通道會被限制在 0–255 範圍內並四捨五入。由於螢幕像素是以「加法」方式發光，這與螢幕實體呈現兩個像素顏色間任何混合的方式一致。它是網頁 UI、應用程式設計、圖表、CSS 漸層、圖示組，以及任何螢幕上調色工作的正確選擇。

Gamma 校正光學混合更接近物理實況。它將每個 sRGB 通道轉換為線性光，對線性值加權平均，再轉換回 sRGB。這個結果更接近你的眼睛在兩道色光實際重疊時所感知的樣子，常用於 HDR、PBR 渲染和高端合成流程。對於一般 UI 工作來說這是大材小用，而且往往會讓中間調看起來比 sRGB 內插略暗。

減法顏料混合模擬的是真實油墨或顏料混合時的情況。它由 Kubelka–Munk 方程式或簡化的 CMYK 近似法主導，而非平均通道。這是唯一能預測兩種印刷油墨在銅版紙上會如何混合的分支，與瀏覽器混合兩個 hex 值的方式完全無關。

方法適用情境#ff0000 + #0000ff 在 50% 時的範例結果
sRGB 線性內插網頁、應用程式、圖示、圖表、CSS 漸層乾淨的洋紅，#800080
Gamma 校正光學混合HDR、PBR 渲染、光線模擬在線性光空間中略暗的洋紅
減法顏料混合印刷打樣、紙上顏料混合混濁的暗紫或棕色

除非你在做 HDR 合成或印刷打樣，否則 sRGB 線性內插就是你要的方法，而這正是 Color Mixer 所實作的。

依輸出目標選擇對應的方法

當你從要設計的媒介出發，而不是從手上現有的顏色出發時，選擇正確方法會更容易。

  • 螢幕設計——網站、應用程式、儀表板、圖示、圖表。使用 sRGB 內插。CSS、瀏覽器渲染引擎和多數設計工具都正是這麼做，因此你產生的數值在螢幕上的呈現會與色票預期一致。
  • 品牌色彩階梯——找出兩個品牌色之間的中點。50% 的 sRGB 內插會給出兩色在通道空間中的幾何中心，這是多數風格指南用於濃淡色階的慣例。
  • CSS 或 SVG 漸層的停駐點。多比例（例如 0%、25%、50%、75%、100%）的 sRGB 內插能給出可重現的停駐點，任何瀏覽器都會以相同方式渲染。
  • 預測實體顏料或油墨的混合。改用 CMYK 感知或 Kubelka–Munk 工作流程。包括 Color Mixer 在內的螢幕工具都不會誠實地模擬這點。螢幕 RGB 與印刷百分比之間的近似轉換是另一個問題，交由 RGB to CMYK Converter 處理。
  • HDR 或 PBR 光線模擬。使用 gamma 校正流程，而非螢幕光的混合。

如果你的目標是任何螢幕上的東西，sRGB 內插既是選擇也是最忠實的選擇。

選擇正確的輸入格式

你撰寫 hex 顏色的方式不會改變它所代表的顏色——#f00、#FF0000 和 rgb(255, 0, 0) 都描述純紅色。Color Mixer 接受這三種格式，因此你可以直接貼上現有的格式，無需重新撰寫。

  • 簡寫 hex——三位數，每位數會展開為完整的兩位數。#f00 表示 #ff0000，而 #0af 表示 #00aaff。
  • 完整 hex——六位數並加上前置井字號，例如 #3b82f6。大小寫皆可，前置井字號可有可無。
  • rgb() 字串——CSS 風格的函式，包含三個整數通道，例如 rgb(59, 130, 246)。允許多餘的空白字元，也容忍缺少前置井字號。

你也可以點擊任一欄位旁的色票，使用瀏覽器內建的選色器以視覺方式挑選顏色。如果你只有 CSS 命名顏色或截圖，請先透過 HEX to RGB Converter 或 RGB to HEX 工具轉換為 hex 或 RGB，再貼入 Color Mixer。

如何混合兩個 HEX 顏色

  1. 在 Color A 欄位中輸入第一個顏色，可以是 hex 值（例如 #f00 或 #3b82f6）或 rgb() 字串，也可以點擊色票以視覺方式挑選。
  2. 以相同方式在 Color B 欄位中輸入第二個顏色——簡寫 hex、完整 hex 或 rgb() 字串皆可。
  3. 拖曳比例滑桿，設定兩種顏色在混合中的佔比：0% 為純 Color A，100% 為純 Color B，50% 為逐通道中點。
  4. 在結果面板中讀取混合顏色的 hex 與 RGB 值，並使用漸層條預覽兩色之間的每一個步階。
  5. 點擊「複製」將結果的 hex 放到剪貼簿，以便貼入 CSS、Figma 或任何設計檔案中。

這五個步驟的完整說明，包括比例滑桿在非中點數值下的行為，已於 Color Mixer: Use the Ratio Slider for Precise Blends 中詳細介紹。

解讀結果：Hex、RGB 與漸層條

工具計算出混合結果後，螢幕上的三項資訊能幫助你決定是否採用：

  • 結果 hex。一個小寫六位數的 hex，可直接貼入 CSS、設計 token 或程式碼中。這是會被重複使用的標準值。
  • 結果 rgb() 字串。以三個整數通道表示的同一顏色，適用於偏好 rgb() 語法的工具。
  • 漸層條。兩端點之間十一個等距的混合步階，包含兩端在內。你可以掃視它，找出比精確中點更討喜的略偏暖或略偏冷的中間色。

比例標籤永遠會顯示目前的分配，例如「70% A / 30% B」，因此結果是可重現的——如果你找到喜歡的混合，只要將滑桿設回相同值即可重現該結果。結果面板與複製行為已於 How to Check the Result After Mixing Two HEX Colors 中有更完整的說明。

一個快速演算範例

為了讓公式更具體，將 #ff0000（純紅）與 #0000ff（純藍）以 50% 混合。

  • 紅色通道：round(255 * (1 - 0.5) + 0 * 0.5) = round(127.5) = 128 → 0x80
  • 綠色通道：round(0 * (1 - 0.5) + 0 * 0.5) = 0 → 0x00
  • 藍色通道：round(0 * (1 - 0.5) + 255 * 0.5) = round(127.5) = 128 → 0x80
  • 結果：#800080，乾淨的洋紅。

將 Color Mixer 的滑桿拖到 50%，並輸入同樣的兩種顏色來驗證。請注意，這個結果是純粹的加法混合——實體的紅色與藍色顏料在調色盤上會混合成混濁的暗紫色，這正是表示你為印刷專案選錯方法的警訊。

會改變你方法選擇的限制

在你選擇此方法時，sRGB 線性內插有幾個界線值得注意：

  • 僅限螢幕光。結果是你的螢幕將顯示的顏色，而非實體顏料將產生的顏色。顏料、油墨或織物請另尋其他工具。
  • 未做 gamma 校正。此混合平均的是 8 位元 sRGB 通道值，而非線性光值。結果比真實的光學中點略亮，這與大多數 CSS 漸層和設計工具的輸出相符。
  • 僅在瀏覽器中執行。所有計算都在你的瀏覽器本地執行，不上傳任何資料、不需要註冊、也沒有用量限制，這讓設計過程中可以自由地反覆嘗試。

如果這些限制中的任何一項使 sRGB 內插不適用於你的專案，那麼你已經不再是在處理螢幕上的顏色混合問題——而是在處理印刷打樣或 HDR 合成，此時正確的答案是使用其他工具或流程。